2.5.6 Eszamani Giriş Mekanizmalari
Web içeriği, kısıtlama zorunlu olmadıkça, güvenlik için gerekli olmadıkça veya kullanıcı ayarlarina uyum için gerekli olmadıkça, platformda mevcut giriş yontemlerinin kullanımını kisitlamamalidir.
Bu kural ne anlama geliyor
WCAG 2.5.6, platform birden fazla modaliteyi desteklediginde web içeriğinin kullanıcıları tek bir giriş modalitesiyle sinirlandirmamasini gerektirir. Bir kullanıcı dokunmatik, fare, klavye, kalem veya sesle etkileşim kurabiliyorsa, web içeriği hangi giriş yontemlerinin kullanılabilir olduğunu yapay olarak sinirlandirmamalidir.
Kullanıcılar tek bir oturum sırasında sıklıkla giriş yontemleri arasında geçiş yapar. Bir kişi kaydırmak için dokunmatik ekranı kullanabilir, yazmak için Bluetooth klavyeye gecebilir ve hassas secimler için fareyi kullanabilir. İçerik tek bir giriş yontemini varsaymamali veya zorundaa birakmamalidir.
Neden önemlidir
Birçok yardımcı teknoloji kullanıcısı birden fazla giriş mekanizmasina bağımlıdır. Sınırlı el hareketliligi olan bir kullanıcı bazı eylemler için agizla calistirilan bir kalem ve digerleri için sesli kontrol kullanabilir. Girisi yalnızca dokunmatikla sinirlandirmak, klavye veya anahtar erişimi kullanıcılarının içerikle etkilesimini engellerdi.
Engeli olmayan kullanıcılar da düzenli olarak giriş mekanizmaları arasında geçiş yapar. Dizustu bilgisayar kullanıcıları dokunmatik yuzey ile klavye arasında geçiş yapar. Tablet kullanıcıları dokunmatik ile bağlı klavye arasında geçiş yapar. Giriş modalitelerini kısıtlamak herkes için gereksiz engeller oluşturur.
İlgili axe-core kuralları
Bu kriter için otomatik axe-core kuralı bulunmamaktadır. Giriş modalitesi kisitlamalarini tespit etmek, birden fazla giriş cihazı ile manuel test ve belirli giriş türlerini devre dışı bırakan veya engelleyen JavaScript kodunu belirlemek için kod incelemesi gerektirir.
Nasıl test edilir
- Aynı sisteme birden fazla giriş cihazı (klavye, fare, dokunmatik ekran) baglayin.
- Tüm etkileşimli gorevleri tamamlamak için her giriş yontemini bağımsız olarak kullanmayi deneyin.
- Gorev sırasında giriş yontemleri arasında geçiş yapın ve işlevselliğin korunduğundan emin olun.
- Kod tabanında giriş türünü tespit eden ve alternatif giriş yöntemlerini devre dışı bırakan kodu arayın.
- Klavye odaklı UI öğelerini tamamen gizleyen (pointer: coarse) gibi medya sorgularını kontrol edin.
Nasıl düzeltilir
Giriş modalitelerini kısıtlamaktan kaçının. Tüm mevcut giriş mekanizmaları arasında çalışan etkilesimler tasarlayın.
Giriş algilama — yanlış uygulama
// Yanlış: Dokunmatik algilandiginda fare olaylarını devre dışı birakir
if ('ontouchstart' in window) {
document.body.classList.add('dokunmatik-cihaz');
// Tüm fareyle gezinme ve fare etkileşimleri CSS ile devre dışı birakildi
}
// Yanlış: Dokunmatik cihazlarda klavye destegini kaldırır
if (navigator.maxTouchPoints > 0) {
document.removeEventListener('keydown', klavyeIsle);
}
Giriş algilama — doğru uygulama
// Doğru: Tüm giriş türleri arasında çalışan pointer olayları kullanın
element.addEventListener('pointerdown', etkilesimiIsle);
element.addEventListener('pointerup', etkilesimiIsle);
// Doğru: Dokunmatik yeteneginden bağımsız olarak klavye destegini koruyun
document.addEventListener('keydown', klavyeIsle);
// Doğru: İşlevsellik kaldirmadan UI yi uyarlayin
if (matchMedia('(pointer: coarse)').matches) {
dokunmaHedefleriniBuyut();
// Klavye gezintisi hala çalışıyor
}
Tüm giriş yöntemlerini koruyan CSS
/* Doğru: Fareyle gezinmeyi gereklilik değil iyilestirme olarak kullanın */
.açılır-tetikleyici:hover + .açılır-menü,
.açılır-tetikleyici:focus + .açılır-menü,
.açılır-menü:hover,
.açılır-menü:focus-within {
display: block;
}
/* Doğru: Fare ile de çalışan dokunmatik dostu boyutlar */
@media (pointer: coarse) {
.etkileşimli-öğe {
min-height: 44px;
min-width: 44px;
}
}
/* Giriş yonteminden bağımsız olarak etkileşimli öğeleri erişilebilir tutun */
.etkileşimli-öğe {
min-height: 32px;
min-width: 32px;
}
Sık yapılan hatalar
- Dokunmatik desteği tespit edip fare veya klavye olay isleyicilerini devre dışı bırakmak.
- Alternatif sağlamadan fareyle gezinme tetikli islevseligi tamamen kaldırmak için (hover: none) gibi CSS medya sorguları kullanmak.
- Tabletlerde arayüzü yalnızca dokunmatik moduna kilitleyerek bağlı klavye veya farelerin kullanımını engellemek.
- Fiziksel klavye bağlı olsa bile mobil gorunumlerde klavye gezintisini devre dışı bırakmak.
- Sag tıklama, klavye kısayolları veya diğer ikincil giriş mekanizmalarini engellemek için JavaScript kullanmak.
Kaynaklar
- MDN: Pointer Events— MDN