Uzantılar, kullanıcıların kendi yeteneklerine ve tercihlerine göre ideal tarama deneyimlerini oluşturmalarına olanak tanır. Uzantılar, görme engelli, işitme kaybı yaşayan, sınırlı el becerisi olan ve diğer engelli kullanıcıların uzantıya erişmesine olanak tanıyarak 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 deneyimli kullanıcılar klavye kısayollarından yararlanabilir. Altyazılar, işitme engelli kullanıcılar için son derece önemli olmanın yanı sıra dil öğrenmeye 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ü kontrollerini 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 kontrolleri klavyeden erişilebilir, kolayca ölçeklenebilir ve genellikle ekran okuyucular tarafından anlaşılır.
Özel kontrol panellerinde 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 etkinlik 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 öğesine odaklanılacağı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 kontrollere odaklan
Klavye odağı, web'de fare olmadan gezinen kullanıcılar için çok önemlidir. Düğmeler, liste kutuları ve menü çubukları gibi işlem ve gezinme kontrollerinin klavye odağına alınabildiğinden emin olun.
Varsayılan olarak, HTML DOM'da klavye odağını alabilen tek öğeler ankrajlar, düğmeler ve form kontrolleridir. Ancak HTML özelliği tabIndex'ü 0 olarak ayarlamak, DOM öğelerini varsayılan sekme sırasına yerleştirir ve klavye odağını almaları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 destekleyin
Uzantılar, fare kullanamayan ve deneyimli kullanıcıların da bu uygulamalara erişmesine olanak sağlayan yalnızca bir klavye ile kullanılabilmelidir.
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 gezinmeye uygun 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. Odak noktası genellikle arayüzde hareket eder. Bununla birlikte, CSS çok fazla kullanılırsa dış çizgi basılabilir veya kontrast azaltılabilir.
Kısayollar
En yaygın klavye gezinme stratejisi, odağı bir uzantının arayüzü üzerinden döndürmek için Sekme tuşunun kullanılmasını içerse de, 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 özelliğinin aria-activedescendant değerinin, mevcut etkin araç çubuğu düğmesini yansıtacak şekilde kullanıcı girişine göre 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="button2">
<img src="buttonpaste" role="button" alt="paste" id="button3">
</div>
Uzantılar, önemli uzantı kullanıcı arayüzü öğelerine özel klavye kısayolları oluşturabilir. Bu kısayolları uygulamak için klavye etkinlik işleyicilerini denetimlere 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, uzantı içeriğinin ne kadar okunabilir olduğunu etkiler. Görme sorunları olan kullanıcıların uzantı metin boyutunu büyütmeleri 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 %200 artırıldığında uzantı hâlâ kullanılabilir mi?
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 ölçeklenebilir ve ekran okuyucu kullanan kişiler tarafından erişilebilir.
Renkler
Bir uzantının 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—Color Blindness Simulator gibi araçlardan yararlanarak resimlerin çeşitli renk görme bozukluğu biçimlerinde nasıl göründüğünü görebilirsiniz.
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, bir görselin içeriğinin tam açıklaması yerine resmin 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 metin hakkındaki WebAIM makalesi, bu konuda yararlanabileceğiniz 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.