Tüm özel kontrollerin klavyeye odaklanabildiğinden emin olun ve bir odak göstergesi görüntüleyin. Öğelerin odaklanıldığı sıra, DOM sırasını izlemelidir. Hangi öğelere odaklanılması gerektiğinden emin değilseniz Odaklanmaya Giriş bölümünü inceleyin.
Manuel olarak test etme
Özel denetimin odaklanılabilir olduğunu ve bir odak göstergesi görüntülediğini test etmek için sitenizde sekmelerle gezinerek başlayın.
Denetimler arasında geçiş yapmak için TAB (veya SHIFT +
TAB) tuşunu kullanın. Denetimlerin değerlerini değiştirmek için ise ok tuşları ile ENTER ve SPACE tuşlarını kullanın (ayrıca Klavye erişimiyle ilgili temel bilgiler konusuna bakın):
Sayfadaki tüm etkileşimli denetimlere ulaşabiliyor musunuz? Her etkileşimli kontrolde odak göstergesi var mı?
Nasıl düzeltilir?
Bir sayfadaki tüm öğeler arasında geçiş yapamıyorsanız bu kontrollerin odaklanılabilirliğini artırmak için tabindex kullanmanız gerekebilir.
Özel bir kontrolü odaklanılabilir hale getirmek için özel denetim öğesini, tabindex="0" kullanarak doğal sekme sırasına ekleyin (ayrıca bkz. Sekme dizini ile odağı kontrol etme).
Örneğin:
<div tabindex="0">Focus me with the TAB key</div>
Özel kontrol öğelerine uygun ARIA rollerini de eklemeniz gerekebilir. Özel kontrollerde ARIA rolleri var başlıklı makaleyi inceleyin.
Bir odak göstergesi görmüyorsanız her zaman bir odak göstergesi göstermek için :focus öğesini kullanabilirsiniz.
Sekme tuşuna basmak için fare veya klavye kullanmanıza bakılmaksızın, düğmenin odak göstergesi her zaman aynı görünür (ayrıca bkz. Stil odağı).
Bu neden önemli?
Fare kullanamayan veya kullanmamayı seçen kullanıcılar için bir ekrandaki her şeye ulaşmanın birincil yöntemi klavyeyle gezinmedir. İyi klavye deneyimi, mantıklı bir sekme sıralamasına ve kolayca ayırt edilebilir odak stillerine bağlıdır. Klavye kullanıcısı neyin odaklandığını göremezse sayfayla hiçbir şekilde etkileşimde bulunamaz.
Daha fazla bilgi için Erişilebilirlik incelemesi yapma başlıklı makaleye bakın.