Geçici ve kalıcı hareket bozukluğu 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 klavyeyi kullanır. Uygulamanız için iyi bir klavye gezinme stratejisine sahip olmak, 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 sayfada taşımak için "ileri"ye gitmek için TAB, "geri" gitmek içinse SHIFT + TAB kullanın. O sırada odaklanılan öğe genellikle bir odak halkası ile gösterilir ve çeşitli tarayıcılar odak halkalarının stilini farklı şekilde biçimlendirir. Odağın etkileşimli öğelerde ileri ve geri ilerleme sırası, sekme sırası olarak adlandırılır.
Metin alanları, düğmeler ve seçim listeleri gibi etkileşimli HTML öğelerine dolaylı olarak odaklanılabilir: Bu öğeler, DOM'deki konumlarına bağlı olarak sekme sırasına otomatik olarak eklenir. Bu etkileşimli öğeler yerleşik klavye etkinliği işleme özelliğine de sahiptir. Paragraflar ve div'ler gibi öğelere, kullanıcıların genellikle bunlarla etkileşim kurması gerekmediğinden, dolaylı olarak odaklanılabilir değildir.
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ğerlendirirken ve ayarlarken aklınızda bulundurmanız gereken iki ana fikir vardır:
- DOM'deki öğeleri mantıksal sırada olacak şekilde düzenleyin
- Odaklanmaması gereken ekran dışındaki içeriğin görünürlüğünü doğru şekilde ayarlayın
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, sayfanızın yukarıdan altına doğru soldan sağa doğru 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ıksal sekme sırası yerine mantıksal bir sekme sırası deneyimi yaşamak için aşağıdaki iki düğme grubu arasında 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>
Uygunsuz 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 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'deki "Coconut" (Hindistan Cevizi) düğmesinden sonra 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 yan gezinme bölmeniz varsa kullanıcı kapatıldığında yan gezinmeye odaklanamaz.
Belirli bir etkileşimli öğenin odağı almasını engellemek için öğeye aşağıdaki CSS özelliklerinden birini vermelisiniz:
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 klavyeyle veya başka bir giriş cihazıyla çalıştıran kullanıcılar için mantıksal bir sekme sırası, uygulamanızı erişilebilir ve kullanılabilir hale getirmek açısından çok önemlidir. Sekme sıralamanızı kontrol etmek için iyi bir alışkanlık olarak her yayınlamadan önce uygulamanızda gezinmeyi deneyin.