Geçici ve kalıcı hareket engeli olan kullanıcılar ile daha verimli ve üretken olmak için klavye kısayollarını kullananlar da dahil olmak üzere birçok farklı kullanıcı, uygulamalarda gezinmek için klavyeyi kullanır. Uygulamanızda iyi bir klavyeyle gezinme stratejisi kullanmak herkes için daha iyi bir deneyim sunar.
Odak ve sekme sırası
Belirli bir anda odak, uygulamanızda klavyeden aktif olarak giriş alan öğeyi (ör. alan, onay kutusu, düğme veya bağlantı) ifade eder. Odaklanılan öğe, klavye etkinliklerinin yanı sıra panodan yapıştırılan içeriği de alır.
Bir sayfada odağı taşımak için TAB tuşunu kullanarak "ileri", SHIFT + TAB tuşunu kullanarak "geri" gidin. Odaklanılan öğe genellikle bir odaklanma halkası ile belirtilir ve çeşitli tarayıcılar odaklanma halkalarını farklı şekilde stillendirir. Odağın etkileşimli öğeler arasında ileri ve geri hareket etme sırasına sekme sırası denir.
Metin alanları, düğmeler ve seçim listeleri gibi etkileşimli HTML öğeleri örtülü olarak odaklanılabilir: DOM'daki konumlarına göre sekme sırasına otomatik olarak eklenirler. Bu etkileşimli öğelerde yerleşik klavye etkinliği işleme özelliği de bulunur. Kullanıcıların genellikle etkileşimde bulunması gerekmediğinden paragraflar ve div'ler gibi öğeler, odaklanılabilir olarak kabul edilmez.
Mantıksal bir sekme sırası uygulamak, kullanıcılarınıza sorunsuz bir klavye gezinme deneyimi sunmanın önemli bir parçasıdır. Sekme sıranızı değerlendirip ayarlarken göz önünde bulundurmanız gereken iki temel fikir vardır:
- DOM'daki öğeleri mantıksal sıraya göre düzenleyin.
- Odaklanmaması gereken ekran dışı içeriğin görünürlüğünü doğru şekilde ayarlayın.
DOM'daki öğeleri mantıksal sıraya göre düzenleyin.
Uygulamanızın sekme sırasının mantıklı olup olmadığını kontrol etmek için sayfanızda sekmeler arasında geçiş yapmayı deneyin. Genel olarak odak, okuma sırasını takip etmeli, soldan sağa ve sayfanızın üstünden altına doğru hareket etmelidir.
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. Sitenizdeki görsel düzenlemeyi değiştirmek için CSS ile daha önce görünecek şekilde stil vermek yerine DOM'da daha önce görünecek şekilde taşıyın.
Örneğin:
<button style="float: right">Kiwi</button> <button>Peach</button> <button>Coconut</button>
<button>Peach</button> <button>Coconut</button> <button>Kiwi</button>
CSS kullanarak öğelerin görsel konumunu değiştirirken mantıksız bir sekme sırası oluşturmamaya dikkat edin. Mantıksız sekme sırasını düzeltmek için kayan "Kiwi" düğmesini Coconut'tan sonra gelecek şekilde taşıdık ve satır içi stili kaldırdık.
Ekran dışı içeriğin görünürlüğünü doğru şekilde ayarlama
Bazen ekran dışında kalan etkileşimli öğelerin DOM'da olması gerekir ancak sekme sıranızda olmamaları gerekir. Örneğin, bir düğme tıklandığında kenar çubuğunda açılan duyarlı bir gezinme menünüz varsa kullanıcı, kapalıyken gezinmeye odaklanamamalıdır.
Belirli bir etkileşimli öğenin odaklanmasını önlemek için öğeye aşağıdaki CSS özelliklerinden birini vermeniz gerekir:
display: nonevisibility: hidden
Öğeyi sekme sırasına geri eklemek için (ör. gezinme açıkken) bu CSS özelliklerini sırasıyla şunlarla değiştirin:
display: blockvisibility: visible
Sonraki adımlar
Bilgisayarını neredeyse tamamen klavye veya başka bir giriş cihazıyla kullanan kullanıcılar için uygulamanızın erişilebilir ve kullanılabilir olması açısından mantıksal bir sekme sırası çok önemlidir. Sekme sıranızı kontrol etmek için iyi bir alışkanlık olarak, her yayınlamadan önce uygulamanızda sekmeler arasında geçiş yapmayı deneyin.