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