Odak göstergesi, klavyeyle gezinen kullanıcıya o anda hangi öğenin etkin olduğunu gösteren görsel işarettir; tarayıcılar bunu varsayılan olarak bir odak çerçevesi (outline) ile sağlar. WCAG 2.4.7 Focus Visible kriteri (AA seviyesi), klavye odağının görünür olmasını şart koşar. CSS'te outline: none ile göstergeyi tümüyle kaldırmak yaygın bir erişilebilirlik hatasıdır.
Fare kullanan bir kullanıcı imlecin nerede olduğunu her an görür; klavye kullanıcısının tek referansı ise odak göstergesidir. Tab tuşuyla ilerlerken hangi linkin, butonun veya form alanının etkin olduğu görünmüyorsa sayfa fiilen kullanılamaz hâle gelir. Bu, motor becerileri nedeniyle fare kullanamayan kişileri, ekran büyütücü kullanıcılarını ve klavyeyi tercih eden güçlü kullanıcıları birlikte etkiler. WCAG 2.4.7 Focus Visible kriteri (AA seviyesi) tam bu nedenle, klavyeyle çalıştırılabilir her arayüzde odağın görünür olmasını şart koşar.
En yaygın hata, varsayılan odak çerçevesini estetik bulmayıp CSS'te outline: none ile kaldırmak ve yerine hiçbir şey koymamaktır. Doğru yaklaşım göstergeyi silmek değil tasarıma uydurmaktır: marka renkleriyle uyumlu, zeminden net ayrışan, yeterli kalınlıkta bir odak stili tanımlayın; outline-offset ile öğeden hafif ayırmak okunurluğu artırır. CSS'in :focus-visible seçicisi işi kolaylaştırır: gösterge yalnızca klavyeyle gezinen kullanıcıya gösterilir, fare tıklamasında görünmez. WCAG 2.2 de odağın görünümü ve başka öğelerce örtülmemesiyle ilgili yeni kriterler ekleyerek bu konunun ağırlığını artırmıştır.
Test için araç gerekmez: sayfayı açın, fareyi bırakın ve yalnızca Tab ile ilerleyin. Her adımda nerede olduğunuzu görebiliyor musunuz? Yapışkan başlık veya sabit banner gibi katmanların odaklanan öğeyi örtmediğinden emin olun. Otomatik tarayıcılar outline kaldırılmış öğeleri işaretleyebilir, ancak göstergenin gerçekten fark edilir olup olmadığına karar vermenin en güvenilir yolu bu basit klavye turudur.
Sık sorulan sorular
outline: none kullanmak neden sorunlu?
Çünkü klavye kullanıcısının sayfadaki tek yön bulma aracını kaldırır: odak çerçevesi silinince Tab ile gezen kişi nerede olduğunu göremez ve sayfa fiilen kullanılamaz hâle gelir. Bu, WCAG 2.4.7 Focus Visible kriterinin ihlaline yol açar. Varsayılan çerçeve tasarıma uymuyorsa çözüm silmek değil değiştirmektir: markanıza uygun, yüksek kontrastlı özel bir odak stili tanımlayın ve :focus-visible ile yalnızca klavye kullanımında gösterin.
Odak göstergesi nasıl özelleştirilir?
CSS'te :focus-visible seçicisine outline özelliğiyle kalınlık, stil ve renk tanımlayın; outline-offset ile çerçeveyi öğeden bir iki piksel ayırmak görünürlüğü artırır. Renk, hem açık hem koyu zeminlerde net ayrışmalı; ince veya soluk bir çizgi kâğıt üzerinde şık dursa da ekranda kaybolur. Değişikliği yalnızca Tab ile gezerek her etkileşimli öğede test edin; buton, link, form alanı ve özel bileşenlerin tamamı kapsanmalıdır.
Bu içerik bilgilendirme amaçlıdır ve hukuki görüş niteliği taşımaz.