Uzantınızı erişilebilir hale getirin

Birçok kullanıcı için erişilebilirlik, tam anlamıyla kullanıcı arayüzüdür ve özellikleri, uzantınızla etkileşimde bulunmak için birincil araç olarak erişilebilirliğe ihtiyaç duymayanlar için genellikle yararlı olabilir. Teknikler çeşitlidir. En azından, metin yüksek kontrastlı olmalıdır. Videolara altyazı eklenmelidir. Resimler alt özelliklerini içermelidir.

Ancak, belirtildiği gibi, bu yalnızca minimum sayıdır. Ek teknikler aşağıda açıklanmıştır.

Erişilebilirliği uygulamanın birkaç yolu vardır ancak en kolay yöntem, özellikle giriş öğeleri olmak üzere standart bir HTML denetimi kullanmaktır. Aşağıdaki resimde bu denetimler gösterilmektedir.

Düğme, onay kutusu, radyo, metin, seçme/seçenek ve bağlantı için ekran görüntüleri ve kod
Düğme, onay kutusu, radyo, metin, seçme/seçenek ve bağlantı için ekran görüntüleri ve kod.

Diğer öğeleri erişilebilir hale getirmek için ARIA özelliklerini kullanın. Bu özellikler, ekran okuyucuya bir web sayfasındaki denetimlerin işlevi ve mevcut durumu hakkında bilgi sağlar. Bir örnekle açıklayalım.

<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>

Varsayılan olarak, HTML DOM'da bulunan ve klavye odağını alabilecek tek öğeler bağlayıcılar, düğmeler ve form kontrolleridir. Neyse ki bir HTML öğesinde tabIndex özelliğinin ayarlanması, öğenin klavye odağı almasını sağlar. Örneğin:

<div tabindex="0">I can receive focus with the tab key.</div>

Bu teknikleri ve daha fazlasını uygulama talimatları için Erişilebilirliği destekleme başlıklı makaleyi inceleyin.