Geçici ve kalıcı motor engelli kullanıcılardan daha verimli ve üretken olmak için klavye kısayollarını kullanan kullanıcılara kadar birçok farklı kullanıcı, uygulamalarda gezinmek için klavyeden yararlanır. Uygulamanız için iyi bir klavyeyle gezinme stratejisi kullanmak herkes için daha iyi bir deneyim sağlar.
Odak ve sekme sırası
Belirli bir anda odak, uygulamanızdaki hangi öğenin (ör. alan, onay kutusu, düğme veya bağlantı) şu anda klavyeden giriş aldığını ifade eder. Odaklanmış öğe, klavye etkinliklerinin yanı sıra panodan yapıştırılan içeriği de alır.
Odağı bir sayfada taşımak için "ileri"ye gitmek için TAB, "geri" gitmek içinse SHIFT + TAB kullanın. Şu anda odaklanmış öğe genellikle bir odak halkası ile gösterilir ve çeşitli tarayıcılar, odak halkalarına farklı stiller uygular. Odak, etkileşimli öğeler arasında ileri ve geri ilerlerken sekme sırası olarak adlandırılan bir sıra izler.
Metin alanları, düğmeler ve seçim listeleri gibi etkileşimli HTML öğeleri dolaylı 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 de bulunur. Kullanıcıların genellikle bu öğelerle etkileşime geçmesi gerekmediğinden paragraflar ve div'ler gibi öğeler, dolaylı olarak odaklanılabilir değildir.
Mantıklı 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ğerlendirirken ve ayarlarken göz önünde bulundurmanız gereken iki temel fikir vardır:
- DOM'daki öğeleri mantıklı bir sıraya göre düzenleme
- Odaklanmamaları gereken ekran dışı içeriklerin görünürlüğünü doğru şekilde ayarlama
DOM'deki öğeleri mantıksal 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 sekme kullanmayı deneyin. Genel olarak, odak soldan sağa, sayfanızı yukarıdan aşağıya doğru hareket ederek okuma sırasını takip etmelidir.
Odak sırası yanlış görünüyorsa sekme sırasını daha doğal hale getirmek için DOM'deki öğeleri yeniden düzenlemeniz gerekir. Bir öğenin ekranda daha önce görsel olarak görünmesini istiyorsanız onu DOM'nin önceki bölümlerinde taşıyın.
Mantıklı bir sekme sırasına kıyasla mantıksız bir sekme sırasını deneyimlemek için aşağıdaki iki düğme grubu arasında sekme tuşuyla geçiş yapmayı deneyin:
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>
Mantıksız sekme sırası
<button style="float: right">Kiwi</button>
<button>Peach</button>
<button>Coconut</button>
Mantıksız bir sekme sırası oluşturmamak için CSS'yi 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" düğmesinin önüne gelecek şekilde taşıyın 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 bu öğeler, sekme sırasında olmamalıdır. Örneğin, bir düğmeyi tıkladığınızda açılan duyarlı bir kenar çubuğunuz varsa kullanıcı, kapalıyken kenar çubuğuna odaklanmamalıdır.
Belirli bir etkileşimli öğenin odağa alınmasını önlemek için öğeye aşağıdaki CSS özelliklerinden birini vermeniz gerekir:
display: nonevisibility: hidden
Örneğin yan gezinme açıldığında öğeyi sekme sırasına tekrar eklemek için yukarıdaki CSS özelliklerini sırasıyla şu şekilde değiştirin:
display: blockvisibility: visible
Sonraki adımlar
Bilgisayarlarını neredeyse tamamen klavye veya başka bir giriş cihazıyla kullanan kullanıcılar için uygulamanızı erişilebilir ve kullanılabilir hale getirmek amacıyla mantıklı bir sekme sırası önemlidir. Sekme sıranızı kontrol etmek için iyi bir alışkanlık olarak her yayınlamadan önce uygulamanızda sekme tuşlarını kullanarak gezinmeyi deneyin.