Ne anlama gelir?
Odak Göstergesi (Focus Indicator), bir kullanıcı klavyeyle gezerken o an hangi öğenin (link, buton, form alanı) seçili olduğunu gösteren görsel işarettir; genellikle öğenin etrafındaki bir çerçevedir.
Neden kritik?
Klavye kullanıcısı, farenin imleci gibi bir referansa sahip değildir. Odak göstergesi olmadan, kullanıcı sayfanın neresinde olduğunu göremez ve gezinme imkânsızlaşır.
Yaygın hata
- Estetik kaygıyla odak çerçevesini tamamen kaldırmak (
outline: none) - Odak göstergesini görünmez veya çok soluk yapmak
Ne yapmalı?
Odak göstergesini asla tamamen kaldırmayın; gerekiyorsa markanıza uygun ama net ve görünür bir tasarımla değiştirin. Görünür odak, klavye erişilebilirliğinin olmazsa olmazıdır.
Ne anlama gelir?
Odak göstergesi (focus indicator / focus ring), bir web sayfasında klavye ile gezinen kullanıcının o an hangi öğe üzerinde olduğunu gösteren görsel işarettir; genellikle öğenin etrafında beliren bir çerçeve veya vurgu olarak görünür. Klavye kullanan kullanıcılar (fare kullanamayanlar, ekran okuyucu kullananlar) için odak göstergesi kritiktir; onsuz, kullanıcı sayfada nerede olduğunu ve hangi öğeyle etkileşime gireceğini bilemez. Odak göstergesi, klavye erişilebilirliğinin temel bir bileşenidir.
Neden önemli?
- Klavye kullanıcısının nerede olduğunu gösterir
- Hangi öğenin etkin olduğunu belirtir
- Klavyeyle gezinmeyi mümkün kılar
- Erişilebilirliğin temel bir gereğidir
Nasıl doğru yapılır?
Odak göstergesi, klavyeyle gezinen bir kullanıcının Tab tuşuyla öğeler arasında dolaşırken, o an hangi öğede olduğunu net biçimde görebilmesini sağlar. Bu olmadan, klavye kullanıcısı sayfada "kaybolur"; hangi bağlantının veya butonun seçili olduğunu bilemez ve siteyi kullanamaz. Tarayıcılar varsayılan olarak bir odak göstergesi (genellikle öğe etrafında bir çerçeve) sunar; ancak yaygın bir hata, tasarımcıların bu varsayılan odak göstergesini "çirkin göründüğü" için CSS ile kaldırmasıdır. Bu, klavye erişilebilirliğini ciddi biçimde bozar. Doğru yaklaşım, odak göstergesini kaldırmak yerine, tasarıma uygun ama net ve belirgin bir odak göstergesi tasarlamaktır. İyi bir odak göstergesi, açıkça görünür olmalı (yeterli kontrast ve belirginlik), tüm etkileşimli öğelerde tutarlı çalışmalı ve öğenin seçili olduğunu net biçimde iletmelidir. Odak göstergesi, yalnızca fare kullanımında görünmeyip klavye kullanımında belirginleşecek biçimde de yapılandırılabilir (modern CSS ile), böylece fare kullanıcıları için görsel olarak temiz kalırken klavye kullanıcıları için erişilebilirlik sağlanır. Odak göstergesi, klavye navigasyonuyla birlikte çalışır; ikisi de klavye erişilebilirliğinin ayrılmaz parçalarıdır. Odak göstergesini test etmek, bir sayfayı yalnızca Tab tuşuyla gezip her adımda nerede olunduğunun net görünüp görünmediğini kontrol etmekle yapılır. Net bir odak göstergesi, klavye kullanan kullanıcılar için siteyi kullanılabilir kılan, sıklıkla ihmal edilen ama kritik bir erişilebilirlik öğesidir. Erişilebilir bir tasarım, odak göstergesini kaldırmaz, aksine onu tasarımla uyumlu ve belirgin biçimde sunar.
Gerçek örnek
Bir site, tasarım kaygısıyla varsayılan odak göstergesini CSS ile tamamen kaldırmıştı; klavye kullanan kullanıcılar sayfada nerede olduklarını göremiyor ve siteyi kullanamıyordu. Tasarıma uygun, net ve belirgin bir odak göstergesi eklendiğinde, klavye kullanıcıları öğeler arasında gezinirken nerede olduklarını görebildi ve site erişilebilir hale geldi.
Özet
Odak göstergesi, klavyeyle gezinen kullanıcının o an hangi öğede olduğunu gösteren görsel işarettir. Klavye erişilebilirliği için kritiktir; onsuz kullanıcı sayfada kaybolur. Varsayılan göstergeyi kaldırmak hatadır; tasarıma uygun ama net ve belirgin bir gösterge sunulmalıdır.