Web Sitesi Klavye Navigasyonu: Fare Olmadan Gezinmek
Bazı kullanıcılar siteyi fareyle değil yalnızca klavyeyle kullanır. Hareket kısıtı olan kullanıcılar, ekran okuyucu kullananlar ve hız için kısayol tercih edenler bu gruptadır. Klavyeyle gezilemeyen bir site, bu kullanıcılar için kapalıdır.
Bu rehberde odak sırasının nasıl kurulacağını, görünür odağın neden şart olduğunu, sık yapılan hataları ve test yöntemini ele alıyoruz. Kurgunun sitenize uyarlanması için Weblike web sitesi tasarımı ekibimizden destek alabilirsiniz.
Web Sitesi Klavye Navigasyonu Nedir?
web sitesi klavye navigasyonu, sitedeki bütün işlevlere yalnızca klavye kullanılarak ulaşılabilmesidir. Bağlantılar, butonlar, form alanları ve açılır menüler bu kapsamdadır.
Temel kural basittir: fareyle yapılabilen her şey klavyeyle de yapılabilmelidir. Bu kural sağlanmadığında site bir grup kullanıcı için işlevsiz kalır.
Kimler Klavyeyle Gezer?
Klavye kullanımı yalnızca bir tercih değildir; çoğu zaman zorunluluktur.
- Hareket kısıtı: Fare kullanamayan kullanıcılar.
- Ekran okuyucu: Sesli okuma araçlarıyla gezinenler.
- Geçici durum: Kol yaralanması gibi geçici kısıtlar.
- Hız tercihi: Klavyeyle daha hızlı çalışanlar.
Odak Nedir?
Klavyeyle gezinirken o anda seçili olan öğeye odak denir. Odak, sekme tuşuyla bir sonraki öğeye geçer.
Odağın nerede olduğu her an görülebilmelidir. Görünmeyen odak, kullanıcıyı sayfada kör bırakır.
Görünür Odak Göstergesi
Tarayıcılar odaklanan öğenin etrafına bir çerçeve çizer. Bu çerçevenin tasarım kaygısıyla kaldırılması en yaygın erişilebilirlik hatasıdır.
Çerçeve kaldırılacaksa yerine görünür bir alternatif konulmalıdır. Sade bir renk ya da kalınlık değişimi yeterlidir.
Odak Sırası
Sekme tuşuyla ilerleme sırası, sayfanın görsel sırasıyla uyumlu olmalıdır. Sıranın sağa sola atlaması kafa karıştırır.
Sıra genelde kod sırasına göre belirlenir. Görsel düzen ile kod düzeni ayrıştığında sorun ortaya çıkar.
İçeriğe Atlama Bağlantısı
Her sayfada menüyü atlayıp doğrudan içeriğe geçmeyi sağlayan bir bağlantı bulunmalıdır. Bu bağlantı ilk sekmede görünür.
Uzun menüleri her sayfada baştan geçmek zorunda kalan kullanıcı siteyi terk eder. Bu küçük ekleme büyük kolaylık sağlar.
Menülerin Kullanımı
Açılır menüler yalnızca fare üzerine gelindiğinde açılıyorsa klavyeyle erişilemez. Menülerin klavyeyle de açılması gerekir.
Alt menülere ok tuşlarıyla geçiş beklenen davranıştır. Menü yapısını navigasyon tasarımı yazısında ele aldık.
Açılır Pencereler
Bir pencere açıldığında odak pencerenin içine taşınmalıdır. Aksi halde kullanıcı arka plandaki içerikte gezinir.
Pencere kapandığında odak, açan öğeye geri dönmelidir. Bu detay sıkça atlanır.
Odak Tuzağı
Kullanıcının bir bölümden çıkamaması odak tuzağı olarak adlandırılır. Gömülü içerikler ve pencereler bu soruna yol açar.
Tuzak oluştuğunda kullanıcı sayfayı kapatmak zorunda kalır. Her bileşenden çıkış yolu bulunmalıdır.
Form Alanları
Form alanları arasında sekme ile geçiş doğal sırada olmalıdır. Zorunlu alanların ve hataların klavyeyle fark edilmesi gerekir.
Hata mesajları odakla ilişkilendirilmelidir. Mesaj kurgusunu form doğrulama mesajları yazısında anlattık.
Özel Bileşenler
Sekmeli alanlar, akordiyonlar ve kaydırıcılar özel dikkat gerektirir. Bu bileşenler genelde klavye desteği olmadan geliştirilir.
Standart tuş davranışları uygulanmalıdır. Ok tuşları, boşluk ve giriş tuşu beklenen biçimde çalışmalıdır.
Butonlar ve Bağlantılar
Görsel olarak buton gibi görünen ama aslında bağlantı olmayan öğeler klavyeyle çalışmayabilir. Doğru etiket kullanımı şarttır.
Tıklanabilir her öğe klavyeyle odaklanabilir olmalıdır. Yalnızca görsel olarak tıklanabilir görünen alanlar erişilemez kalır.
Kaydırma ve Sonsuz Liste
Kaydırdıkça yüklenen listelerde klavye kullanıcısı alt bölüme ulaşamayabilir. Bu yapı dikkatle kurulmalıdır.
Daha fazla göster butonu, sonsuz kaydırmaya göre daha erişilebilirdir. Liste yapısı buna göre seçilmelidir.
Kısayol Tuşları
Özel kısayollar faydalı olabilir ancak tarayıcı ve yardımcı teknoloji kısayollarıyla çakışmamalıdır.
Kısayollar kullanıcıya duyurulmalı ve kapatılabilir olmalıdır. Zorunlu kısayollar sorun üretir.
Gömülü İçerikler
Harita, video ve ödeme çerçeveleri klavye davranışını bozabilir. Bu bileşenler ayrı test edilmelidir.
Alternatif erişim yolu sunulmalıdır. Beyan tarafını erişilebilirlik beyanı yazısında ele aldık.
Mobil ile İlişkisi
Klavye navigasyonu yalnızca masaüstü konusu değildir. Harici klavye kullanan tablet kullanıcıları da bu kapsamdadır.
Dokunmatik ekranlarda da erişilebilirlik araçları klavye benzeri gezinme kullanır. Mobil hataları mobil kullanılabilirlik hataları yazısında anlattık. Genel çerçeveyi web sitesi erişilebilirliği yazısında ele aldık.
Test Yöntemi
Test basittir: fareyi bırakıp yalnızca klavyeyle sitede gezinmek. Bu test herkes tarafından yapılabilir.
Ana sayfadan başlayıp bir satın alma ya da form gönderme işlemini tamamlamak yeterlidir. Takılınan her nokta bir sorundur.
Sık Karşılaşılan Hatalar
Klavye sorunlarının büyük bölümü birkaç tipik hatadan kaynaklanır. Bunların bilinmesi denetimi hızlandırır.
- Gizli odak: Odak çerçevesinin kaldırılması.
- Yanlış sıra: Görsel düzenle uyuşmayan sekme sırası.
- Erişilemez menü: Yalnızca fareyle açılan menüler.
- Odak tuzağı: Çıkılamayan pencere veya bileşen.
Geliştirme Sürecine Dahil Etmek
Klavye kontrolü, geliştirme bittikten sonra değil sırasında yapılmalıdır. Sonradan yapılan düzeltmeler daha maliyetlidir.
Yeni bileşen eklenirken bu kontrol rutine bağlanmalıdır. Kısa bir kontrol listesi yeterlidir.
Tasarım Aşamasındaki Kararlar
Odak göstergesinin nasıl görüneceği tasarım aşamasında belirlenmelidir. Geliştiriciye bırakıldığında genelde kaldırılır.
Tasarım dosyasında odak durumu da gösterilmelidir. Bu durum, diğer durumlar kadar önemlidir.
Arama Motoru Tarafıyla İlişkisi
Klavyeyle erişilemeyen içerikler genelde tarayıcılar tarafından da zor okunur. İki konu birbirini besler.
Doğru etiket kullanımı her iki tarafa da katkı sağlar. Taranma durumunu Google Search Console üzerinden izlemek faydalıdır.
Kullanıcı Geri Bildirimi
Klavye kullanan kullanıcılardan gelen bildirimler en değerli kaynaktır. Bu bildirimler için açık bir kanal bulunmalıdır.
Gelen her bildirim kayıt altına alınmalıdır. Tekrar eden sorunlar yapısal bir eksiği gösterir.
Ekran Okuyucu ile Birlikte
Klavye gezinmesi, ekran okuyucu kullanan kişilerin temel aracıdır. İki konu birbirinden ayrı düşünülemez.
Odaklanan öğenin ne olduğunun sesli olarak doğru okunması gerekir. Etiketi eksik bir buton, odaklanılsa bile ne işe yaradığı anlaşılmadan geçilir.
Tarayıcı Farkları
Odak davranışı tarayıcıdan tarayıcıya değişebilir. Bir tarayıcıda sorunsuz çalışan bir bileşen diğerinde takılabilir.
Bu nedenle test en az iki farklı tarayıcıda yapılmalıdır. Mobil tarayıcılar da ayrı değerlendirilmelidir.
Düzenli Denetim
web sitesi klavye navigasyonu bir kez düzeltildiğinde kalıcı olmaz. Her yeni özellik yeni sorun üretebilir.
Dönemsel denetim takvime bağlanmalıdır. Birkaç dakikalık bir klavye turu, çoğu sorunu erken yakalar.
Sitedeki bütün işlevlere yalnızca klavye kullanılarak ulaşılabilmesidir.
Kaldırılacaksa yerine görünür bir alternatif konulmalıdır; aksi halde kullanıcı sayfada kaybolur.
Sayfanın görsel sırasıyla uyumlu olmalı; sağa sola atlayan sıra kafa karıştırır.
Gereklidir; uzun menüleri her sayfada baştan geçmek kullanıcıyı siteden uzaklaştırır.
Odak pencerenin içine taşınmalı, kapandığında açan öğeye geri dönmelidir.
Kullanıcının bir bileşenden klavyeyle çıkamamasıdır; her bileşenden çıkış yolu bulunmalıdır.
Klavye kullanıcısı alt bölüme ulaşamayabilir; daha fazla göster butonu daha erişilebilirdir.
Fare bırakılıp yalnızca klavyeyle bir işlem baştan sona tamamlanmalıdır.
Her yeni özellik sonrası ve dönemsel olarak; kısa bir klavye turu çoğu sorunu yakalar.
Fareyle yapılabilen her şey klavyeyle de yapılabilmelidir. web sitesi klavye navigasyonu kurulurken odağı görünür tutmak, sırayı görsel düzene uydurmak, içeriğe atlama bağlantısı koymak, odak tuzaklarını kaldırmak ve düzenli test etmek gerekir. Erişilebilirlik beyanını erişilebilirlik beyanı yazımızda ele aldık.
BİZE ULAŞIN
Bizimle iletişime geçerek projeniz için hemen ücretsiz teklif alabilirsiniz.
