Skip link

Sayfa başında ana içeriğe atla bağlantısı oluşturursun.

Skip link nedir?

Bir sayfada menü her zaman en üsttedir ve klavye kullananlar her menü öğesinden geçmek zorundadır. Skip link (atla bağlantısı) bu yükü hafifletir: sayfanın en başında gizli bir bağlantıdır, ilk Tab'da görünür ve 'ana içeriğe atla' der.

Ekran okuyucu kullanıcıları için de hayat kurtarır: her seferinde menüyü dinlemek yerine doğrudan içeriğe ulaşırlar.

href ve id eşleşmesi

Skip link iki parçadan oluşur: sayfanın başında bir <a href="#main-content"> ve ana içerikte bir <main id="main-content">. Bağlantının href'indeki #'dan sonraki değer, hedef öğenin id'siyle birebir eşleşir.

Bu sayede bağlantıya tıklanınca tarayıcı hedef öğeye odaklanır. İç sayfa bağlantısı (in-page link) bu mantıkla çalışır.

Uygulama Skip link ve hedefini yaz

Body'nin başına bir atla bağlantısı ekle: <a href="#main-content">İçeriğe atla</a>. Body içine bir <main id="main-content"> ekle ve içine bir <h1> koy, metni Haberler olsun. Bağlantının hedefi ile main'in id'si birebir eşleşmeli.

Örnek çözümü göster

<body>
  <a href="#main-content">İçeriğe atla</a>
  <main id="main-content">
    <h1>Haberler</h1>
  </main>
</body>

Kendini test et

Skip link ne işe yarar?
- Sayfayı yeniden yükler
- Ana içeriğe atlar
- Menüyü açar
- Sayfayı yukarı kaydırır
Cevabı göster

Ana içeriğe atlar — Doğru. Skip link klavye ve ekran okuyucu kullanıcılarını ana içeriğe taşır.

Skip link'in hedefini yaz

<a href="#main-content">İçeriğe atla</a>
<main ____="main-content">
  <h1>Haberler</h1>
</main>

Cevabı göster

<a href="#main-content">İçeriğe atla</a>
<main id="main-content">
  <h1>Haberler</h1>
</main>

Skip link parçalarını eşleştir

href="#main-content"

Bağlantının hedefi
id="main-content"

Hedefin kimliği
<a>

Atla bağlantısı
<main>

Ana içerik

Sıradaki ders: Form erişilebilirliği

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler