Bu kural ne anlama geliyor

WCAG 2.4.7, kullanıcılar klavye ile gezindiginde o anda odaklanmış olan öğenin görünür bir odak göstergesine sahip olmasını gerektirir. Bu genellikle hangi öğenin klavye odagina sahip olduğunu açıkça gösteren görünür bir çizgi, kenarlık değişikliği veya vurgudur. Bu görsel ipucu olmadan klavye kullanıcıları kör geziniyordur.

Odak göstergesi tüm durumlarda görünür olmalıdır — yalnızca bazı ogelerde veya bazı sayfalarda değil. Bağlantılar, düğmeler, form alanları, özel bileşenler ve odaklanabilir diğer tüm öğeler için geçerlidir. Varsayılan tarayıcı odak çizgisi bu gereksinimi karşılar ancak birçok site bunu bir yedek sağlamadan kaldırır.

Neden önemlidir

Klavye kullanıcıları odak göstergesine, fare kullanıcılarının imlece güvendiği gibi güvenilir. Görünür bir odak göstergesi olmadan Tab tuşuna basmak bir tahmin oyununa dönüşür — kullanıcılar hangi öğenin seçili olduğunu bilemez, Enter tuşuna bastiklarinda ne olacagini tahmin edemez ve sayfada verimli gezinme yapamaz. Bu, web sitelerini yalnızca klavye kullanan kişiler için fiilen kullanılamaz hale getirir.

Görünür odak, motor engelli, az gören ve bilişsel engelli kullanıcılar için kritik öneme sahiptir. Hiz ve verimlilik için klavye gezinmesini tercih eden deneyimli kullanıcılar için de önemlidir. Odak cizgisini yedek sağlamadan kaldırmak, webdeki en yaygın ve en etkili erişilebilirlik hatalarından biridir.

İlgili axe-core kuralları

focus-visible — Etkileşimli öğelerin klavye ile odaklanildiginda görünür bir odak göstergesine sahip olup olmadığını kontrol eder.

Nasıl test edilir

Farenizi bağlantısını kesin ve sayfanın tamamında yalnızca Tab ve Shift+Tab tuşlarıyla gezinin.
Her etkileşimli öğenin (bağlantılar, düğmeler, girdiler, seçiciler, özel bileşenler) odak aldığında açıkça görünür bir odak göstergesi gösterdiğini doğrulayın.
Odak göstergesinin arka planına karşı yeterli kontrasta sahip olup olmadığını kontrol edin — en az 3:1 kontrast oranı.
Farklı tarayıcılarda test edin çünkü odak stilleri değişebilir.

Kod tabanında outline: none, outline: 0 veya *:focus { outline: none } gibi CSS kurallarını arayın — bunlar uyarı işaretleridir.
Özel odak stillerinin varsayılan tarayıcı çizgisi kadar görünür olduğundan emin olun.

Nasıl düzeltilir

Varsayılan odak cizgisini görünür bir alternatif sağlamadan asla kaldirmayin. Odak göstergelerini yalnızca klavye gezinmesi için göstermek için :focus-visible sahte sinifini kullanın.

Odak çizgisi CSS — en iyi uygulamalar

/* Yedek olmadan ASLA bunu yapmayın */
*:focus {
  outline: none; /* TUM kullanıcılar için odak göstergesini kaldırır */
}

/* Doğru: Yalnızca klavye kullanıcıları için özel odak stili */
:focus-visible {
  outline: 3px solid #4a90d9;
  outline-offset: 2px;
}

/* Doğru: Fare tiklari için çizgiyi gizle, klavye için göster */
:focus:not(:focus-visible) {
  outline: none;
}

/* Doğru: Yüksek kontrastlı odak halkası */
:focus-visible {
  outline: 3px solid #005fcc;
  outline-offset: 3px;
  border-radius: 2px;
}

Karanlık ve açık temalar için odak stilleri

/* Açık tema odağı */
:focus-visible {
  outline: 3px solid #0051a8;
  outline-offset: 2px;
}

/* Karanlık tema odağı */
@media (prefers-color-scheme: dark) {
  :focus-visible {
    outline: 3px solid #6bb3ff;
    outline-offset: 2px;
  }
}

/* Her arka plan için çift halka tekniği */
:focus-visible {
  outline: 3px solid #ffffff;
  box-shadow: 0 0 0 6px #000000;
}

Özel bilesenlerde odak göstergesi

<!-- Odaklanabilir özel kart -->
<div role="button" tabindex="0" class="kart">
  <h3>Denetim Raporu</h3>
  <p>En son erişilebilirlik denetim sonuclarinizi görüntüleyin</p>
</div>

<style>
.kart:focus-visible {
  outline: 3px solid #4a90d9;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(74, 144, 217, 0.3);
}
</style>

Sık yapılan hatalar

Herhangi bir alternatif odak göstergesi sağlamadan outline: none veya outline: 0 kullanmak.
Yetersiz kontrasta sahip bir odak göstergesi sağlamak — bitişik renklere karşı en az 3:1 kontrast olmalıdır.
Odak göstergesi olarak yalnızca renk değişikliği kullanmak — renk körlüğü olan kullanıcılar için renk tek görsel ayrimi olamaz.
Hiçbir odak stili olmayan özel bileşenler (role="button" ile div'ler, özel açılır menular).
Çok ince odak göstergeleri — 1px noktali çizgi özellikle az gören kullanıcılar için yeterince görünür olmayabilir.
Odak cizgilerini "tasarımcı istedi diye" kaldırmak — erişilebilirlik işlevsel bir gerekliliktir, isteğe bağlı stil değildir.

2.4.7 Görünür Odak