Ana içeriğe geç

2.4.13 Odak Görünümü

Klavye odak göstergesi; kolayca algılanabilmesi için asgari boyut ve kontrast gereksinimlerini karşılamalıdır.

SC Kodu: 2.4.13 Seviye: AAA
URL: https://www.w3.org/TR/WCAG22/#focus-appearance

Genel Tanım​

WCAG 2.4.13, klavye ile gezinen kullanıcılar için odak göstergesinin yalnızca görünür olmasını değil, aynı zamanda belirli bir boyut ve kontrast gereksinimini karşılamasını zorunlu kılar.

Bu kriter, 2.4.7 (Focus Visible) ve 2.4.11–12 kriterlerinin daha gelişmiş bir versiyonudur.

Faydalar​

  • **Yüksek Görünürlük: Odak konumu kolayca fark edilir.
  • **Daha Az Hata: Yanlış seçim riski azalır.
  • **Erişilebilirlik: Düşük görme seviyesine sahip kullanıcılar için destek sağlar.

Kapsam

  • Form alanları
  • Butonlar
  • Menü bağlantıları
  • Kartlar ve etkileşimli bileşenler
  • Tüm klavye ile odaklanabilir öğeler

Ana Amaç​

Bu kriterin temel amacı, özellikle az gören kullanıcıların, ekran büyütme kullananların ve klavye kullanıcılarının odaklanan öğeyi kolayca fark edebilmesini sağlamaktır.

Gereksinimler

Odak göstergesi:

  • En az 2 CSS piksel kalınlığında görünür bir alan oluşturmalıdır
  • En az 3:1 kontrast oranına sahip olmalıdır
  • Varsayılan (odaksız) duruma göre görsel olarak belirgin bir değişiklik oluşturmalıdır

En İyi Uygulamalar​

  • :focus-visible kullanın.
  • İnce ve soluk outline’lardan kaçının.
  • Yüksek kontrastlı kenarlık veya arka plan değişimi uygulayın.
  • Tasarım sistemi içinde standart bir odak stili belirleyin.

Örnekler ve Açıklamalar​

Örnek: Örnek Uygulama​

HTML/CSS

:focus-visible {
  outline: 3px solid #000;
  outline-offset: 2px;
}

Bu örnekte:

  • 3px kalınlık sağlanmıştır
  • Yüksek kontrast mevcuttur
  • Varsayılan durumdan belirgin şekilde farklıdır

Bu uygulama WCAG 2.4.13 kriterini karşılar.

Nelerden Kaçınılmalı?

HTML/CSS

:focus {
  outline: 1px dotted #ccc;
}

Açıklama:

Bu odak göstergesi çok ince ve düşük kontrastlıdır. 3:1 kontrast ve minimum alan gereksinimini karşılamaz. WCAG 2.4.13 kriterini karşılamaz.

Alternatif Güçlü Odak Örneği

HTML/CSS

:focus-visible {
  box-shadow: 0 0 0 4px #005fcc;
}

Bu kullanım daha geniş ve dikkat çekici bir odak alanı oluşturur ve erişilebilirlik açısından güçlü bir çözümdür.