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" gitmek üzere TAB
ve "geri" gitmek üzere SHIFT + TAB
tuşlarını 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 izlediği sıraya sekme sırası denir.
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 düzenlerken 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'daki öğeleri mantıklı bir sıraya göre düzenleme
Uygulamanızın sekme sırasının mantıklı olup olmadığını kontrol etmek için sayfanızda sekme tuşunu kullanarak gezinmeyi 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'daki öğeleri yeniden düzenlemeniz gerekir. Bir öğenin ekranda görsel olarak daha önce görünmesini istiyorsanız öğeyi DOM'da daha öne 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ı
Mantıksız 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çeriğin görünürlüğünü doğru şekilde ayarlama
Bazen ekran dışı etkileşimli öğelerin DOM'de olması ancak sekme sıranızda olmaması gerekir. Ö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: none
visibility: hidden
Öğeyi sekme sırasına geri eklemek için (ör. yan gezinme menüsü açıldığında) yukarıdaki CSS özelliklerini sırasıyla aşağıdakilerle değiştirin:
display: block
visibility: 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.