Etkileşimli kontrollere klavyeyle odaklanılabilir

Tüm özel kontrollerin klavyeye odaklanabildiğinden ve bir odak göstergesi gösterdiğinden manuel olarak kontrol edin. Öğelerin odaklanma sırası, DOM sırasına uymalıdır. Hangi öğelerin odaklanmaya uygun olduğundan emin değilseniz web.dev'deki Erişilebilirliği Öğrenin kursundaki odak modülüne bakın.

Manuel olarak test etme

Özel kontrolün odaklanılabilir olup olmadığını ve bir odak göstergesi gösterip göstermediğini test etmek için sitenizde sekme tuşunu kullanarak gezinmeye başlayın. Denetimler arasında hareket etmek için TAB (veya SHIFT + TAB) tuşunu, değerlerini değiştirmek için ok tuşlarını ve ENTER ile SPACE tuşlarını kullanın (Klavye erişiminin temelleri başlıklı makaleyi de inceleyin):

Sayfadaki etkileşimli denetimlerin tümüne erişebiliyor musunuz? Her etkileşimli kontrolde bir odak göstergesi var mı?

Nasıl düzeltilir?

Sekme tuşuyla bir sayfadaki tüm öğeleri seçemiyorsanız bu kontrollerin odaklanılabilirliğini iyileştirmek için tabindex kullanmanız gerekebilir.

Özel bir denetimi odaklanılabilir hale getirmek için tabindex="0" kullanarak özel denetim öğesini doğal sekme sırasına ekleyin (Odaklanma sırasını tabindex ile kontrol etme başlıklı makaleyi de inceleyin). Örneğin:

<div tabindex="0">Focus me with the TAB key</div>

Özel kontrol öğelerine uygun ARIA rollerini de eklemeniz gerekebilir. Özel kontrollerin ARIA rolleri vardır başlıklı makaleyi inceleyin.

Bir odak göstergesi görmüyorsanız her zaman bir odak göstergesi göstermek için :focus kullanmayı düşünebilirsiniz. Sekme tuşuyla düğmeye gitmek için fare mi yoksa klavye mi kullandığınızdan bağımsız olarak düğmenin odak göstergesi her zaman aynı görünür (Odak stili bölümüne de bakın).

Bu neden önemli?

Fare kullanamayan veya kullanmayı tercih etmeyen kullanıcılar için ekrandaki her şeye ulaşmanın birincil yolu klavye gezinmesidir. İyi klavye deneyimleri, mantıklı bir sekme sırasına ve ayırt edilebilir odak stillerine bağlıdır. Klavye kullanıcısı, odaklanılan öğeyi göremez veya öğrenemezse sayfayla etkileşim kuramaz.

Erişilebilirlik İncelemesi yapma başlıklı makalede daha fazla bilgi edinebilirsiniz.

Kaynaklar