Geçici ve kalıcı motor bozuklukları olan kullanıcılardan daha verimli ve üretken olmak için klavye kısayolları kullananlara kadar birçok farklı kullanıcı uygulamalarda gezinmek için klavyeden yararlanır. Uygulamanız için iyi bir klavyeyle gezinme stratejisi olması herkes için daha iyi bir deneyim oluşturur.
Odak ve sekme sırası
Belirli bir anda odak, uygulamanızdaki hangi öğenin (alan, onay kutusu, düğme veya bağlantı gibi) o anda klavyeden giriş aldığını ifade eder. Odaklanılan öğe, klavye etkinliklerini almanın yanı sıra panodan yapıştırılan içeriği de alır.
Odağı bir sayfaya taşımak amacıyla "ileri" gitmek için TAB, "geri" gitmek için SHIFT + TAB kullanın. Odaklanılan öğe genellikle bir odak halkası ile belirtilir ve çeşitli tarayıcılar, odak halkalarının stilini farklı şekilde belirler. Odaklanmanın etkileşimli öğelerde ileri ve geri ilerleme sırasına sekme sırası denir.
Metin alanları, düğmeler ve seçili listeler gibi etkileşimli HTML öğeleri dolaylı olarak odaklanabilir: Bu öğeler, DOM'daki konumlarına göre sekme sırasına otomatik olarak eklenir. Bu etkileşimli öğeler, yerleşik klavye etkinliği işleme özelliğine de sahiptir. Kullanıcıların genellikle etkileşimde bulunması gerekmediğinden, paragraflar ve div'ler gibi öğelere dolaylı olarak odaklanılamaz.
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. Sekme sıranızı değerlendirirken ve ayarlarken göz önünde bulundurmanız gereken iki temel fikir vardır:
- DOM'daki öğeleri mantıklı sırada olacak şekilde düzenleyin
- Odaklanmaması gereken ekran dışı içeriğin görünürlüğünü doğru şekilde ayarlayın
DOM'daki öğeleri mantıklı sırada olacak şekilde düzenleyin
Uygulamanızın sekme sırasının mantıklı olup olmadığını kontrol etmek için sayfanızda sekmeler arasında gezinmeyi deneyin. Genel olarak odak, okuma sırasını takip ederek sayfanızın soldan sağa doğru, sayfanın üstünden altına doğru ilerlemelidir.
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. Bir öğenin ekranda görsel olarak daha üst sıralarda görünmesini istiyorsanız öğeyi DOM'de daha erken bir yere taşıyın.
Mantıksal bir sekme sırası yerine mantıksal bir sekme sırasını denemek için aşağıdaki iki düğme grubunda sekme tuşuna basmayı deneyin:
Mantıksal sekme sırası
İlolojik 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>
İlolojik sekme sırası
<button style="float: right">Kiwi</button>
<button>Peach</button>
<button>Coconut</button>
Mantıksız bir sekme sırası oluşturmaktan kaçınmak için CSS kullanarak öğelerin görsel konumunu değiştirirken dikkatli olun. Yukarıdaki mantıksız sekme sırasını düzeltmek için kayan "Kiwi" düğmesini, DOM'da "Coconut" (Hindistan) düğmesinden sonra gelecek şekilde taşıyın ve satır içi stili kaldırın.
Ekran dışı içeriğin görünürlüğünü doğru bir şekilde ayarlama
Bazen ekran dışı etkileşimli öğelerin DOM'da olması gerekir ancak sekme sıranızda olmaması gerekir. Örneğin, bir düğmeyi tıkladığınızda açılan duyarlı yan gezinme bölmeniz varsa kullanıcı, kapalıyken yan gezinme alanına odaklanamaz.
Belirli bir etkileşimli öğenin odak almasını engellemek için öğeye aşağıdaki CSS özelliklerinden birini vermeniz gerekir:
display: nonevisibility: hidden
Öğeyi tekrar sekme sırasına eklemek için (örneğin, yan gezinme çubuğu açıldığında) yukarıdaki CSS özelliklerini sırasıyla şu öğelerle değiştirin:
display: blockvisibility: visible
Sonraki adımlar
Bilgisayarlarını neredeyse tamamen klavyeyle veya başka bir giriş cihazıyla çalıştıran kullanıcılar için, uygulamanızı erişilebilir ve kullanılabilir hale getirmek için mantıklı bir sekme sırası oluşturmak çok önemlidir. Sekme sırasını kontrol etmek için iyi bir alışkanlık olarak her yayınlamadan önce uygulamanıza göz atmayı deneyin.