Geçici ve kalıcı hareket engelli kullanıcılardan daha verimli ve üretken olmak için klavye kısayollarını kullanan kullanıcılara kadar birçok farklı kullanıcı, uygulamalarda gezinmek için klavyeden yararlanır. Mantıklı bir Sekme sırası, sorunsuz bir klavye gezinme deneyimi sunmanı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 sekme tuşlarını kullanarak gezinmeyi deneyin. Öğelerin odaklanma sırası, DOM sırasını takip etmelidir. Genel olarak, odak soldan sağa, sayfanızı yukarıdan aşağıya doğru hareket ederek okuma sırasını izlemelidir.
Klavye erişimi ile ilgili temel bilgiler başlıklı makaleden daha fazla bilgi edinebilirsiniz.
Sayfadaki tüm etkileşimli denetimlere ulaşabiliyor musunuz?
Aksi takdirde, bu denetimlerin odaklanılabilirliğini iyileştirmek için tabindex kullanmanız gerekebilir.
Genel kural olarak, kullanıcının etkileşim kurabileceği veya giriş sağlayabileceği tüm kontrollerin odaklanılabilir olması ve bir odaklanma göstergesi göstermesi gerekir.
Klavye kullanıcısı, odaklanılan öğeyi göremiyorsa sayfayla etkileşime geçemez.
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 tüm etkileşimli denetimlere erişemiyorsanız ilk olarak özel denetimleri standartlaştırılmış HTML alternatifleriyle değiştirmeyi deneyin.
Örneğin, düğme gibi davranan bir <div> değerini <button> ile değiştirin.
Yerleşik HTML öğelerini kullanmak, sitenizin erişilebilirliğini önemli ö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 tabindex özelliğini kullanarak klavyeden erişilebilir olmasını sağlayın.
Örneğin:
<div tabindex="0">Focus me with the TAB key</div>
Odaklanma özelliğini tabindex ile kontrol etme başlıklı makalede daha fazla bilgi edinin.
Kaynaklar
Sayfada mantıklı bir sekme sırası var denetimi için kaynak kod