Blokları Atlama

Kısaca

Çoğu sitede her sayfa aynı logo, arama kutusu ve gezinme menüsüyle başlar. Gören ve fare kullanan biri bunu bir bakışta geçer. Klavye kullanıcısı içeriğe ulaşmadan önce her sayfada her bağlantıya Tab ile basmak, ekran okuyucu kullanıcısı ise hepsini yeniden dinlemek zorundadır.

Bu kriter, birden çok web sayfasında tekrarlanan içerik bloklarını atlamak için bir mekanizma bulunmasını ister. Olağan mekanizma, sayfanın başındaki "ana içeriğe geç" bağlantısıdır; ama insanların arasında atlayabildiği ana hatlar (landmark) ve başlıklar da sayılır.

Neleri kapsar?

• Tekrarlanan blok nedir: Aynı sitenin birkaç sayfasında görünen gezinme menüleri, üst bilgi içeriği ve reklam çerçeveleri. Tek tek tekrarlanan sözcükler, ifadeler ya da bağlantılar blok sayılmaz.
• Atlama bağlantıları: Sayfanın başında doğrudan ana içeriğe giden bir bağlantı (G1 tekniği) ya da sayfanın her ana bölümüne giden bağlantılar (G124).
• Ana hatlar: ARIA landmark bölgeleri ya da header, nav, main ve footer gibi HTML bölümleme öğeleri, yardımcı teknoloji kullanıcılarının bölgeler arasında atlamasını sağlar (ARIA11).
• Başlıklar: Her bölümün başındaki başlıklar, kullanıcıların sayfada gezinmesini sağlar (H69).
• Kapsam: Ortak bir amacı olan ve aynı yazar ya da kuruluştan gelen ilişkili sayfa kümeleri için geçerlidir; ilgisiz sayfalar için değil.
• Tarayıcı yardımı: Gereksiz yinelenen mekanizmalar gerekmez. Kullanıcı aracı ana içeriğe ulaşmanın bir yolunu zaten sunuyorsa atlama bağlantısı gereksiz olabilir, ama buna güvenmeyin.
• Kapsam dışı notlar: Sayfadaki yapısal işaretleme 1.3.1'dir. Bir sayfayı bulmanın birden çok yolu 2.4.5'tir. Odağın sonra nereye gideceği 2.4.3'tür.

Kimleri etkiler?

İçeriğe ulaşmak için her sayfada onlarca bağlantıya Tab ile basmak zorunda kalacak yalnızca klavye ve anahtar kullanıcıları. Aynı gezinmeyi tekrar tekrar duyan ekran okuyucu kullanıcıları. Tekrarlanan blokları geçerken zaman kaybeden ses denetimi ya da ekran büyüteci kullanıcıları. Her ek tuş vuruşunun maliyeti olan motor engelli kişiler.

EAA ve EN 301 549'da

Avrupa Erişilebilirlik Yasası (Direktif (AB) 2019/882) 28 Haziran 2025'ten sonra piyasaya sunulan kapsamdaki ürün ve hizmetler için geçerlidir. Yasanın 47. gerekçesi web siteleri ve mobil uygulamalar için dört ilkeyi sayar: algılanabilirlik, işletilebilirlik, anlaşılabilirlik ve sağlamlık. Ana içeriğe giden hızlı bir yol, "işletilebilirlik" ilkesinin parçasıdır.

Teknik karşılığı EN 301 549 standardında bulunur. Standart, WCAG 2.4.1'i atıfla alır ve ortama göre ayrı maddelere dönüştürür.

EN 301 549 V3.2.1'de yazılım maddesi bu kriteri taşımıyordu, çünkü kriter web sayfası kümeleriyle ilgilidir. V4.1.1'in bunu değiştirip değiştirmediğini kontrol edin. Kriterin web dışı dokümanlara uygulanıp uygulanmadığı ve nasıl uygulandığı standardın 10. maddesinde belirtilir. Madde numaraları EN 301 549'un "9. + WCAG numarası" düzenine göredir. V3.2.1'de yazılım maddesi, açık ve kapalı işlevsellik için ayrı alt maddelere bölünmüştür. Kaynak gösterirken tam numaraları standarttan kontrol edin.

