Klavye navigasyonu.
Klavye navigasyonu, bir sitenin fare olmadan yalnızca klavyeyle baştan sona kullanılabilmesidir ve WCAG'in A seviyesindeki en temel şartlarından biridir.
Erişilebilirlik denetimine nereden başlanacağı sorulduğunda cevap neredeyse her zaman aynıdır: fareyi bırak. Klavye turu, hiçbir araç gerektirmeyen, on dakika süren ve kusurların büyük kısmını ortaya çıkaran tek yöntemdir.
Sebebi şu: klavye erişimi başka birçok şeyin göstergesidir. Klavyeyle çalışmayan bir bileşen, neredeyse her zaman semantik olarak da yanlıştır — bir div'e tıklama olayı bağlanmıştır, bir düğme div ile taklit edilmiştir, bir menü fare olayına bağlanmıştır. Klavye turu bu hataların hepsini aynı anda yakalar.
Kim klavyeyle geziyor
Yaygın varsayım, klavye navigasyonunun küçük bir azınlık için olduğudur. Gerçek daha geniş.
- Motor engeli olan kullanıcılar — fare hassasiyeti gerektiren hareketleri yapamayan ya da titremesi olan kişiler.
- Ekran okuyucu kullanıcıları — neredeyse tamamen klavyeyle gezinir; fare imleci onlar için anlamsızdır.
- Anahtar erişimi ve göz takibi kullanıcıları — bu teknolojiler klavye olaylarını taklit eder, dolayısıyla klavye desteği onların da tek yoludur.
- Geçici durumlar — kırık kol, taşınan fare, bozulan touchpad.
- Güç kullanıcıları — form doldururken fareye hiç dokunmayan herkes. Sayıca en büyük grup budur.
Son grup, klavye erişiminin bir erişilebilirlik kalemi olduğu kadar bir kullanılabilirlik kalemi olduğunu gösterir. İyi bir klavye akışı, formu hızlı dolduran herkese doğrudan fayda sağlar.
Klavye turu: on dakikalık yöntem
Yöntem basittir ve hiçbir araç gerektirmez. Fareyi masadan çek, sayfayı yenile ve yalnız klavyeyle kullanmayı dene.
- Tab — bir sonraki odaklanabilir öğeye geç. Shift+Tab geri.
- Enter — bağlantıyı aç, düğmeye bas, formu gönder.
- Boşluk — düğmeye bas, onay kutusunu değiştir, sayfayı kaydır.
- Ok tuşları — radyo grubu, açılır liste ve sekme grubu içinde gezin.
- Escape — açık bir katmanı, menüyü ya da diyaloğu kapat.
Turu yaparken üç şeye bakılır: her adımda odağın NEREDE olduğu görünüyor mu, sıra mantıklı mı, ve hiçbir yerde takılıyor musunuz. Üçü de ayrı ölçütlere karşılık gelir.
Dört yaygın kusur
Klavye turunda tekrar eden kusurlar birbirine benziyor ve hepsinin bilinen bir çözümü var.
Odak görünmüyor. En sık kusur budur ve neredeyse her zaman aynı satırdan gelir: odak halkasını kaldıran bir CSS kuralı. Kural genelde «çirkin duruyor» diye yazılır ve klavye kullanıcısını siteden tamamen kopardığı fark edilmez. Doğru çözüm halkayı kaldırmak değil, kendi halkanızı tasarlamaktır.
Sıra mantıksız. Görsel düzen ile odak sırası ayrışabilir — özellikle CSS ile yeri değiştirilmiş öğelerde. Kullanıcı sağ sütuna atlar, sonra sola döner, sonra tekrar sağa. Kaynak sırası ile görsel sıranın eşleşmesi, bunun tek sağlıklı çözümüdür; pozitif tabindex ile düzeltmeye çalışmak durumu kötüleştirir.
Odak tuzağı. Bir katman ya da diyalog açıldığında odak içine hapsolur ve Escape ya da kapatma düğmesiyle çıkılamaz. Kullanıcı sayfayı yenilemekten başka çare bulamaz. 2.1.2 bunu doğrudan yasaklar — ve dikkat, bu A seviyesi bir ihlaldir.
Görünmez öğeye odaklanma. Ekranda görünmeyen ama DOM'da duran bir menü, Tab sırasında hâlâ odaklanabilir olabilir. Kullanıcı hiçbir şey görmeden birkaç kez Tab'a basar ve nereye gittiğini anlamaz. Kapalı katmanlar odak sırasından da çıkarılmalıdır.
Klavyeyle gezilemeyen bir bileşen, neredeyse her zaman semantik olarak da yanlıştır.
Doğru öğeyi kullanmak sorunu baştan çözer
Klavye kusurlarının çoğu, yanlış HTML öğesi seçilmesinden doğar. Bir bağlantı yerine div kullanıldığında klavye desteği, odaklanabilirlik ve rol bildirimi elle yeniden kurulmak zorunda kalır — ve genelde eksik kurulur.
Kural nettir: tıklanabilir ve bir yere GİDEN şey bağlantıdır; tıklanabilir ve bir şey YAPAN şey düğmedir. İkisi de klavye desteğini, odaklanabilirliği ve doğru rolü tarayıcıdan bedava alır. Bir div'e bunları eklemek mümkündür ama gereksizdir ve hataya açıktır.
Aynı mantık form öğeleri için de geçerli. Özel stillenmiş bir onay kutusu, gerçek onay kutusunu gizleyip üstüne görsel koyarak yapıldığında klavye desteği korunur; sıfırdan div ile yapıldığında kaybolur. İlk yaklaşım her zaman tercih edilmelidir.
Atlama bağlantısı
Her sayfanın başında aynı navigasyon menüsü varsa, klavye kullanıcısı her sayfada o menünün tamamını Tab'lamak zorunda kalır. Yirmi bağlantılı bir menüde bu, içeriğe ulaşmak için yirmi tuş vuruşu demektir — her sayfada.
Çözüm 2.4.1'in istediği şeydir: sayfanın ilk odaklanabilir öğesi, doğrudan ana içeriğe atlayan bir bağlantı olmalıdır. Normalde görünmez, ama odaklandığında görünür hâle gelir. İlk Tab'da ortaya çıkması ve Enter ile ana içeriğe götürmesi gerekir.
Küçük bir ayrıntı sık atlanır: atlama bağlantısı yalnız kaydırmakla kalmamalı, odağı da hedefe taşımalıdır. Yalnız kaydıran bir bağlantı, görsel olarak çalışıyormuş gibi görünür ama bir sonraki Tab kullanıcıyı menünün başına geri götürür. Hedef öğenin odaklanabilir olması bunu çözer.
Sekme sırası ve kaynak sırası
Klavye odağının hangi sırayla ilerleyeceği, HTML'in kaynak sırasına göre belirlenir — CSS'in oluşturduğu görsel sıraya göre değil. Bu ikisi ayrıştığında ortaya kullanıcının anlamlandıramadığı bir gezinme çıkar: odak ekranın sağ üstüne atlar, oradan sol alta iner, sonra tekrar yukarı çıkar. Görsel olarak düzgün duran bir sayfa, klavyede tamamen dağınık olabilir.
Ayrışmanın en sık sebebi modern düzen araçlarıdır. Izgara ve esnek kutu düzenlerinde öğelerin sırasını görsel olarak değiştirmek tek satırlık bir iştir ve bu değişiklik kaynak sırasına hiç dokunmaz. Mobil için yapılan bir sıra değişikliği, masaüstünde odak akışını bozabilir — ve kimse fark etmez çünkü kimse mobilde Tab'lamaz.
Doğru çözüm sıra düzeltmesini CSS'te değil HTML'de yapmaktır: kaynak sırası, okunması gereken sırayla eşleşmelidir. Bu her zaman mümkün olmayabilir; olmadığı durumlarda en azından kritik akışlarda — form, ödeme, arama — kaynak sırasının doğru olduğundan emin olunmalıdır.
Sırayı pozitif bir sekme indeksiyle zorla düzeltmeye çalışmak neredeyse her zaman durumu kötüleştirir. Pozitif indeks taşıyan öğeler, taşımayanların TAMAMINDAN önce gelir; yani sayfaya tek bir pozitif indeks eklemek, o öğeyi sayfanın en başına taşır ve geri kalan her şeyin sırasını bozar. Kullanılması gereken tek değer sıfırdır (odaklanabilir yap, sırayı bozma) ve eksi birdir (programatik olarak odaklanabilir yap, Tab sırasından çıkar).
Özel bileşenler: klavye sözleşmesi
Sekme, akordeon, açılır menü ve benzeri özel bileşenler yazıldığında, kullanıcıların o bileşen türünden beklediği bir tuş davranışı vardır. Bu beklentiler keyfi değildir; işletim sistemi arayüzlerinden gelir ve WAI-ARIA yazma kılavuzunda her bileşen türü için ayrı ayrı tanımlanmıştır.
- Sekme grubu — Tab ile gruba gir, ok tuşlarıyla sekmeler arasında geç, Tab ile içeriğe çık. Her sekme ayrı Tab durağı DEĞİLDİR.
- Açılır menü — Enter ya da aşağı ok ile aç, ok tuşlarıyla gez, Enter ile seç, Escape ile kapat ve odağı tetikleyiciye döndür.
- Akordeon — her başlık bir düğmedir; Enter ya da boşluk açar ve kapatır.
- Modal diyalog — açıldığında odak içeri, açıkken arkaya geçiş yok, Escape ile kapanır ve odak geri döner.
- Radyo grubu — gruba tek Tab durağı; seçim ok tuşlarıyla değişir.
Bu sözleşmelerin ortak mantığı şudur: Tab bileşenler ARASINDA gezinir, ok tuşları bileşen İÇİNDE gezinir. Bir sekme grubundaki her sekmeyi ayrı bir Tab durağı yapmak teknik olarak çalışır ama beklentiyi bozar ve on sekmeli bir arayüzde kullanıcıyı yorar.
Bu bileşenleri sıfırdan yazmak yerine, klavye davranışı zaten doğru olan yerleşik öğeleri kullanmak — mümkün olduğunda — her zaman daha güvenlidir. Yerleşik bir öğenin klavye desteği tarayıcı tarafından sağlanır, test edilmiştir ve yardımcı teknolojilerle uyumludur.