Ana içeriğe geç

2.4.12 Odak Gizlenmemeli (Geliştirilmiş)

Bir öğe klavye odağı aldığında, hiçbir kısmı başka içerikler tarafından gizlenmemelidir; tam görünürlük sağlanmalıdır.

SC Kodu: 2.4.12 Seviye: AAA
URL: https://www.w3.org/TR/WCAG22/#focus-not-obscured-enhanced

Genel Tanım​

WCAG 2.4.12, klavye ile gezinen kullanıcılar için odaklanan (focus alan) bileşenin hiçbir şekilde gizlenmemesini gerektirir. Odak göstergesi ve odaklanan öğe, sayfa üzerindeki diğer içerikler tarafından kısmen veya tamamen kapatılmamalıdır. Bu kriter, 2.4.11’in (Minimum) daha sıkı versiyonudur ve AAA seviyesindedir.

Faydalar​

  • Klavye Erişilebilirliği: Kullanıcı nerede olduğunu kaybetmez.
  • Hata Azaltma: Yanlış öğe seçimi riski düşer.
  • Görsel Netlik: Ekran büyütme kullanan kullanıcılar için güvenli deneyim sağlar.

Kapsam

  • Form alanları
  • Butonlar
  • Menü öğeleri
  • Modal içeriği
  • Sticky header bulunan sayfalar

Ana Amaç​

Bu kriterin temel amacı, özellikle klavye kullanıcılarının, motor engelli bireylerin ve ekran büyütme yazılımı kullanan kişilerin odak konumunu net şekilde görebilmesini sağlamaktır.

Gereksinimler

  • Odaklanan öğe tamamen görünür olmalıdır
  • Sabit (fixed) başlıklar, popup’lar veya sticky menüler odak öğesini kapatmamalıdır
  • Scroll işlemi sırasında odaklanan öğe görünür kalmalıdır

En İyi Uygulamalar​

  • Sticky header yüksekliğini hesaba katarak scroll ayarlayın.
  • scroll-margin-top kullanın.
  • Modal ve popup’larda doğru odak yönetimi uygulayın.
  • Odak göstergesini CSS ile kaldırmayın (outline: none kullanmayın).

Örnekler ve Açıklamalar​

Örnek: Örnek Uygulama​

HTML/CSS

:focus {
  outline: 3px solid #005fcc;
  outline-offset: 2px;
}
section {
  scroll-margin-top: 80px;
}

Bu kullanımda odak hem görünürdür hem de sabit üst menü tarafından kapatılmaz.

Nelerden Kaçınılmalı?

HTML/CSS

:focus {
  outline: none;
}
veya
header {
  position: fixed;
  top: 0;
  height: 100px;
}

Açıklama:

Odak göstergesinin kaldırılması veya sabit başlığın odaklanan öğeyi kapatması, kullanıcının konumunu görmesini engeller. Bu durum WCAG 2.4.12 kriterini karşılamaz.