Keyboard Focus Tasarım Değil, Navigasyon Durumudur

Bir menüyü fareyle tıklamak kolay, ama Tab tuşuyla ulaşmaya çalışınca hiçbir şey olmuyor. Bunun nedeni çoğu zaman tasarım değil, kodlama hatası.

Design Den Solutions'ın hazırladığı yazıda vurgulanan nokta basit ama kritik: keyboard focus bir dekorasyon değil, navigasyonun işlevsel bir parçasıdır. Eğer bir bağlantıya Tab ile ulaşamazsanız, o bağlantı gerçekten çalışmıyor demektir.

Sorun genellikle üç yerden gelir. Birincisi, tarayıcının varsayılan outline'ını kaldıran CSS reset'ler. Tasarımcı "çirkin görünüyor" diye kaldırırsa, klavye kullanıcısı nerede olduğunu bilemez. İkincisi, sticky header'lar. Sabit üst bar, odaklanmış bağlantıyı kapatabilir ve kullanıcı neyi seçtiğini göremez. Üçüncüsü, sadece hover'da açılan dropdown menüler. Fare olmadan bu menülere erişilemiyor.

Çözüm semantik HTML'den başlar. Navigasyon için `<a>` tag'ı, aksiyonlar için `<button>` kullan. Bir `<div>`'e click handler eklemek, onu otomatik olarak klavye erişilebilir yapmaz. Tarayıcı, doğru HTML öğeleriyle Tab sırasını, Enter aktivasyonunu ve beklenen davranışları zaten biliyor.

Bir dropdown açan kontrol, navigasyon değil aksiyondur; o zaman button olmalı. Basit bir `<a href="#">` yapısı, Tab'ı ve Enter'ı doğru şekilde işler. Eğer CSS'te outline'ı gizlersen, onu başka bir şekilde (renk, border, arka plan) görünür kıl.

Erişilebilirlik sadece engelli kullanıcılar için değildir. Gözlüğünü unutan biri, mobil cihazda gezinen biri, stres altında hızlı tıklayan biri, hepsi klavyeden fayda görür. Keyboard focus'u önemsemek, sitenin gerçekten kullanılabilir olduğu anlamına gelir.