Geçici ve kalıcı motor bozuklukları olan kullanıcılardan daha verimli ve üretken olmak için klavye kısayolları kullananlara kadar birçok farklı kullanıcı uygulamalarda gezinmek için klavyeden yararlanır. Mantıksal bir sekme sırası, sorunsuz bir klavyeyle gezinme deneyimi sağlamanın önemli bir parçasıdır.
Manuel olarak test etme
Uygulamanızın sekme sırasının mantıklı olup olmadığını kontrol etmek için sayfanızda gezinmeyi deneyin. Öğelerin odaklanıldığı sıra, DOM sırasını izlemelidir. Genel olarak odak, sayfanızın soldan sağa, sayfanın üst kısmından en altına kadar okuma sırasını takip etmelidir.
Klavye erişimiyle ilgili temel bilgiler bölümünden daha fazla bilgi edinebilirsiniz.
Sayfadaki tüm etkileşimli denetimlere ulaşabiliyor musunuz?
Aksi takdirde, bu kontrollerin odaklanılabilirliğini iyileştirmek için tabindex kullanmanız gerekebilir.
Genel kural olarak, kullanıcının etkileşimde bulunabileceği veya giriş sağlayabildiği her denetimin odaklanılabilir olması ve bir odak göstergesi göstermesi gerekir.
Klavye kullanıcısı neyin odaklandığını göremezse sayfayla hiçbir şekilde etkileşimde bulunamaz.
Nasıl düzeltilir?
Odak sırası yanlış görünüyorsa sekme sırasını daha doğal hale getirmek için DOM'daki öğeleri yeniden düzenlemeniz gerekir.
Sayfadaki etkileşimli kontrollerin tümüne erişemiyorsanız ilk yapmanız gereken, özel denetimleri standartlaştırılmış HTML alternatifleriyle değiştirmektir.
Örneğin, düğme işlevi gören bir <div> öğesini <button> ile değiştirin.
Yerleşik HTML öğelerinin kullanılması, sitenizin erişilebilirliğini büyük ölçüde artırabilir ve iş yükünüzü önemli ölçüde azaltabilir.
Standartlaştırılmış HTML eşdeğeri olmayan özel etkileşimli bileşenler oluşturuyorsanız bu bileşenlerin klavyeden erişilebilir olduğundan emin olmak için tabindex özelliğini kullanın.
Örneğin:
<div tabindex="0">Focus me with the TAB key</div>
Sekme dizini ile odağı kontrol etme bölümünden daha fazla bilgi edinebilirsiniz.
Kaynaklar
Sayfada mantıklı bir sekme sırası var denetiminin kaynak kodu