Bu kural ne anlama geliyor

WCAG 2.4.11, WCAG 2.2'de tanitilan ve modern web kalıplarını ele alan yeni bir kriterdir: yapışan başlıklar, alt bilgiler, çerez afişleri ve odaklanmış öğeleri ortur katmanlar. Bir bileşen klavye odağını aldığında, en az bir kısmı görünür kalmalıdır — sayfa yazari tarafından oluşturulan içerik tarafından tamamen gizlenmemelidir.

Bu minimum gerekliliktir — odaklanan bileşenin en az bir kısmı görünür olmalıdır. Geliştirilmiş versiyon (2.4.12) odaklanan bileşenin tamamen görünür olmasını gerektirir. Bu kriterin yalnızca yazar tarafından kontrol edilen içeriklere uygulandığını, tarayıcı araç çubukları gibi kullanıcı araçısı ozelliklerine uygulanmadigini unutmayin.

Neden önemlidir

Yapısal başlıklar, sabit konumlu çerez afişleri ve sohbet bileşenleri modern web sitelerinde her yerdedir. Bir klavye kullanıcısı bu yapışan öğelerin arkasında konumlanmis bir öğeye sekme ile ulastiginda ne ile etkilestigini göremez. Bu, bir formu doldururken formun bir kısmını kaplayan bir kagit parçası olmasina esdeğerdir — sınır bozucu ve hataya açık.

Bu sorun klavye kullanıcılarını orantisiz şekilde etkiler çünkü fare kullanıcıları gizlenmiş öğeleri ortaya çıkarmak için kaydirabililir, ancak klavye odağı gorunurlugunun sağlanması için sayfayı otomatik olarak kaydirmaz. Motor engelli, az gören ve bilişsel engelli kullanıcılar özellikle etkilenir.

İlgili axe-core kuralları

2.4.11 için şu anda otomatik axe-core kuralı yoktur. Bu kriter klavye gezinmesiyle manuel test gerektirir.

Nasıl test edilir

Tab kullanarak sayfanın tamamında gezinin. Her odaklanan öğede yapışan veya sabit konumlu içeriğin onu kapsayip kaplamadigini kontrol edin.
Yapısal başlıkların ve alt bilgilerin göründüğü goruntuaaninin üstüne ve altına yakın öğelere özellikle dikkat edin.
Çerez afislerini, sohbet bileşenlerini ve bildirim cubuklarini tetikleyin, ardından gizlenmiş odak için sayfada sekme ile gezinin.
Tarayıcı penceresini daha küçük bir boyuta yeniden boyutlandirin ve testi tekrarlayin — gizlenmiş odak daha küçük goruntuaalanlarinda daha olası.

Odak kaydirilmasina neden olduğunda yapışan öğeleri hesaba katmak için scroll-padding veya scroll-margin kullanidigini kontrol edin.

Nasıl düzeltilir

Yapısal öğelerin odaklanan içerikleri gizlemesini önlemek için CSS scroll-padding kullanın ve katmanlarin etkileşimli öğeleri engellememesini sağlayın.

Yapısal başlıklar için kaydırma dolgulama

/* Yapısal başlığın odaklanan öğeleri kaplamasini onle */
html {
  scroll-padding-top: 80px; /* Yapısal başlık yüksekliği */
}

/* Yapısal alt bilginiz de varsa */
html {
  scroll-padding-top: 80px;
  scroll-padding-bottom: 60px;
}

/* Yapısal başlık stilleri */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: 80px;
}

Odagi gizlemeyen çerez afişi

<!-- Katman yerine içeriği yukarı iten çerez afişi -->
<div class="çerez-afişi" role="dialog" aria-label="Çerez onay">
  <p>Deneyiminizi iyileştirmek için cerezler kullaniyoruz.</p>
  <div>
    <button>Tumunu kabul et</button>
    <button>Zorunlu olmayanlari reddet</button>
    <a href="/gizlilik">Çerez politikasi</a>
  </div>
</div>

<style>
.çerez-afişi {
  position: sticky;
  bottom: 0;
  z-index: 100;
  padding: 1rem;
  background: #1a1a2e;
  color: #fff;
}

/* Afis görünür iken kaydırma doldurmasini ayarla */
html:has(.çerez-afişi) {
  scroll-padding-bottom: 80px;
}
</style>

JavaScript: odaklanan öğeyi görünür alana kaydır

// Odaklanan öğelerin yapışan öğeler tarafından gizlenmediğinden emin ol
function odakGorunurKil() {
  document.addEventListener('focusin', (e) => {
    const başlık = document.querySelector('.site-header');
    const altBilgi = document.querySelector('.çerez-afişi');
    const rect = e.target.getBoundingClientRect();
    const baslikYuk = başlık?.getBoundingClientRect().height || 0;
    const altBilgiYuk = altBilgi?.getBoundingClientRect().height || 0;

    if (rect.top < baslikYuk || rect.bottom > window.innerHeight - altBilgiYuk) {
      e.target.scrollIntoView({ block: 'center', behavior: 'smooth' });
    }
  });
}
odakGorunurKil();

Sık yapılan hatalar

Kullanıcılar sayfada sekme ile gezindiginde odaklanan öğeleri ortur yapışan başlıklar.
Alt bilgi bağlantıları ve form alanlarını gizleyen goruntuaalaninin altına sabitlenmiş çerez onay afişleri.
Sag alt kosedeki etkileşimli ogelerle ustuste binen sohbet bileşen balonları.
Kayarak gelen ve o anda odaklanan öğeyi ortur bildirim afişleri.
scrollIntoView veya çapa bağlantıları kullanilirken yapışan öğelerin hesaba katilmamasi.
Odagi yakalamadan sayfayı kısmen ortur modsuz katmanlar.

2.4.11 Odak Gizlenmemiş (Minimum)