Tekrarlanan Blokların Atlanabilmesi

Kısaca

Kurumsal sitelerin çoğunda her sayfanın başında aynı logo, arama kutusu, dil seçimi ve onlarca bağlantılık bir ana menü bulunur. Fare kullanan biri bunların üzerinden gözüyle atlar; klavye kullanan biri ise her sayfada bu bağlantıların hepsinden Tab ile tek tek geçmek zorunda kalabilir.

Bu kriter, tekrar eden bu blokları atlamak için bir yol ister. En yaygın ve en güvenilir yöntem sayfanın başına konan "Ana içeriğe geç" bağlantısıdır. Doğru kullanılmış bölge öğeleri (main, nav) ve başlıklar da ekran okuyucu kullanıcılarına aynı imkânı sağlar.

Neleri kapsar?

• Atlama bağlantıları: "Ana içeriğe geç" gibi, odaklandığında görünen ve ana içeriğe götüren bağlantılar.
• Bölge (landmark) öğeleri: header, nav, main, footer gibi, ekran okuyucuyla bölgeler arasında geçişi sağlayan öğeler.
• Başlıklar: Ekran okuyucu kullanıcılarının bölümler arasında atlamasını sağlayan başlık yapısı.
• Mobil uygulamalar: Tekrar eden gezinti öğelerinin ardından ana içeriğe hızlı ulaşım; başlıklar ve standart gezinti bileşenleri.
• Kapsam dışı notlar: Başlıkların ve bölgelerin doğru kodlanması Bilgi ve İlişkiler kriterinin, sayfa başlığı ise bir sonraki kriterin (Sayfa / Ekran Başlığı) konusudur.

Kimleri etkiler?

Yalnızca klavye kullanan kişiler, anahtar cihazıyla gezinen motor engelli kullanıcılar ve ekran okuyucu kullanan kör kullanıcılar en çok yararlanan gruplardır. Anahtar cihazı kullanan biri için her ek adım fiziksel çaba demektir. Ekranı çok büyüten az gören kullanıcılar da ana içeriğe hızlıca ulaşmak için atlama bağlantılarından faydalanır.

Kontrol listesinde

Bu kriter, Bakanlığın A Seviyesi Kontrol Listesi'nde 82–83 numaralı soruları kapsar. Yönlendirme soruları sayfada ilgili içerik olup olmadığını belirler; yoksa liste sizi sonraki soruya geçirir. Aşağıdaki açıklamalar sorulardan alıntı değil, özetidir. Soruların tam metni için resmî listeye bakın.

Resmî kontrol listesini indirin (PDF), yeni sekmede açılır

Web için kod örnekleri

1. "Ana içeriğe geç" bağlantısı

Bağlantı sayfadaki ilk odaklanılabilir öğe olmalı ve main öğesine işaret etmelidir.

<body>
  <div class="ust">
    <img src="/logo.svg" alt="Örnek Belediyesi">
    <div class="menu">… 40 bağlantı …</div>
  </div>
  <div class="icerik">…</div>
</body>

<body>
  <a href="#ana-icerik" class="atlama-baglantisi">Ana içeriğe geç</a>
  <header>
    <a href="/"><img src="/logo.svg" alt="Örnek Belediyesi ana sayfa"></a>
    <nav aria-label="Ana menü">…</nav>
  </header>
  <main id="ana-icerik" tabindex="-1">…</main>
</body>

tabindex="-1", bazı tarayıcılarda odağın hedefe gerçekten taşınmasını garanti eder; böylece bir sonraki Tab basışı ana içerikten devam eder.

2. Odaklanınca görünen atlama bağlantısı

Bağlantı görsel olarak gizlenebilir, ama odak aldığında mutlaka görünür olmalıdır. display: none veya visibility: hidden bağlantıyı tamamen erişilemez kılar.

.atlama-baglantisi {
  display: none;
}

.atlama-baglantisi {
  position: absolute;
  left: 1rem;
  top: -3rem;
  padding: 0.75rem 1rem;
  background: #1a1a1a;
  color: #ffffff;
  z-index: 1000;
}
.atlama-baglantisi:focus {
  top: 1rem;
}

3. Bölge öğeleri

Ekran okuyucular bölgeler arasında tek komutla geçiş yapabilir. Her sayfada tek bir main bulunmalı; birden fazla nav varsa ayırt edici adlar verilmelidir.

<header>…</header>
<nav aria-label="Ana menü">…</nav>
<main id="ana-icerik" tabindex="-1">
  <h1>Yapı Ruhsatı Başvurusu</h1>
  …
</main>
<aside aria-label="İlgili hizmetler">…</aside>
<footer>…</footer>

4. Birden fazla atlama bağlantısı

Ana içerik dışında sık kullanılan bir bölge varsa (örneğin arama), birkaç atlama bağlantısı da sunulabilir. Sayının az tutulması gerekir; aksi hâlde bağlantılar da tekrarlanan bir bloğa dönüşür.

<ul class="atlama-listesi">
  <li><a href="#ana-icerik" class="atlama-baglantisi">Ana içeriğe geç</a></li>
  <li><a href="#site-arama" class="atlama-baglantisi">Aramaya geç</a></li>
