Bu kural ne anlama geliyor

WCAG 2.4.12, 2.4.11'in (Odak Gizlenmemiş — Minimum) geliştirilmiş versiyonudur. 2.4.11 odaklanan öğelerin tamamen gizlenmemesini gerektirirken, bu AAA kriteri odaklanan bileşenin hiçbir kısmının yazar tarafından oluşturulan içerik tarafından gizlenmemesini gerektirir. Odak göstergesi dahil tüm odaklanan öğe tamamen görünür olmalıdır.

Bu, klavye kullanıcılarının odaklanan öğe hakkında tam görsel geri bildirim almasını sağlayan daha sıkı bir gerekliliktir. Yapısal başlığın odaklanan bir öğenin üst kenarını kaplayan kısmı obscuring gibi — bu kriteri başarısız kılar.

Neden önemlidir

Odaklanan bir öğenin kısmı gizlendiğinde kullanıcılar etkileştikleri şeyin tam içeriğini göremeyebilir. Kısmen gizlenmiş bir düğme etiketi yanlış okunabilir, kısmen gizli bir form alanı bir değer içerdiğinde boş görünebilir ve kesilmiş bir odak göstergesi hiç odak göstergesi olmadığı ile karıştırılabilir.

Ekran büyütme kullanan az gören kullanıcılar için küçük bir miktar gizleme bile bir öğeyi kullanabilme ile kullanamama arasındaki farkı yaratabilir. Tam görünürlük tüm kullanıcıların odaklanan bileşen hakkında eksiksiz görsel bilgi almasını sağlar.

İlgili axe-core kuralları

2.4.12 için otomatik axe-core kuralı yoktur. Bu kriter çeşitli görüntüalanı boyutlarında klavye gezinmesiyle kapsamlı manuel test gerektirir.

Nasıl test edilir

Tab kullanarak sayfanın tamamında gezinin ve her odaklanan öğenin tamamen görünür olduğunu, hiçbir kısmının yapışan veya sabit içerik tarafından kaplanmadığını kontrol edin.
Birden fazla görüntüalanı boyutunda test edin — mobil, tablet ve masaüstü.
Odak göstergesinin (çizgi, halka vb.) kendisinin üst öğelerdeki overflow:hidden tarafından kesilmediğini veya gizlenmediğini kontrol edin.
Tüm katmanları (çerez afişleri, sohbet bileşenleri, bildirimler) tetikleyin ve tam sekme döngüsünü yeniden test edin.

Kaydırma dolgulama değerlerinin tüm öğeyi ve odak göstergesini görünür tutmak için yeterli olduğunu doğrulayın.
Kaydırılan kapsayıcıların kenarlarındaki öğeleri kesilmiş odak göstergeleri açısından kontrol edin.

Nasıl düzeltilir

2.4.11'deki teknikleri temel alın ve odaklanan öğelerin hiçbir kısmının gizlenmediğinden emin olun.

Cömert kaydırma dolgulama

/* Kaydırma doldurmasında odak göstergesi boyutunu hesaba kat */
html {
  /* Başlık (80px) + odak çizgisi (3px) + ofset (3px) + güvenlik marjı (8px) */
  scroll-padding-top: 94px;
  scroll-padding-bottom: 74px; /* Alt bilgi (60px) + odak halkası alanı */
}

Odak göstergelerinin tasinma kirilmasini onle

/* Yanlış: overflow hidden odak cizgilerini kırpar */
.kart-kapsayıcı {
  overflow: hidden;
}

/* Doğru: overflow visible odak cizgilerini korur */
.kart-kapsayıcı {
  overflow: visible;
}

/* Overflow hidden gerekliyse odağı iceri al */
.kart-kapsayıcı {
  overflow: hidden;
}
.kart-kapsayıcı *:focus-visible {
  outline-offset: -3px; /* Ic çizgi sinirlarin içinde kalır */
}

Yapısal öğelerin yeterli boşluğa sahip olmasını sağlama

// Her düzen değişikliğinden sonra odaklanan öğe gorunurlugunu doğrula
function odakGorunurluguDogrula() {
  const odaklı = document.activeElement;
  if (!odaklı || odaklı === document.body) return;

  const rect = odaklı.getBoundingClientRect();
  const yapisanOgeler = document.querySelectorAll(
    '[style*="position: sticky"], [style*="position: fixed"]'
  );

  for (const yapışan of yapisanOgeler) {
    const yapisanRect = yapışan.getBoundingClientRect();
    const ustUste =
      rect.top < yapisanRect.bottom &&
      rect.bottom > yapisanRect.top &&
      rect.left < yapisanRect.right &&
      rect.right > yapisanRect.left;

    if (ustUste) {
      odaklı.scrollIntoView({ block: 'center', behavior: 'smooth' });
      break;
    }
  }
}

Sık yapılan hatalar

Yapısal öğeyi hesaba katan ancak odak göstergesinin ekstra piksellerini hesaba katmayan kaydırma dolgulama değerleri.
Kapsayıcı sınırının ötesine uzanan odak cizgilerini kirpan overflow:hidden'li üst kapsayıcılar.
Yuksekligi değişen yapışan öğeler (örneğin kaydirmada genislenen gezinme) ile kaydırma dolgulama guncellenmiyor.
Odaklanan öğelerin bulunabilecegi sağ alt alayla ustuste binen sohbet bileşenleri veya FAB düğmeleri.
Sekme sırasındaki sonraki odaklanabilir öğenin üstünde görünen satır içi açılır pencere veya ipucu öğeleri.

2.4.12 Odak Gizlenmemiş (Gelişmiş)