Uzantılar, kullanıcıların yeteneklerine ve tercihlerine göre uyarlanmış ideal tarama deneyimini 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.
Erişilebilirlik özelliklerinden yalnızca özel gereksinimleri olan kullanıcılar değil herkes yararlanabilir. Görme engelli, ellerini zayıf olan 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 son derece önemlidir, ancak dil öğrenenler için de faydalıdır.
Kullanıcılar bir uzantıyla çeşitli şekillerde etkileşimde bulunabilir. Bazı kullanıcıların standart bir monitörü, klavyesi ve faresi vardır. Alternatif olarak, ekran büyütecine ve ekran okuyucuya ihtiyaç duyabilirler. Kullanıcıların bir uzantıya erişmek için hangi araçları kullanacağını tahmin etmek imkansız olsa da, tüm geliştiricilerin bir uzantıyı mümkün olduğunca erişilebilir hale getirmek için atabilecekleri adımlar vardır.
Erişilebilir kullanıcı arayüzü kontrollerini entegre edin
Kullanıcılar kullanıcı arayüzü denetimlerine erişemezse uzantı kullanamazlar. 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 denetimleri klavyeden erişilebilir, kolayca ölçeklenir ve genellikle ekran okuyucular tarafından anlaşılır.
Özel kontrollerde WAI-ARIA
Web Erişilebilirlik Girişimi - Erişilebilir Zengin İnternet Uygulamaları (WAI-ARIA), kullanıcı arayüzü kontrollerini standart bir DOM özelliği kümesi aracılığıyla ekran okuyucular için erişilebilir hale getirmeye yönelik bir özelliktir. Bu özellikler, ekran okuyucuya bir web sayfasındaki kontrollerin işlevi ve mevcut durumu hakkında 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 oluşturmak 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 odağı aldığında araç çubuğunun hangi alt öğesinin odaklanacağı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 etkinliklerin tümünü tanıyamayabilir.
Özel denetimlere WAI-ARIA denetimleri ekleme hakkında hızlı bir eğitim için Dave Raggett'ın WWW2010 sunusuna bakın.
Özel kontrollerde odaklan
Klavye odağı, web'de fare olmadan gezinen kullanıcılar için esastır. Düğmeler, liste kutuları ve menü çubukları gibi işlem ve gezinme denetimlerinin klavye odağını aldığından emin olun.
Varsayılan olarak, HTML DOM'da bulunan ve klavye odağı yalnızca bağlantılar, düğmeler ve form denetimleridir. Bununla birlikte, tabIndex HTML özelliği 0 olarak ayarlanırsa 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 ayarlaması, öğeyi sekme dizisinden kaldırır ancak yine de öğenin klavye odağını programatik olarak almasına izin verir.
Klavye erişimini destekleme
Uzantılar yalnızca klavyeyle kullanılabilmelidir. Böylece, fare kullanamayan kullanıcılar ve olmayan deneyimli kullanıcılar da bu uzantılara erişebilir.
Gezinme
Kullanıcının fareyi kullanmadan bir uzantının farklı bölümleri arasında gezinebildiğinden emin olun. Pop-up kullanımının klavyede gezilebilir olup olmadığını kontrol edin. Bir uzantının gezilebilir olup olmadığını belirlemek için Chrome klavye kısayollarını kullanın.
Arayüzün hangi bölümlerinde klavye odağının olduğunun kolayca görülebildiğinden emin olun. Odaklanan dış çizgi genellikle arayüz etrafında hareket eder, ancak CSS çok fazla kullanılırsa dış çizgi azaltılabilir veya kontrast azalabilir.
Kısayollar
Odağı bir uzantının arayüzünde döndürmek için Sekme tuşunun kullanılması en yaygın klavyeyle gezinme stratejisi olsa da, bu her zaman en kolay veya en verimli seçenek değildir.
Basit bir JavaScript klavye işleyici aşağıdaki gibi görünebilir. WAI-ARIA mülkünün aria-activedescendant, kullanıcı 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="button2">
<img src="buttonpaste" role="button" alt="paste" id="button3">
</div>
Uzantılar, önemli uzantı kullanıcı arayüzü öğelerine açık klavye kısayolları oluşturabilir. Bu kısayolları uygulamak için klavye etkinliği işleyicilerini kontrollere bağlayın. Mevcut kısayolları seçenekler sayfasında sunarak kullanıcıların bunlardan haberdar olmasını sağlayın.
Erişilebilir içerik sağlama
Erişilebilir içerikler sağlamak tüm kullanıcılar için önemlidir. Aşağıdaki yönergelerin birçoğu tüm web içeriği için iyi uygulamaları yansıttığından size tanıdık gelebilir.
Metin
Yazı tipi seçimleri ve metin boyutu, uzantı içeriğinin ne kadar okunabilir olduğunu etkiler. Görme sorunları olan kullanıcıların uzantıların metin boyutunu büyütmeleri gerekebilir. Klavye kısayollarını kullanıyorsanız bunları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ü esnekliğinin göstergesi olarak % 200 testini uygulayın. Metin boyutu veya sayfa yakınlaştırma %200 oranında artırılsa bile 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'de bulunan yazı tiplerinden biri gibi stile sahip web yazı tiplerini tercih edin. Web yazı tipleri farklı boyutlarda olabilir ve ekran okuyucu kullanan kişiler bu yazılara 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 bir kontrast sağlayıp sağlamadığını test etmek için kontrast kontrol aracı kullanın.
Kontrastı değerlendirirken, bilgi aktarmak için grafiklerden yararlanan uzantının her parçasının açıkça görülebildiğini doğrulayın. Belirli görüntülerde, bir resmin çeşitli renk eksikliği 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ı sunabilirsiniz.
Ses
Bir uzantı, bilgi vermek için ses veya videoya ihtiyaç duyuyorsa altyazı ya da transkript bulunduğ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 metin 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. Aradaki 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 başvurabileceğiniz 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 Erişilebilirlikle İlgili Teknik Dokümanları okuyun.