Bu kural ne anlama geliyor

WCAG 2.4.13, WCAG 2.2'de odak göstergelerinin boyut ve kontrastına yönelik belirli gereksinimleri tanimlayarak 2.4.7'nın (Görünür Odak) ötesine geçen yeni bir AAA kriteridir. Odak göstergesi, odaklanmamis bileşenin çevresindeki en az 2 CSS piksel kalinliginda bir çevre kadar büyük kontrast alana sahip olmalı ve odaklı ve odaksiz durumlar arasında en az 3:1 kontrast oranına sahip olmalıdır.

Pratik olarak bu, teknik olarak 2.4.7'yi geçen ince 1px noktali bir cizginin 2.4.13'u gecemeyecegi anlamına gelir. Odak göstergesi belirgin, yüksek kontrastlı ve odaksiz durumdan açıkça ayırt edilebilir olmalıdır. Amaç, odak göstergelerinin yalnızca teknik olarak mevcut değil gerçekten kullanılabilir olmasını sağlamaktır.

Neden önemlidir

Birçok web sitesinde teknik olarak "görünür" ancak pratik olarak görünmez bir odak göstergesi vardır — beyaz arka plan üzerinde ince açık gri bir çizgi veya zar zor algilanabilir bir renk değişimi. Bu göstergeler az gören kullanıcıları, parlak ortamlardaki kullanıcıları ve klavye odağını izlemek için net bir görsel ipucuna ihtiyaç duyan herkesi başarısız kılar.

Minimum boyut ve kontrast gereksinimleri tanimlayarak bu kriter odak göstergelerinin gerçekten faydalı olmasını sağlar. Saglam bir odak göstergesi herkes için — yalnızca engelli kullanıcılar değil aynı zamanda deneyimli kullanıcılar, yüksek DPI ekranlardaki kullanıcılar ve değişen aydınlatma kosullarindaki kullanıcılar — klavye gezinme deneyimini önemli ölçüde iyileştirir.

İlgili axe-core kuralları

2.4.13 için otomatik axe-core kuralı yoktur. Odak göstergeleri için boyut ve kontrast gereksinimleri manuel inceleme ve ölçüm gerektirir. WCAG 2.2 Focus Appearance yer imi gibi araçlar yardımcı olabilir.

Nasıl test edilir

Tüm etkileşimli öğeler arasında Tab ile gezinin ve her odak göstergesinin açıkça görünür olduğunu ve yeterli boyuta sahip olduğunu görsel olarak doğrulayın.
Odak göstergesi kalinligini ölçün — tüm çevre boyunca en az 2 CSS piksel genişliğinde olmalıdır.
Odak göstergesinin bitişik odaksiz renklere karşı en az 3:1 kontrasta sahip olduğunu doğrulamak için bir kontrast denetleyici kullanın.
Odakli ve odaksiz durumları karşılaştırın — değişikliğin en az 3:1 kontrast oranına sahip olması gerekir.

Farklı arka planlarda test edin — odak göstergesi hem açık hem de karanlık alanlara karşı görünür olmalıdır.
Odak göstergesinin yalnızca bir renk değişikliği olmadığını kontrol edin — bir şekil veya kenarlık değişikliği içermelidir.

Nasıl düzeltilir

Minimum boyut (2px çevre) ve kontrast (3:1) gereksinimlerini karşılayan odak göstergeleri tasarlayın.

Uyumlu odak göstergesi stilleri

/* 2.4.13'u karşılar: Yüksek kontrastlı 3px katı çizgi */
:focus-visible {
  outline: 3px solid #0051a8;
  outline-offset: 2px;
}

/* 2.4.13'u karşılar: Her arka plan için çift halka */
:focus-visible {
  outline: 3px solid #000000;
  outline-offset: 2px;
  box-shadow: 0 0 0 5px #ffffff;
}

/* 2.4.13'u karşılar: Kutu gölge yaklaşımı */
:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px #ffffff,
    0 0 0 4px #0051a8;
}

2.4.13'u geçemeyen odak göstergeleri

/* Başarısız: 1px minimum 2px çevrenin altında */
:focus-visible {
  outline: 1px solid #999999;
}

/* Başarısız: Yetersiz kontrast (beyaz üzerinde açık gri) */
:focus-visible {
  outline: 2px solid #cccccc;
}

/* Başarısız: Çevre göstergesi olmadan yalnızca renk değişikliği */
:focus-visible {
  background-color: #e0e0e0;
  outline: none;
}

Minimum odak alanını hesaplama

/*
 * 100px x 40px boyutunda bir düğme için minimum odak göstergesi alanı:
 * Çevre = 2 * (100 + 40) = 280px
 * 2px kalınlıkta minimum alan = 280 * 2 = 560 kare CSS pikseli
 *
 * Bu düğmenin etrafındaki 3px çizgi sağlar:
 * Alan = 2 * (106 + 46) * 3 = 912 kare CSS pikseli (kolayca geçer)
 *
 * Not: outline-offset dış boyutlara eklenir
 * outline: 3px ve outline-offset: 2px ile:
 * Dış boyutlar = (100+10) x (40+10) = 110 x 50
 * Odak alanı = 2 * (110 + 50) * 3 = 960 kare CSS pikseli
 */

Odak göstergelerini temalama

:root {
  --odak-renk: #0051a8;
  --odak-genişlik: 3px;
  --odak-ofset: 2px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --odak-renk: #6bb3ff;
  }
}

@media (forced-colors: active) {
  :root {
    --odak-renk: Highlight;
  }
}

:focus-visible {
  outline: var(--odak-genişlik) solid var(--odak-renk);
  outline-offset: var(--odak-ofset);
}

Sık yapılan hatalar

2 CSS pikselden ince odak çizgileri — 1px noktali veya kesikli çizgiler boyut gereksinimini karşılamaz.
Düşük kontrastlı odak göstergeleri — beyaz arka plan üzerinde açık mavi çizgi 3:1 kontrasta ulasmaabilir.
Çevre değişikliği olmadan yalnızca arka plan renk değişikliğine odak göstergesi olarak güvenmek.
Açık arka planlarda çalışan ancak karanlık arka planlarda başarısız olan (veya tam tersi) odak göstergeleri.
Yüksek kontrast modunda (Windows Yüksek Kontrast / forced-colors) odak görünümünü test etmemek.
Bilesenin kenarlık rengiyle eşleşen çizgi renkleri kullanmak, odak durumunu ayırt edilemez kılmak.

2.4.13 Odak Görünümü