Görünür Odak: Anahattı Asla Gizlemeyin

Bir klavye kullanıcısı aynı anda yalnızca bir şeyi görebilir: hangi denetimin odakta olduğunu. Bu görünür işaretçiye odak göstergesi denir. 👀

Tarayıcı, varsayılan olarak Tab ile ilerlerken etkin öğenin çevresine bir odak çerçevesi çizer. Bu, yerleşik “buradasınız” işaretçinizdir.

Tasarımcılar çoğu zaman çerçeveyi sevmez ve siler. Çerçeve yok kuralı, klavye kullanıcılarını anında görme yetisinden mahrum bırakır. Lütfen bunu tek başına hiçbir zaman yayımlamayın.

Varsayılan çerçeveyi kaldırabilirsiniz; ancak yalnızca açık bir alternatif ekliyorsanız. Odaktaki bir denetimi, etkin olmayan bir denetimle tamamen aynı görünecek şekilde bırakmayın.

İyi bir gösterge kolayca fark edilir: kalın bir çerçeve, bir halka veya belirgin bir renk değişimi. Burada düşmanınız belirsizliktir, yardımcınız değil.

focus-visible seçicisi, halkayı klavye kullanıcılarına gösterir; sıradan fare tıklamalarında ise gizler. Böylece görsel karmaşa olmadan güvenlik sağlarsınız.

Arka planla birleşen bir çerçeve kimseye yardımcı olmaz. Odak stilinizin sayfadan ayrılacak kadar kontrastı olmalıdır.

Bir üst öğedeki taşma gizli ayarına dikkat edin. Bu ayar odak çerçevesini kırparak alt kenarın sessizce kaybolmasına neden olabilir.

Halkayı öğeden uzaklaştırmak için outline-offset kullanın. Küçük bir boşluk, göstergenin fark edilmesini çok kolaylaştırır.

Bu yalnızca görsel bir cilalama değildir. WCAG, her etkileşimli öğede görünür bir odak göstergesi ister; bu nedenle göstergeyi gizlemek uygunluk başarısızlığına yol açabilir.

En hızlı test ücretsizdir: sayfanızda Tab ile ilerleyin. Odağın izini kaybederseniz göstergenizin geliştirilmesi gerekir.

Yerine başka bir gösterge koymadan odak halkasını hiçbir zaman kaldırmayın. focus-visible kullanmayı, güçlü kontrast ve boşluk vermeyi, ardından kendiniz Tab testi yapmayı tercih edin. ✅