Standart sürümü: EN 301 549 V4.1.1 (Eylül 2026), WCAG 2.2'yi esas alan ve EAA için hazırlanan ilk sürümdür. Henüz AB Resmî Gazetesi'nde atıf almamıştır; bu nedenle EAA gereksinimlerini karşılamanın gönüllü teknik yolu olarak görülmelidir. Atıf yapıldığında EAA ile ilgili uygunluk karinesi sağlayacaktır. 2.4.1 kriterinin metni WCAG 2.1 ve 2.2'de aynıdır.

EAA bağlamında dikkat: Yasanın Madde 2/4 hükmü bazı içerikleri gereksinimlerin dışında bırakır; örneğin 28 Haziran 2025'ten önce yayımlanmış ofis dosya biçimleri ve bu tarihten sonra güncellenmeyen arşivler. Bu tarihten sonra yayımladığınız ya da değiştirdiğiniz içerik bu istisnaların kapsamında değildir.

Directive (EU) 2019/882, EUR-Lex, İngilizce, yeni sekmede açılır

Web için kod örnekleri

1. Sayfanın başında bir atlama bağlantısı

Odaklanabilen ilk öğe yapın. Odak alana kadar gizli kalabilir, ama o zaman görünür olmalıdır.

<body>
  <nav>… 40 bağlantı …</nav>
  <main>…</main>
</body>

<body>
  <a class="atla" href="#ana">Ana içeriğe geç</a>
  <nav>… 40 bağlantı …</nav>
  <main id="ana" tabindex="-1">…</main>
</body>

.atla {
  position: absolute; left: -999px;
}
.atla:focus {
  left: 1rem; top: 1rem; z-index: 100;
  background: #fff; color: #000; padding: 0.5rem 1rem;
}

2. Görünmeyen bir atlama bağlantısı

display: none ya da visibility: hidden ile gizlenen bir bağlantı odaklanamaz. Bunun yerine ekran dışına taşıyın ve odakta gösterin.

.atla { display: none; }

.atla { position: absolute; left: -999px; }
.atla:focus { left: 1rem; }

3. Ana hat bölgeleri

Yardımcı teknolojinin bölgeleri listeleyip atlayabilmesi için ana hatları kullanın. Bir ana hat birden fazla kez geçiyorsa etiket verin.

<div class="ust">…</div>
<div class="menu">…</div>
<div class="icerik">…</div>

<header>…</header>
<nav aria-label="Ana">…</nav>
<main id="ana">…</main>
<footer>…</footer>

4. Bölüm başlarında başlıklar

Her ana bölümden önce bir başlık, başlık gezinmesinin bir atlama mekanizması olarak çalışmasını sağlar.

<div class="bolum-basligi">Hizmetlerimiz</div>

<h2>Hizmetlerimiz</h2>

5. Çerçeveler için başlık

Tekrarlanan içeriği bir iframe içinde gömüyorsanız, kullanıcıların onu tanıyıp girip girmeyeceğine karar verebilmesi için bir başlık verin.

<iframe src="/reklam/banner.html"></iframe>

<iframe src="/reklam/banner.html" title="Reklam"></iframe>

6. Odak alan bir atlama hedefi

Bazı tarayıcılarda odak, odaklanamayan bir hedefe gitmez. Sonraki Tab'ın oradan devam etmesi için hedefe tabindex="-1" verin.

<div id="ana">…</div>

<main id="ana" tabindex="-1">…</main>

Mobil için kod örnekleri

Bu kriter bir web sayfası kümesi boyunca tekrarlanan bloklarla ilgilidir. Yerel uygulamalarda aynı ihtiyacı başlıklar ve ilişkili kontrolleri gruplamak karşılar; böylece ekran okuyucu kullanıcıları uzun bir araç çubuğunu ya da listeyi atlayabilir.

iOS (SwiftUI)

import SwiftUI

struct MakaleEkrani: View {
    var body: some View {
        ScrollView {
            VStack(alignment: .leading, spacing: 16) {
                // Başlıklar VoiceOver kullanıcılarının rotor ile bölüm bölüm atlamasını sağlar
                Text("Son makaleler")
                    .font(.title2)
                    .accessibilityAddTraits(.isHeader)
                MakaleListesi()

                Text("Popüler konular")
                    .font(.title2)
                    .accessibilityAddTraits(.isHeader)
                KonuIzgarasi()
            }
        }
    }
}

