Uzantılar, kullanıcıların yeteneklerine ve tercihlerine göre uyarlanmış ideal tarama deneyimi oluşturmalarını sağlar. Uzantılar; görme bozukluğu, işitme kaybı, sınırlı el becerisi ve diğer engelleri olan kişilerin uzantıya erişebilmesini sağlayarak kapsayıcı bir kullanıcı tabanını teşvik eden erişilebilirlik bileşenleri içermelidir.
Yalnızca özel ihtiyaçları olan kullanıcılar değil herkes erişilebilirlik özelliklerinden yararlanabilir. Görme engelli, el becerisi zayıf ve deneyimli kullanıcıların hepsi klavye kısayollarından yararlanır. Altyazılar ve konuşma metinleri işitme engelli kullanıcılar için önemli olsa da dil öğrenenler için de faydalıdır.
Kullanıcılar bir uzantıyla çeşitli şekillerde etkileşim kurabilir. Bazı kullanıcıların standart bir monitörü, klavyesi ve faresi vardır. Alternatif olarak, ekran büyüteci ve ekran okuyucudan yararlanmayı da tercih edebilirler. İnsanların bir uzantıya erişmek için hangi araçları kullanacağını tahmin etmek imkansız olsa da bir uzantıyı mümkün olduğunca erişilebilir hale getirmek için her geliştiricinin uygulayabileceği adımlar vardır.
Erişilebilir kullanıcı arayüzü kontrollerini entegre edin
Kullanıcılar kullanıcı arayüzü denetimlerine erişemezse bir uzantıyı kullanamazlar. Erişilebilir bir kullanıcı arayüzü oluşturmanın en kolay yolu standart bir HTML kontrolü kullanmaktır.
Standart kontroller
Mümkün olduğunda standart HTML kullanıcı arayüzü kontrollerini kullanın. Standart HTML kontrolleri klavyeden erişilebilir, kolayca ölçeklendirilebilir ve genellikle ekran okuyucular tarafından anlaşılır.
Özel kontrollerde WAI-ARIA
Web Accessibility Initiative - Erişilebilir Zengin İnternet Uygulamaları (WAI-ARIA), standart bir DOM özelliği grubu aracılığıyla kullanıcı arayüzü kontrollerini ekran okuyucular için erişilebilir hale getirmenin bir özelliğidir. Bu özellikler, ekran okuyucuya bir web sayfasındaki kontrollerin işlevi ve mevcut durumu hakkında bilgi sağlar.
Özel denetimlere WAI-ARIA desteği eklemek için bir uzantının DOM öğelerinin, Chrome'un kullanıcı etkileşimi sırasında etkinlikleri artırmak için kullandığı özellikleri içerecek şekilde değiştirilmesi gerekir. Ekran okuyucular bu olaylara yanıt verir ve kontrolün işlevini açıklar. WAI-ARIA tarafından belirtilen DOM özellikleri roller, durumlar ve özellikler olarak sınıflandırılır.
<div role="toolbar">
aria-activedescendant özelliği, araç çubuğu odağı aldığında hangi araç çubuğu alt öğesinin odak alacağını belirtir. tabindex="0" kodu, araç çubuğunun odağı belge sırasına göre aldığını belirtir.
Aşağıdaki örnek araç çubuğunun tüm özelliklerini inceleyin:
<div role="toolbar" tabindex="0" aria-activedescendant="button1">
<img src="buttoncut.png" role="button" alt="cut" id="button1">
<img src="buttoncopy.png" role="button" alt="copy" id="button2">
<img src="buttonpaste.png" role="button" alt="paste" id="button3">
</div>
WAI-ARIA rolleri, durumları ve özellikleri bir kontrolün DOM'una eklendikten sonra, Google Chrome uygun etkinlikleri ekran okuyucuya bildirir. WAI-ARIA desteği devam etmekte olduğundan Google Chrome her WAI-ARIA mülkü için etkinlik oluşturmayabilir ve ekran okuyucular oluşturulan tüm etkinlikleri tanıyamayabilir.
Özel denetimlere WAI-ARIA denetimleri eklemeyle ilgili hızlı bir eğitim için Dave Raggett'ın WWW2010 sunumuna bakın.
Özel kontrollerde odaklan
Klavye odağı, web'de fare olmadan gezinen kullanıcılar için gereklidir. Düğmeler, liste kutuları ve menü çubukları gibi işlem ve gezinme denetimlerinin klavye odağına sahip olduğundan emin olun.
Varsayılan olarak HTML DOM'da bulunan ve klavye odağını alabilecek öğeler yalnızca bağlayıcılar, düğmeler ve form kontrolleridir. Bununla birlikte, tabIndex HTML özelliği 0 olarak ayarlandığında DOM öğeleri varsayılan sekme sırasına yerleştirilir ve bu şekilde klavye odağı almaları sağlanır.
element.tabIndex = 0
element.focus();
tabIndex = -1 ayarlanırsa öğe, sekme sırasından kaldırılır ancak yine de öğenin klavye odağını programatik olarak almasına izin verilir.
Klavye erişimini destekleme
Uzantılar yalnızca klavyeyle kullanılabilmelidir. Böylece, fare kullanamayan ve uzman olmayan kullanıcılar da bu uzantılara erişebilmelidir.
Gezinme
Kullanıcının fareyi kullanmadan bir uzantının farklı bölümleri arasında gezinebildiğinden emin olun. Pop-up kullanımlarının klavyede gezilebilir olup olmadığını kontrol edin. Bir uzantıda gezinilebilir olup olmadığını belirlemek için Chrome klavye kısayollarını kullanın.
Arayüzün hangi bölümlerinde klavye odağının bulunduğunun kolayca görülebildiğinden emin olun. Genellikle odak ana hatları arayüz çevresinde hareket eder, ancak CSS çok fazla kullanılırsa ana hatlar atlanabilir veya kontrast azaltılabilir.
Kısayollar
En yaygın klavyeyle gezinme stratejisi, odağı bir uzantının arayüzü üzerinde döndürmek için Sekme tuşunu kullanmayı içerir, ancak bu her zaman en kolay veya en verimli seçenek değildir.
Basit bir JavaScript klavye işleyicisi aşağıdaki gibi görünebilir. WAI-ARIA özelliğinin aria-activedescendant, mevcut etkin araç çubuğu düğmesini yansıtacak şekilde kullanıcı girişine yanıt olarak nasıl güncellendiğine dikkat edin.
function optionKeyEvent(event) {
var tb = event.target;
var buttonid;
ENTER_KEYCODE = 13;
RIGHT_KEYCODE = 39;
LEFT_KEYCODE = 37;
// Partial sample code for processing arrow keys.
if (event.type == "keydown") {
// Implement circular keyboard navigation within the toolbar buttons
if (event.keyCode == ENTER_KEYCODE) {
ExecuteButtonAction(getCurrentButtonID());
// getCurrentButtonID defined elsewhere
} else if (event.keyCode == event.RIGHT_KEYCODE) {
// Change the active toolbar button to the one to the right (circular).
var buttonid = getNextButtonID();
// getNextButtonID defined elsewhere
tb.setAttribute("aria-activedescendant", buttonid);
} else if (event.keyCode == event.LEFT_KEYCODE) {
// Change the active toolbar button to the one to the left (circular).
var buttonid = getPrevButtonID();
// getPrevButtonID defined elsewhere
tb.setAttribute("aria-activedescendant", buttonid);
} else {
return true;
}
return false;
}
}
<div role="toolbar" tabindex="0" aria-activedescendant="button1" id="tb1"
onkeydown="return optionKeyEvent(event);"
onkeypress="return optionKeyEvent(event);">
<img src="buttoncut" role="button" alt="cut" id="button1">
<img src="buttoncopy" role="button" alt="copy" id="button1">
<img src="buttonpaste" role="button" alt="paste" id="button1">
</div>
Uzantılar, önemli uzantı kullanıcı arayüzü öğeleri için açık klavye kısayolları oluşturabilir. Bu kısayolları uygulamak için klavye etkinliği işleyicilerini kontrollere bağlayın. Seçenekler sayfasında kullanıcılara mevcut kısayolları bildirebilirsiniz.
Erişilebilir içerik sunun
Erişilebilir içerik sağlamak tüm kullanıcılar için önemlidir. Tüm web içeriği için iyi uygulamaları yansıttığından aşağıdaki yönergelerin birçoğu size tanıdık gelebilir.
Metin
Yazı tipi seçenekleri ve metin boyutu, uzantı içeriğinin ne kadar okunabilir olduğunu etkiler. Görme sorunları olan kullanıcıların, uzantının metin boyutunu artırması gerekebilir. Klavye kısayolları kullanıyorsanız, bu kısayolların Chrome'da yerleşik olarak bulunan yakınlaştırma kısayollarını engellemediğinden emin olun.
Bir uzantının kullanıcı arayüzünün esnekliğinin göstergesi olarak % 200 testini uygulayın. Metin boyutu veya sayfa yakınlaştırma %200 oranında artırıldıysa yine de kullanılabilir mi?
Resimlere metin eklemekten kaçının. Kullanıcılar boyutu değiştiremez ve ekran okuyucular resimleri yorumlayamaz. Bunun yerine, Google Font API'da bulunan yazı tiplerinden biri gibi stilli bir web yazı tipini tercih edin. Web yazı tipleri farklı boyutlarda olabilir ve ekran okuyucu kullanan kişiler bu web sitelerine erişebilir.
Renkler
Bir uzantıdaki arka plan rengi ile metin rengi arasında yeterli kontrast olmalıdır. Arka plan ve ön plan renklerinin uygun kontrast sağlayıp sağlamadığını test etmek için kontrast kontrol aracı kullanın.
Kontrastı değerlendirirken, uzantının bilgi aktarmak için grafiklerden yararlanan her bölümünün açıkça görülebildiğini doğrulayın. Belirli görüntülerde, bir resmin çeşitli renk körlüğü biçimlerinde nasıl göründüğünü anlamak için Coblis-Renk Körlüğü Simülatörü gibi araçlar kullanılabilir.
Daha iyi bir kontrast oluşturmak için farklı renk temaları veya kullanıcıya renk şemasını özelleştirme imkanı verebilirsiniz.
Ses
Bir uzantı bilgi aktarmak için ses veya görüntüye ihtiyaç duyuyorsa altyazı ya da konuşma metninin kullanılabilir olduğundan emin olun. Altyazılar hakkında daha fazla bilgi için Açıklamalı ve Altyazılı Medya Programı yönergelerine bakın.
Resimler
Resimler için bilgilendirici alternatif metinler sağlayın.
<img src="img.jpg" alt="The logo for the extension">
Bir görselin içeriğinin tam bir açıklaması yerine görselin amacını belirtmek için alternatif metni kullanın. Boşluklu resimler veya tamamen dekoratif resimler boş bir "" alternatif metnine sahip olmalı veya HTML'den tamamen kaldırılıp CSS'ye yerleştirilmelidir.
Uzantının bir resimdeki metni kullanması gerekiyorsa resim metnini alternatif metne ekleyin. Uygun alternatif metinle ilgili WebAIM makalesi bu konuda iyi bir kaynaktır.
Daha fazla bilgi
Chrome'da erişilebilirlik hakkında daha fazla bilgi edinmek için A11ycasts kanalına göz atın ve Chromium Accessibility Technical Documentation (Chromium Erişilebilirlikle İlgili Teknik Dokümanlar) dokümanını okuyun.