Bu kural ne anlama geliyor

WCAG 2.4.1, sayfaların tekrarlanan içerik bloklarını — gezinme menüleri, başlıklar ve kenar çubuklar gibi — atlayıp doğrudan ana içeriklere gitmek için bir yöntem sunmasını gerektirir. Bu en yaygın olarak "gezinmeyi atla" bağlantıları ve ARIA alan işaretleri (landmark) ile sağlanır.

Klavye kullanıcıları ve ekran okuyucu kullanıcıları sayfalarda sıralı olarak gezinir. Bir atlama mekanizması olmadan, her sayfa yüklemesinde benzersiz içeriklere ulasmadan önce duzinelerce veya yuzlerce tekrarlanan bağlantı üzerinden sekme tuşuyla ilerlemek zorunda kalirlar.

Neden önemlidir

Bir web sitesinde her yeni sayfayı açtığınızda tüm restoran menüsünün size yüksek sesle okunmasını hayal edin. Atlama bağlantıları olmayan bir sitede ekran okuyucu kullanan kişinin deneyimi tam olarak budur. Yalnızca klavye ile gezinen motor engelli kullanıcılar için ana içeriklere ulaşmak üzere 50'den fazla gezinme bağlantısını sekme ile geçmek fiziksel olarak yorucu ve zaman alıcıdır.

Atlama mekanizmaları, klavye ve yardımcı teknoloji kullanıcıları için verimli gezinmeyi önemli ölçüde arttırır. Ayrıca klavye gezinmesini tercih eden deneyimli kullanıcılar ile anahtar kontroller ve ufle-ve-em (sip-and-puff) sistemleri gibi alternatif giriş aygitlari kullananlar için de fayda sağlar.

İlgili axe-core kuralları

bypass — Her sayfanın gezinmeyi atlayıp ana içeriklere geçmek için en az bir mekanizmaya sahip olmasını doğrular.
skip-link — Atlama bağlantısının sayfada var olan ve odaklanabilir bir öğeyi hedefledigini doğrular.
frame-title — <iframe> ve <frame> öğelerinin erişilebilir bir title niteliği olmasını doğrular.
frame-title-unique — <iframe> ve <frame> öğelerinin benzersiz title değerlerine sahip olmasını doğrular.

Nasıl test edilir

Sayfayı yükleyin ve Tab tuşuna basın. Odaklanabilen ilk öğe görünür bir "Ana içeriklere atla" bağlantısı olmalıdır.
Enter tuşuna basarak atlama bağlantısını etkinleştirin ve odağın ana içerik alanına taşındığını doğrulayın.
axe-core çalıştırın ve bypass, skip-link, frame-title ve frame-title-unique ihlallerini kontrol edin.
ARIA alan işaretlerinin (banner, navigation, main, contentinfo) mevcut ve doğru kullanıldığını doğrulayın.
Tüm iframe öğelerinin açıklayıcı title niteliklerine sahip olup olmadığını kontrol edin.

Bir ekran okuyucu kullanarak alan işaretlerinin duyurulduğunu ve hızlı gezinmeye olanak tanıdığını onaylayın.

Nasıl düzeltilir

En güvenilir yaklaşım, bir atlama gezinme bağlantısını uygun ARIA alan işaretleriyle birleştirmektir.

Atlama bağlantısı — HTML kalıbı

<!-- Atlama bağlantısı <body> içindeki ilk öğe olarak -->
<body>
  <a href="#ana-içerik" class="atlama-bağlantısı">
    Ana içeriklere atla
  </a>

  <header role="banner">
    <nav role="navigation" aria-label="Ana gezinme">
      <!-- Gezinme bağlantıları -->
    </nav>
  </header>

  <main id="ana-içerik" role="main" tabindex="-1">
    <h1>Sayfa Başlığı</h1>
    <!-- Benzersiz sayfa içeriği -->
  </main>

  <footer role="contentinfo">
    <!-- Alt bilgi içeriği -->
  </footer>
</body>

Atlama bağlantısı — CSS

.atlama-bağlantısı {
  position: absolute;
  top: -100%;
  left: 0;
  z-index: 1000;
  padding: 0.75rem 1.5rem;
  background: #1a1a2e;
  color: #ffffff;
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 4px 0;
}

.atlama-bağlantısı:focus {
  top: 0;
  outline: 3px solid #4a90d9;
  outline-offset: 2px;
}

JavaScript ile odak yönetimi

// Atlama bağlantısı hedefinin güvenilir şekilde odaklanmasını sağlama
const atlamaLink = document.querySelector('.atlama-bağlantısı');
atlamaLink.addEventListener('click', (e) => {
  e.preventDefault();
  const hedef = document.querySelector(e.target.getAttribute('href'));
  if (hedef) {
    hedef.setAttribute('tabindex', '-1');
    hedef.focus();
    hedef.addEventListener('blur', () => {
      hedef.removeAttribute('tabindex');
    }, { önce: true });
  }
});

Iframe başlıkları

<!-- Yanlış: title olmadan iframe -->
<iframe src="https://maps.example.com/embed"></iframe>

<!-- Doğru: açıklayıcı title ile iframe -->
<iframe src="https://maps.example.com/embed" title="Ofis konum haritası"></iframe>

Sık yapılan hatalar

Atlama bağlantısı DOM'da var ancak display:none veya visibility:hidden ile kalıcı olarak gizlenmiş, bu da klavye ile erişimi imkansız kılar.
Atlama bağlantısı sayfada bulunmayan bir id'ye işaret ediyor, dolayısıyla etkinleştirildiğinde hiçbir şey olmuyor.
Atlama bağlantısının hedef öğesi odaklanabilir değil — bazı tarayıcılarda main öğesinin tabindex="-1" olması gerekir.
Atlama bağlantısı olmadan yalnızca ARIA alan işaretleri kullanmak — eski yardımcı teknolojiler alan işaretleri gezinmesini desteklemeyebilir.
Birden fazla iframe'in aynı veya eksik title nitelikleri olması, ekran okuyucu kullanıcıları için bunları ayırt edilemez kılar.
Atlama bağlantısını gezinmenin öncesine değil sonrasına yerleştirmek, amacını ortadan kaldırır.

2.4.1 Blokları Atlama