Mantıksal bir sekme sırası, kullanıcıların sorunsuz bir klavye deneyimi yaşaması için önemlidir. Ekran okuyucular ve diğer yardımcı teknolojiler, sayfalarda DOM sırasına göre gezinir. Bilgi akışı anlamlı olmalı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. Genel olarak, odak, sayfanızı üstten alta doğru okuma sırasını takip etmelidir. Çoğu dilde, okuma sırası soldan sağa doğru ilerler. Arapça ve İbranice gibi bazı dillerde okuma düzeni sağdan sola doğru ilerler.
Sekmenizin sırasını değerlendirirken aklınızda bulundurmanız gereken iki ana fikir vardır:
- DOM'daki öğeler mantıklı bir sırada düzenlenmiş mi?
- Ekran dışındaki içerik, navigasyonda doğru şekilde gizleniyor mu?
Gezinme sırasında rahatsız edici görünen atlamalara dikkat edin. Ayrıca, sekme tuşuyla görülemeyecek içeriklere getirildiğinizde ekran dışındaki atlamalara da dikkat edin.
Klavye erişimine ilişkin temel bilgiler sayfasından daha fazla bilgi edinin.
Nasıl düzeltilir?
Odak sırası yanlış görünüyorsa sekme sırasını daha doğal hale getirmek için DOM'deki öğeleri yeniden düzenleyin.
Yardımcı teknoloji kullanıcıları anlamsız bir gezinmeyle karşılaşacağından öğeleri görsel olarak yeniden konumlandırmak için CSS kullanmaktan kaçının. CSS kullanmak yerine öğeyi DOM'da daha önceki bir konuma taşıyın.
Ekran dışındaki içeriğe klavye kontrolleriyle hâlâ erişebiliyorsanız
tabindex="-1" kullanarak bu içeriği kaldırabilirsiniz.
Odaklanma özelliğini tabindex ile kontrol etme başlıklı makalede daha fazla bilgi edinin.
Kaynaklar
Sayfadaki görsel düzen DOM düzenini takip ediyor denetimi için kaynak kod