Sayfadaki görsel sıra DOM sırasını takip eder

Mantıksal bir sekme sırası uygulamak, kullanıcılarınıza klavyeyle sorunsuz bir gezinme deneyimi sağlamanın önemli bir parçasıdır. Ekran okuyucular ve diğer yardımcı teknolojiler sayfada DOM sırasına göre gezinir. Bilgi akışı mantıklı 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 gezinmeyi deneyin. 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.

Sekme sıralamanızı değerlendirirken aklınızda bulundurmanız gereken iki ana fikir vardır:

  • DOM'daki öğeler mantıksal bir düzende düzenlenmiş mi?
  • Ekran dışı içerik, gezinme menüsünde doğru bir şekilde gizleniyor mu?

Gezinmede rahatsız edici görünen atlamalara dikkat edin. Ayrıca, sekme tuşuna basmanın sizi görünmesi amaçlanmamış içeriklere yönlendirdiği ekran dışı atlamalara da dikkat edin.

Klavye erişimiyle ilgili temel bilgiler bölümünden daha fazla bilgi edinebilirsiniz.

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.

Öğeleri görsel olarak yeniden konumlandırmak için CSS kullandıysanız yardımcı teknoloji kullanıcıları anlamsız bir gezinme deneyimi yaşar. CSS kullanmak yerine öğeyi DOM'da önceki bir konuma taşıyın.

Klavye denetimleri, ekran dışı içeriğe hâlâ erişebiliyorsa bu içeriği tabindex="-1" kullanarak kaldırmayı düşünebilirsiniz.

Sekme dizini ile odağı kontrol etme bölümünden daha fazla bilgi edinebilirsiniz.

Kaynaklar

Sayfadaki görsel sıra, DOM siparişini izler denetimi için kaynak kodu