</ul>

5. Tek sayfa uygulamalarda odak yönetimi

Sayfa yenilenmeden içerik değiştiğinde atlama bağlantısının hedefi hâlâ geçerli olmalıdır. Rota değişiminden sonra odağı ana başlığa taşımak, kullanıcıyı menüyü yeniden geçmekten kurtarır.

function rotaDegisti() {
  const baslik = document.querySelector("main h1");
  if (baslik) {
    baslik.setAttribute("tabindex", "-1");
    baslik.focus();
  }
}

Mobil için kod örnekleri

Mobil uygulamalarda tekrar eden gezinti genellikle sekme çubuğu veya gezinti çubuğu olarak ekranın kenarında durur ve standart bileşenlerle yapıldığında ekran okuyucu içerikten ayrı ele alınır. Uzun ekranlarda bölüm başlıklarını başlık olarak işaretlemek, kullanıcıların VoiceOver rotoru veya TalkBack'in başlık gezinmesiyle doğrudan bölümlere atlamasını sağlar.

iOS (SwiftUI)

import SwiftUI

struct HizmetlerEkrani: View {
    var body: some View {
        ScrollView {
            VStack(alignment: .leading, spacing: 24) {
                Text("İmar İşlemleri")
                    .font(.title2)
                    .accessibilityAddTraits(.isHeader)
                ImarKartlari()          // Kendi bileşeniniz

                Text("Ruhsat Başvuruları")
                    .font(.title2)
                    .accessibilityAddTraits(.isHeader)
                RuhsatKartlari()        // Kendi bileşeniniz
            }
            .padding()
        }
        .navigationTitle("Hizmetler")
    }
}

Android (Jetpack Compose)

import androidx.compose.foundation.layout.*
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.*
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.semantics.heading
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.unit.dp

@Composable
fun HizmetlerEkrani() {
    Column(
        Modifier
            .verticalScroll(rememberScrollState())
            .padding(16.dp),
        verticalArrangement = Arrangement.spacedBy(24.dp)
    ) {
        Text(
            "İmar İşlemleri",
            style = MaterialTheme.typography.titleLarge,
            modifier = Modifier.semantics { heading() }
        )
        ImarKartlari()   // Kendi bileşeniniz

        Text(
            "Ruhsat Başvuruları",
            style = MaterialTheme.typography.titleLarge,
            modifier = Modifier.semantics { heading() }
        )
        RuhsatKartlari() // Kendi bileşeniniz
    }
}

Uygulama içinde web görünümü (WebView) kullanılıyorsa, o sayfalar için web örneklerindeki atlama bağlantıları geçerlidir.

Nasıl test edilir?

• İlk Tab'a basın: Sayfayı yükleyip Tab'a basın. İlk odaklanan öğe görünür bir "Ana içeriğe geç" bağlantısı mı?
• Bağlantıyı kullanın: Enter'a basın, ardından tekrar Tab'a basın. Odak ana içerikteki ilk etkileşimli öğeye mi gidiyor, yoksa menüye mi dönüyor?
• Bölgeleri kontrol edin: Ekran okuyucunun bölge listesini açın (NVDA'da Insert+F7, VoiceOver'da rotor). Ana içerik bölgesi var mı ve doğru alanı kapsıyor mu?
• Sayfa geçişlerinde tekrarlayın: Farklı sayfa şablonlarında (ana sayfa, liste sayfası, form sayfası) bağlantının hedefinin doğru olduğunu doğrulayın.
• Otomatik araçların sınırı: Otomatik araçlar main bölgesinin veya atlama bağlantısının varlığını, bağlantı hedefinin sayfada bulunup bulunmadığını kontrol edebilir. Bağlantının odakta görünür olup olmadığını ve odağı gerçekten taşıyıp taşımadığını ise elle test etmeniz gerekir.

Sık yapılan hatalar

• Bağlantıyı tamamen gizlemek: display: none ile gizlenen atlama bağlantısı klavyeyle hiç ulaşılamaz.
• Hedefi olmayan bağlantı: href="#ana-icerik" olduğu hâlde sayfada bu kimliğe sahip öğenin bulunmaması.
• Bağlantıyı menünün sonuna koymak: Atlama bağlantısı ilk odaklanılabilir öğe değilse amacına ulaşmaz.
• Çerez bandını önce koymak: Çerez onayı veya duyuru bandı atlama bağlantısından önce geliyorsa kullanıcı yine birden çok öğeyi geçmek zorunda kalır.
• Birden fazla main: Şablonlardaki hatalar nedeniyle sayfada birden çok main bölgesi bulunması.

Kaynaklar

• Understanding SC 2.4.1: Bypass Blocks (W3C), İngilizce, yeni sekmede açılır
• Erişilebilirlik blogu — Uygulamadan örnekler ve güncel yazılar.
• Erişilebilirlik kütüphanesi — Atlama bağlantısı, bölge (landmark), odak ve diğer terimler.

Kontrol listesi sürümü: V2.2.30.01 (2026). Bu sayfa bilgilendirme amaçlıdır; bağlayıcı metin için Aile ve Sosyal Hizmetler Bakanlığı'nın resmî kontrol listesini esas alın.