Özel etkileşimli kontrollere odaklanılabilir olmalıdır. Örneğin, bir <div> öğesini şık bir açılır menüye dönüştürmek için JavaScript kullanıyorsanız bu açılır menü otomatik olarak doğru sekme sırasına yerleştirilmez.
Tüm özel kontrollerin klavyeyle odaklanılabilir olup olmadığını manuel olarak kontrol etmeniz gerekir.
Mümkün olduğunda etkileşime olanak tanıyan semantik HTML öğelerini kullanın.
Nasıl test edilir?
Özel kontrolün odaklanılabilir olup olmadığını test etmek için sitede gezinmek üzere TAB tuşuna basın:
Sayfadaki etkileşimli denetimlerin tümüne erişebiliyor musunuz?
Aksi takdirde, bu denetimlerin odaklanılabilirliğini iyileştirmek için tabindex kullanmanız gerekebilir.
Ayrıca Odaklanma özelliğini tabindex ile kontrol etme başlıklı makaleyi de inceleyin.
Nasıl düzeltilir?
Özel bir kontrolün odaklanılabilir olmasını sağlamak için özel kontrol öğesini tabindex="0" kullanarak doğal sekme sırasına ekleyin.
Örneğin:
<div tabindex="0">Focus me with the TAB key</div>
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 kullanan bir kullanıcı, odaklanılan öğeyi göremiyorsa sayfayla etkileşime geçemez.
Erişilebilirlik testinde yeniyseniz manuel erişilebilirlik testi ve destekleyici teknoloji testi hakkında bilgi edinmenizi öneririz.