Etkileşimli kontrollere klavyeyle odaklanılabilir

Yayınlanma tarihi: 2 Mayıs 2019

Tüm özel kontrollerin klavye ile odaklanılabilir olduğunu ve odak göstergesi gösterdiğini manuel olarak kontrol edin. Öğelerin odaklanma sırası, DOM sırasını takip etmelidir. Hangi öğelerin odaklanması gerektiğinden emin değilseniz web.dev'deki Erişilebilirlik Eğitimi'nde odaklanma modülüne bakın.

Manuel olarak test etme

Özel kontrolün odaklanılabilir olduğunu ve odak göstergesi gösterdiğini test etmek için sitenizde sekmeyle gezinmeye başlayın. Denetimler arasında geçiş yapmak için TAB (veya SHIFT + TAB) tuşunu, değerlerini değiştirmek için ise ok tuşlarını, ENTER ve SPACE tuşlarını kullanın (ayrıca Klavye erişimiyle ilgili temel bilgiler başlıklı makaleye bakın):

Sayfadaki tüm etkileşimli kontrollere ulaşabiliyor musunuz? Her etkileşimli kontrolde odak göstergesi var mı?

Nasıl düzeltilir?

Bir sayfadaki tüm öğeler arasında sekme tuşuyla 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 tabindex="0" kullanarak özel kontrol öğesini doğal sekme sırasına ekleyin (Ayrıca Control focus with tabindex başlıklı makaleye bakın). Örneğin:

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

Ayrıca, özel kontrol öğelerine uygun ARIA rollerini de eklemeniz gerekebilir. Özel kontrollerde ARIA rolleri bulunur başlıklı makaleyi inceleyin.

Odak göstergesi görmüyorsanız odak göstergesini her zaman göstermek için :focus kullanmayı düşünebilirsiniz. Sekme tuşuyla düğmeye gitmek için fare veya klavye kullanmanızdan bağımsız olarak, düğmenin odak göstergesi her zaman aynı görünür (Odak stilini de inceleyin).

Bu neden önemli?

Fare kullanamayan veya kullanmak istemeyen kullanıcılar için klavye ile gezinme, ekrandaki her şeye ulaşmanın temel yoludur. İyi klavye deneyimleri, mantıksal bir sekme sırasına ve ayırt edilebilir odak stillerine bağlıdır. Klavyeyi kullanan bir kullanıcı, odaklanılan öğeyi göremiyor veya öğrenemiyorsa sayfayla etkileşimde bulunamaz.

Erişilebilirlik hakkında daha fazla bilgiyi Learn Accessibility'de bulabilirsiniz.

Kaynaklar