Pek çok farklı kullanıcı, diğer kullanıcılardan gelen uygulamalar arasında gezinmek için klavyeyi kullanır. klavye kullanan kullanıcılarda geçici ve kalıcı hareket engelleri olan daha verimli ve üretken olmasını sağlayabilirsiniz. Klavyeyle iyi bir gezinme deneyimi herkes için daha iyi bir deneyim oluşturur.
Odak ve sekme sırası
Belirli bir anda odak, uygulamanızdaki hangi öğeyi (ör. alan, onay kutusu, düğme veya bağlantı) şu anda klavyeden giriş almaktadır. Odaklanılan öğe, klavye etkinliklerini almanın yanı sıra içerik de alır bir kopya oluşturulur.
Odağı bir sayfada taşımak için TAB öğesini kullanarak "ileri"ye gidin ve SHIFT + TAB
"geri" düğmesini tıklayabilirsiniz. O anda odaklanılan öğe genellikle
odak halkası kullanabilir ve çeşitli tarayıcılar odak halkalarını farklı şekillerde biçimlendirebilir. İlgili içeriği oluşturmak için kullanılan
odağın etkileşimli öğelerde ileri ve geri ilerlediği sıra
, sekme sırası olarak adlandırılır.
Metin alanları, düğmeler ve seçim listeleri gibi etkileşimli HTML öğeleri dolaylı olarak odaklanılabilir: Sekme sırasına otomatik olarak eklenir sıradaki konuma göre DOM. Bu etkileşimli öğeler yerleşik klavye etkinliği işleme özelliğine de sahiptir. Elements Örneğin paragraflar ve div'ler gibi öğeler, dolaylı olarak odaklanılabilir değildir. Çünkü kullanıcılar genellikle onlarla etkileşime geçmek zorunda kalmazlar.
Mantıksal bir sekme sırası uygulamak, kullanıcılarınıza daha rahat bir klavyeyle gezinebilirsiniz. Dikkat edilecek iki ana fikir Sekme sırasını değerlendirirken ve ayarlarken şunları göz önünde bulundurun:
- DOM'deki öğeleri mantıksal sırada olacak şekilde düzenleyin
- Görüntülenmemesi gereken ekran dışı içeriğin görünürlüğünü doğru şekilde ayarlayın odak
DOM'deki öğeleri mantıksal sırada olacak şekilde düzenleyin
Uygulamanızdaki sekme sırasının mantıklı olup olmadığını kontrol etmek için sayfasını ziyaret edin. Genel olarak odak, okuma sırasında soldan sağa doğru sayfanın alt kısmından alt kısmına doğru ilerleyin.
Odak sırası yanlış görünüyorsa DOM'deki öğeleri sekme sırasını daha doğal hale getirir. Bir şeyin görsel olarak görünmesini istiyorsanız taşımak istiyorsanız DOM'nin önceki bölümlerinde taşımanızı öneririz.
Mantıksal bir sekme deneyimi yaşamak için aşağıdaki iki düğme grubu arasında geçiş yapmayı deneyin mantıksız bir sekme sırası arasındaki farkları belirtin:
Mantıksal sekme sırası
Uygunsuz sekme sırası
Bu iki örneğin kodu aşağıda karşılaştırılmıştır:
Mantıksal sekme sırası
<button>Kiwi</button>
<button>Peach</button>
<button>Coconut</button>
Uygunsuz sekme sırası
<button style="float: right">Kiwi</button>
<button>Peach</button>
<button>Coconut</button>
CSS kullanarak öğelerin görsel konumunu değiştirirken dikkatli olun: bir sekme sırası oluşturuyor. Yukarıdaki mantıksal olmayan sekme sırasını düzeltmek için kayan "Kiwi" düğmesinden, "Hindistan Cevizi"nden sonra geliyor DOM'deki düğme ve satır içi stili kaldırın.
Ekran dışındaki içeriklerin görünürlüğünü doğru şekilde ayarlama
Bazen ekran dışı etkileşimli öğelerin DOM'de olması gerekir ancak değişiklik gösterir. Örneğin, bir düğmeyi tıkladığınızda kullanıcı yan gezinme çubuğuna odaklanamaz. kapalı olduğunda.
Belirli bir etkileşimli öğeye odaklanılmasını önlemek için öğeye şu CSS özelliklerinden birini verin:
display: nonevisibility: hidden
Öğeyi sekme sırasına geri eklemek için (örneğin, yan gezinme bölmesindeki açıldıysa yukarıdaki CSS özelliklerini sırasıyla şununla değiştirin:
display: blockvisibility: visible
Sonraki adımlar
Bilgisayarlarını neredeyse tamamen klavyeyle veya başka bir giriş cihazını kullanıyorsanız mantıksal bir sekme sırası, erişilebilir ve kullanılabilir hale getirebilirsiniz. Sekme sıralamanızı kontrol etmek için iyi bir alışkanlık olarak her yayınlamadan önce uygulamanıza göz atmayı deneyin.