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, okuma sırasını izlemeli, soldan sağa hareket etmelidir, sayfanın alt kısmından alt kısmına doğru ilerleyin.
Klavye erişimi ile ilgili temel bilgiler başlıklı makaleden daha fazla bilgi edinebilirsiniz.
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.
Genel kural, bir kullanıcının etkileşimde bulunabileceği veya giriş yapabileceği herhangi bir kontrol olduğudur.
odaklanılabilir olmalı ve bir odak göstergesi görüntülemelidir.
Bir klavye kullanıcısı odaklanılanı göremiyorsa sayfayla etkileşimde bulunamaz.
Nasıl düzeltilir?
Odaklanma sırası yanlış görünüyorsa sekme sırasını daha doğal hale getirmek için DOM'deki öğeleri yeniden düzenlemeniz gerekir.
Sayfadaki etkileşimli denetimlerin tümüne erişemiyorsanız
ilk çözüm, özel kontrolleri standartlaştırılmış HTML alternatifleriyle değiştirmektir.
Örneğin, düğme gibi davranan bir <div> değerini <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 azaltır.
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>
Sekmeindex ile odağı kontrol etme bölümünden daha fazla bilgi edinebilirsiniz.
Kaynaklar
Sayfada mantıklı bir sekme sırası var denetimi için kaynak kod