Uzantılar, kullanıcıların kendi ideal göz atma deneyimlerini oluşturmalarını sağlar. Bu deneyim, kullanıcının yeteneklerine ve tercihlerine göre uyarlanır. Uzantılar, görme engelli, işitme kaybı olan, sınırlı el becerisine sahip ve diğer engelli kişilerin uzantıya erişmesini sağlayarak kapsayıcı bir kullanıcı tabanını teşvik eden erişilebilirlik bileşenleri içermelidir.
Erişilebilirlik özelliklerinden yalnızca özel ihtiyaçları olan kullanıcılar değil, herkes yararlanabilir. Görme engelli, el becerisi düşük ve ileri düzey kullanıcılar klavye kısayollarından yararlanabilir. Altyazılar ve transkriptler, işitme engelli kullanıcılar için çok önemlidir. Ayrıca dil öğrenen kullanıcılara da yardımcı olur.
Kullanıcılar, uzantılarla çeşitli şekillerde etkileşimde bulunabilir. Bazı kullanıcılar standart bir monitör, klavye ve fare kullanır. Bazıları ise ekran büyütecine ve muhtemelen ekran okuyucuya ihtiyaç duyar. Kullanıcıların bir uzantıya erişmek için hangi araçları kullanacağını tahmin etmek imkansız olsa da geliştiriciler, uzantılarını mümkün olduğunca erişilebilir hale getirmek için bazı adımlar atabilir.
Erişilebilir kullanıcı arayüzü kontrollerini entegre etme
Kullanıcılar, kullanıcı arayüzü kontrollerine erişemezse uzantıları kullanamaz. Erişilebilir bir kullanıcı arayüzü oluşturmanın en kolay yolu standart bir HTML denetimi kullanmaktır.
Standart kontroller
Mümkün olduğunda standart HTML kullanıcı arayüzü kontrollerini kullanın. Standart HTML kontrollerine klavyeyle erişilebilir, kolayca ölçeklendirilebilir ve genellikle ekran okuyucular tarafından anlaşılır.
Özel kontrollerde WAI-ARIA
Web Accessibility Initiative - Accessible Rich Internet Applications (WAI-ARIA), DOM özelliklerinin standart bir grubu aracılığıyla kullanıcı arayüzü kontrollerini ekran okuyucular için erişilebilir hale getirmeye yönelik bir spesifikasyondur. Bu özellikler, web sayfasındaki kontrollerin işlevi ve mevcut durumu hakkında ekran okuyucuya bilgi sağlar.
Özel kontrollere WAI-ARIA desteği eklemek için bir uzantının DOM öğelerinin, Chrome'un kullanıcı etkileşimi sırasında etkinlikleri tetiklemek için kullandığı özellikleri içerecek şekilde değiştirilmesi gerekir. Ekran okuyucular bu etkinliklere 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 odaklandığında hangi araç çubuğu alt öğesinin odaklanacağını belirtir. tabindex="0" kodu, araç çubuğunun belge sırasına göre odaklandığını belirtir.
Aşağıda, örnek bir araç çubuğunun tam spesifikasyonu verilmiştir:
<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, ekran okuyucuya uygun etkinlikleri gönderir. WAI-ARIA desteği henüz geliştirme aşamasında olduğundan Google Chrome, her WAI-ARIA özelliği için etkinlik oluşturmayabilir ve ekran okuyucular, oluşturulan etkinliklerin tamamını tanımayabilir.
Özel kontrollere WAI-ARIA kontrolleri ekleme hakkında kısa bir eğitim için Dave Raggett'in WWW2010'daki sunumuna göz atın.
Özel kontrollerde odak
Klavyeyle odaklanma, web'de fare olmadan gezinmek isteyen kullanıcılar için çok önemlidir. Düğmeler, liste kutuları ve menü çubukları gibi işlem ve gezinme kontrollerinin klavye odağı alabilmesini sağlayın.
Varsayılan olarak, HTML DOM'da klavye odağını alabilen tek öğeler bağlantılar, düğmeler ve form kontrolleridir. Ancak, HTML özelliğini tabIndex olarak ayarlamak, DOM öğelerini varsayılan sekme sırasına yerleştirir ve klavye odağı almalarını sağlar.0
element.tabIndex = 0
element.focus();
tabIndex = -1 ayarı, öğeyi sekme sırasından kaldırır ancak öğenin programatik olarak klavye odağı almasına izin vermeye devam eder.
Klavye erişimini destekleme
Uzantılar yalnızca klavye ile kullanılabilmelidir. Bu sayede fare kullanamayan kullanıcılar ve fare kullanmak istemeyen uzman kullanıcılar uzantılara erişebilir.
Gezinme
Kullanıcının fareyi kullanmadan bir uzantının farklı bölümleri arasında gezinebildiğini kontrol edin. Pop-up'ların klavye ile gezilebildiğinden emin olun. Bir uzantıda gezinilip gezinilemediğini belirlemek için Chrome klavye kısayollarını kullanın.
Arayüzün hangi bölümlerinde klavye odağı olduğunu kolayca görebildiğinizden emin olun. Odaklanma ana hattı genellikle arayüzde hareket eder. Ancak CSS çok yoğun bir şekilde kullanılırsa ana hat gizlenebilir veya kontrast azaltılabilir.
Kısayollar
En yaygın klavyeyle gezinme stratejisi, odağı bir uzantının arayüzünde döndürmek için Tab tuşunu kullanmayı içerse de 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, kullanıcının girişine yanıt olarak mevcut etkin araç çubuğu düğmesini yansıtacak şekilde 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. Kullanıcıları Seçenekler sayfasında sunarak mevcut kısayollardan haberdar edin.
Erişilebilir içerik sunma
Erişilebilir içerik sunmak tüm kullanıcılar için önemlidir. Aşağıdaki kuralların çoğu, tüm web içerikleri için iyi uygulamaları yansıttığından tanıdık gelebilir.
Metin
Yazı tipi seçimleri ve metin boyutu, uzantı içeriğinin okunabilirliğini etkiler. Görme sorunları olan kullanıcıların, uzantı metin boyutunu artırması gerekebilir. Klavye kısayollarını kullanıyorsanız Chrome'da yerleşik olarak bulunan yakınlaştırma kısayollarıyla çakışmadığından emin olun.
Uzantı kullanıcı arayüzünün esnekliğini gösteren bir işaret olarak % 200 testini uygulayın. Metin boyutu veya sayfa yakınlaştırma %200 artırıldığında hâlâ kullanılabilir mi?
Resimlere metin yerleştirmekten kaçının. Kullanıcılar boyutu değiştiremez ve ekran okuyucular resimleri yorumlayamaz. Bunun yerine, Google Font API'de bulunan yazı tiplerinden biri gibi stilize edilmiş bir web yazı tipini tercih edin. Web yazı tipleri farklı boyutlarda ölçeklenebilir ve ekran okuyucu kullanan kişiler tarafından erişilebilir.
Renkler
Bir uzantıda 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, bilgileri aktarmak için grafiklere dayanan uzantının her bölümünün net bir şekilde göründüğünü doğrulayın. Belirli resimler için Coblis—Color Blindness Simulator gibi araçlar kullanılarak bir resmin çeşitli renk eksikliği biçimlerinde nasıl göründüğü görülebilir.
Daha iyi bir kontrast oluşturmak için farklı renk temaları sunmayı veya kullanıcının renk düzenini özelleştirmesine olanak tanımayı düşünebilirsiniz.
Ses
Bilgi aktarmak için ses veya videodan yararlanan uzantılarda altyazı ya da transkript bulunduğundan emin olun. Altyazılar hakkında daha fazla bilgi için Described and Captioned Media Program yönergelerini inceleyin.
Resimler
Görseller için bilgilendirici alternatif metinler sağlayın.
<img src="img.jpg" alt="The logo for the extension">
Resmin içeriğinin birebir açıklamasını yapmak yerine, amacını belirtmek için alternatif metni kullanın. Boşluk resimleri veya tamamen dekoratif amaçlı resimler için boş bir "" alternatif metin olmalı ya da bu resimler HTML'den tamamen kaldırılıp CSS'ye yerleştirilmelidir.
Uzantının bir resimdeki metni kullanması gerekiyorsa resim metnini alternatif metne ekleyin. Bu konuda WebAIM'in uygun alternatif metinlerle ilgili makalesini inceleyebilirsiniz.
Daha fazla bilgi
Chrome'da erişilebilirlik hakkında daha fazla bilgi edinmek için A11ycasts kanalına göz atın ve Chromium Erişilebilirlik Teknik Belgeleri'ni okuyun.