Android (Jetpack Compose)

import androidx.compose.foundation.layout.Column
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.semantics.heading
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.Modifier

@Composable
fun MakaleEkrani() {
    Column {
        // Başlıklar TalkBack kullanıcılarının bölümler arasında atlamasını sağlar
        Text(
            "Son makaleler",
            style = MaterialTheme.typography.titleLarge,
            modifier = Modifier.semantics { heading() }
        )
        MakaleListesi()

        Text(
            "Popüler konular",
            style = MaterialTheme.typography.titleLarge,
            modifier = Modifier.semantics { heading() }
        )
        KonuIzgarasi()
    }
}

Nasıl test edilir?

• Üstten Tab ile gezinin: Bir sayfa yükleyip Tab'a bir ya da iki kez basın. Bir atlama bağlantısı beliriyor mu? Odaklanınca görünür oluyor mu?
• Atlama bağlantısını kullanın: Enter ile etkinleştirin. Odak ana içeriğe gidiyor mu? Sonraki Tab menüye geri dönmek yerine ana içerikten devam ediyor mu?
• Her şablonda kontrol edin: Bağlantı ve hedefi, tekrarlanan üst bilgiyi paylaşan tüm sayfalarda bulunmalıdır.
• Ana hatları listeleyin: Ekran okuyucunun landmark listesini ya da bir tarayıcı eklentisini kullanın. banner, navigation, main ve contentinfo var mı ve tekrar edenler etiketlenmiş mi?
• Başlıkları listeleyin: Her ana bölümün başında anlamlı bir başlık var mı?
• Çerçeveleri kontrol edin: Gömülü çerçevelerin anlamlı başlıkları var mı?
• Gerçek araçlarla test edin: NVDA, JAWS ya da VoiceOver'ı deneyin ve ana hatlara ve başlıklara göre atlayın.
• Denetleyiciyi başlangıç olarak kullanın: Otomatik araçlar ana hatların ve bir main bölgesinin varlığını denetleyebilir, ama atlama bağlantısının doğru yere gidip gitmediğini söyleyemez.

Sık yapılan hatalar

• Atlama bağlantısı ve ana hat olmaması: Gezinmeyi geçmenin bir yolu yoktur.
• display: none ile gizlenmiş atlama bağlantısı: Odaklanamaz.
• Hiç görünmeyen atlama bağlantısı: Klavye kullanan gören kullanıcılar nerede olduklarını göremez.
• Bozuk hedef: href var olmayan bir id'ye işaret eder.
• Atlama bağlantısının yalnızca ana sayfada olması: Üst bilgiyi tekrarlayan her sayfada bulunmalıdır.
• Ana hat yerine div kullanmak: Yardımcı teknolojinin atlayacağı bir şey kalmaz.
• Etiketsiz birden çok nav bölgesi: Kullanıcılar bunları birbirinden ayıramaz.
• Yanlış yere atlamak: Hedef alt bilgi değil, ana içeriğin başı olmalıdır.

Kaynaklar

• Understanding SC 2.4.1: Bypass Blocks (W3C), İngilizce, yeni sekmede açılır
• G1: Adding a link at the top of each page that goes directly to the main content area (W3C), İngilizce, yeni sekmede açılır
• ARIA11: Using ARIA landmarks to identify regions of a page (W3C), İngilizce, yeni sekmede açılır
• Directive (EU) 2019/882, European Accessibility Act (EUR-Lex), İngilizce, yeni sekmede açılır
• EN 301 549 V4.1.1 (ETSI), İngilizce, yeni sekmede açılır
• The European accessibility standard EN 301 549 has been updated (AccessibleEU), İngilizce, yeni sekmede açılır

Standart sürümü: EN 301 549 V4.1.1 (2026-09), WCAG 2.2. Bu sayfa bilgilendirme amaçlıdır ve hukuki tavsiye niteliği taşımaz; bağlayıcı metin için Avrupa Erişilebilirlik Yasası'nın (Direktif (AB) 2019/882) ve EN 301 549 standardının resmî metinlerini esas alın.