<button> veya <input> gibi standart HTML öğelerinde ücretsiz olarak yerleşik klavye erişilebilirliği bulunur. Ancak özel etkileşimli bileşenler oluşturuyorsanız klavyeden erişilebilir olduklarından emin olmak için tabindex özelliğini kullanın.
Denetimlerinizin klavyeden erişilebilir olup olmadığını kontrol etme
Lighthouse gibi bir araç, belirli erişilebilirlik sorunlarını algılamada mükemmeldir, ancak bazı şeyler yalnızca bir insan tarafından test edilebilir.
Sitenizde gezinmek için Tab tuşuna basmayı deneyin. Sayfadaki tüm etkileşimli
kontrollere erişebiliyor musunuz? Aksi takdirde, bu kontrollerin odaklanılabilirliğini artırmak için tabindex kullanmanız gerekebilir.
Sekme sırasına bir öğe ekleme
tabindex="0" kullanarak doğal sekme sırasına bir öğe ekleyin. Örneğin:
<div tabindex="0">Focus me with the TAB key</div>
Bir öğeye odaklanmak için Tab tuşuna basın veya öğenin focus() yöntemini çağırın.
Sekme sırasından öğe kaldırma
tabindex="-1" kullanarak bir öğeyi kaldırın. Örneğin:
<button tabindex="-1">Can't reach me with the TAB key!</button>
Bu işlem, bir öğeyi doğal sekme sıralamasından kaldırır ancak focus() yöntemini çağırarak öğeye odaklanabilir.
Bir öğeye tabindex="-1" uygulanmasının, öğenin alt öğelerini etkilemediğini unutmayın. Doğal olarak sekme sıralamasındaysa veya bir tabindex değeri nedeniyle sekme sıralamasında kalırlar.
Bir öğeyi ve tüm alt öğelerini sekme sırasından kaldırmak için WICG'nin inert çoklu dolgusunu kullanmayı düşünün.
Çoklu dolgu, önerilen bir inert özelliğinin davranışını emüle eder. Bu işlem, öğelerin seçilmesini veya yardımcı teknolojiler tarafından okunmasını engeller.
tabindex > 0 kullanmaktan kaçının
0'dan büyük herhangi bir tabindex, öğeyi doğal sekme sırasının önüne atlar. tabindex değeri 0'dan büyük olan birden fazla öğe varsa sekme sırası, sıfırdan büyük en düşük değerden başlar ve yukarı doğru ilerler.
Ekran okuyucular sayfada sekme sırasında değil, DOM sırasına göre gezindiği için 0'dan büyük bir tabindex değeri kullanmak anti kalıbı olarak kabul edilir. Sekme sıralamasında daha erken yer alması gereken bir öğenin DOM'de daha önceki bir noktaya taşınması gerekir.
Lighthouse, tabindex > 0 olan öğeleri tanımlamayı kolaylaştırır. Erişilebilirlik Denetimi'ni (Lighthouse > Seçenekler > Erişilebilirlik) çalıştırın ve "Hiçbir öğe 0'dan büyük bir [tabindex] değeri yok" denetiminin sonuçlarını bulun.
"Geç tabindex" ile erişilebilir bileşenler oluşturma
Karmaşık bir bileşen oluşturuyorsanız odağın ötesinde ek klavye desteği eklemeniz gerekebilir. Yerleşik select öğesini düşünün. Bu öğeye odaklanılabilir ve ek işlevleri (seçilebilir seçenekler) ortaya çıkarmak için ok tuşlarını kullanabilirsiniz.
Kendi bileşenlerinizde benzer bir işlev uygulamak için "gezici tabindex" olarak bilinen bir teknik kullanın. Dönüşüm sekme dizini, şu anda etkin olanın hariç tüm alt öğeler için tabindex değerini -1 olarak ayarlayarak çalışır. Bileşen, daha sonra kullanıcının hangi tuşa bastığını belirlemek için bir klavye etkinliği işleyicisi kullanır.
Bu durumda bileşen, önceden odaklanılan alt öğe tabindex öğesini -1'e, odaklanılacak alt öğe için tabindex değerini 0'a ayarlar ve öğede focus() yöntemini çağırır.
Önce
<div role="toolbar">
<button tabindex="-1">Undo</button>
<button tabindex="0">Redo</button>
<button tabindex="-1">Cut</button>
</div>
Sonra
<div role="toolbar">
<button tabindex="-1">Undo</button>
<button tabindex="-1">Redo</button>
<button tabindex="0">Cut</button>
</div>
Klavyeyle erişim tarifleri
Özel bileşenlerinizin hangi düzeyde klavye desteğine ihtiyaç duyabileceğinden emin değilseniz ARIA Yazma Uygulamaları 1.1 bölümüne bakabilirsiniz. Bu kullanışlı kılavuz, yaygın kullanıcı arayüzü kalıplarını listeler ve bileşenlerinizin hangi anahtarları desteklemesi gerektiğini tanımlar.