Uzantılar, kullanıcıların yeteneklerine ve tercihlerine uygun olarak ideal tarama deneyimlerini oluşturmalarına yardımcı olur. Uzantılar; görme bozukluğu, işitme kaybı, sınırlı el becerileri 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 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 gereklidir ancak dil öğrenenlere de yardımcı olur.
Kullanıcılar bir uzantıyla çeşitli şekillerde etkileşim kurabilir. Bazı kullanıcılar standart bir monitör, klavye ve fare kullanırken bazıları ekran büyütecini ve hatta ekran okuyucuyu tercih edebilir. Kullanıcıların bir uzantıya erişmek için hangi araçları kullanacağını tahmin etmek imkansız olsa da her geliştiricinin bir uzantıyı mümkün olduğunca erişilebilir hale getirmek için uygulayabileceği adımlar vardır.
Erişilebilir kullanıcı arayüzü denetimlerini entegre etme
Kullanıcılar kullanıcı arayüzü denetimlerine erişemiyorsa uzantıları 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ü denetimlerini kullanın. Standart HTML denetimleri klavyeden erişilebilir, kolayca ölçeklenebilir 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), standart bir DOM özellikleri grubu aracılığıyla kullanıcı arayüzü denetimlerini ekran okuyuculara erişilebilir hale getirmeye yönelik bir spesifikasyondur. Bu özellikler, ekran okuyucuya bir web sayfasındaki denetimlerin 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 amacıyla 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 mülkü, araç çubuğu odağı aldığında araç çubuğunun hangi alt öğesinin odağı alacağını belirtir. tabindex="0" kodu, araç çubuğunun belge sırasına göre odak aldığını belirtir.
Aşağıda, örnek bir araç çubuğunun tam teknik özelliklerini görebilirsiniz:
<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>
Bir denetimin DOM'una WAI-ARIA rolleri, durumları ve özellikleri eklendikten sonra Google Chrome, ekran okuyucuya uygun etkinlikleri gönderir. WAI-ARIA desteği hâlâ geliştirilme aşamasında olduğu için Google Chrome her WAI-ARIA mülkü için bir etkinlik oluşturmayabilir ve ekran okuyucular oluşturulan tüm etkinlikleri tanımayabilir.
Özel denetimlere WAI-ARIA denetimleri eklemeyle ilgili kısa bir eğitim için Dave Raggett'in WWW2010'daki sunumu başlıklı makaleyi inceleyin.
Özel denetimlere odaklanma
Klavyeyle odaklanma, web'de fare kullanmadan gezinen kullanıcılar için çok önemlidir. Düğmeler, liste kutuları ve menü çubukları gibi işlem ve gezinme kontrollerinin klavye odağını alabildiğinden emin olun.
Varsayılan olarak, HTML DOM'da klavye odağını alabilen tek öğeler ankrajlar, düğmeler ve form kontrolleridir. Bununla birlikte, tabIndex HTML özelliğinin 0 olarak ayarlanması, DOM öğelerini varsayılan sekme sırasına yerleştirerek klavye odağının alınmasını sağlar.
element.tabIndex = 0
element.focus();
tabIndex = -1 ayarı, öğeyi sekme sırasından kaldırır ancak öğenin programlı olarak klavye odağını almasına izin verir.
Klavye erişimini destekleme
Uzantılar yalnızca klavyeyle kullanılabilir olmalıdır. Böylece, fare kullanamayan kullanıcılar ve fare kullanmayı tercih etmeyen güçlü kullanıcılar uzantılara erişebilir.
Gezinme
Kullanıcının, fare kullanmadan bir uzantının farklı bölümleri arasında gezinebildiğinden emin olun. Pop-up'ların klavyeyle gezinilebilir olduğundan emin olun. Bir uzantının gezinilebilir olup olmadığını belirlemek için Chrome klavye kısayollarını kullanın.
Klavye odağının arayüzün hangi bölümlerinde olduğunun kolayca görülebildiğinden emin olun. Genellikle odak kenarlık arayüzde hareket eder. Ancak CSS çok fazla kullanılıyorsa kenarlık bastırılabilir veya kontrast azaltılabilir.
Kısayollar
Klavyeyle gezinmeyle ilgili en yaygın strateji, uzantının arayüzünde odak noktasını döndürmek için Sekme tuşunu kullanmaktır. Ancak 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ü aria-activedescendant'ün, kullanıcı girişine yanıt olarak mevcut etkin araç çubuğu düğmesini yansıtacak şekilde nasıl güncellendiğini unutmayın.
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 kullanıcı arayüzü öğeleri için açık klavye kısayolları oluşturabilir. Bu kısayolları uygulamak için klavye etkinlik işleyicilerini kontrollere bağlayın. Kullanıcılara mevcut kısayolları seçenekler sayfasında sunarak kısayollardan haberdar olmalarını sağlayın.
Erişilebilir içerikler sunma
Erişilebilir içerik sağlamak tüm kullanıcılar için önemlidir. Aşağıdaki yönergelerin çoğu, tüm web içerikleriyle ilgili en iyi uygulamaları yansıttığı için tanıdık gelebilir.
Metin
Yazı tipi seçenekleri ve metin boyutu, bir uzantının içeriğinin okunabilirliğini etkiler. Görme sorunu olan kullanıcıların, uzantıların metin boyutunu büyütmesi gerekebilir. Klavye kısayolları kullanıyorsanız bunların Chrome'a yerleşik yakınlaştırma kısayollarını etkilemediğinden emin olun.
Bir uzantının kullanıcı arayüzünün esnekliğini ölçmek için % 200 testini uygulayın. Metin boyutu veya sayfa yakınlaştırma özelliği %200 artırıldığında uzantı hâlâ kullanılabilir durumda mı?
Metni resimlere 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ş web yazı tipini tercih edin. Web yazı tipleri farklı boyutlara göre ölçeklendirilebilir ve ekran okuyucu kullanan kişiler tarafından erişilebilir.
Renkler
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 bir kontrast kontrol aracı kullanın.
Kontrastı değerlendirirken, uzantının bilgileri iletmek için grafiklere dayanan her bölümünün açıkça görülebildiğinden emin olun. Belirli resimler için Coblis - Renk Körlüğü Simülatörü gibi araçlar, bir resmin çeşitli renk eksikliği biçimlerinde nasıl göründüğünü görmek için kullanılabilir.
Daha iyi bir kontrast oluşturmak için farklı renk temaları sunabilir veya kullanıcıya renk şemasını özelleştirme olanağı verebilirsiniz.
Ses
Bir uzantı, bilgi aktarmak için ses veya video kullanıyorsa altyazı veya transkriptin bulunduğundan emin olun. Altyazılar hakkında daha fazla bilgi için Anlatılan ve Altyazı Eklenen Medya Programı yönergeleri'ne bakın.
Resimler
Görseller için bilgilendirici alternatif metinler sağlayın.
<img src="img.jpg" alt="The logo for the extension">
Alternatif metni, görselin içeriğinin tam bir açıklaması yerine görselin amacını belirtmek için kullanın. Boşluk dolduran resimler veya tamamen dekoratif resimler boş bir "" alternatif metnine sahip olmalı ya da HTML'den tamamen kaldırılıp CSS'ye yerleştirilmelidir.
Uzantı bir resimdeki metni kullanması gerekiyorsa resim metnini alternatif metne ekleyin. Uygun alternatif metinle ilgili WebAIM makalesi referansta bulunulabilecek iyi bir kaynaktır.
Daha fazla bilgi
A11ycasts kanalına göz atarak ve Chromium Erişilebilirlik Teknik Dokümanları'nı okuyarak Chrome'daki erişilebilirlik hakkında daha fazla bilgi edinin.