Gezinme · Skip link

İçeriğe atlama bağlantısı

Klavye kullanıcısının menüyü atlayıp doğrudan ana içeriğe gitmesini sağlar.

CSS: kararlı
JavaScript: gerekmiyor
React: kararlı
Vue: kararlı

Örnekler

Temel Canlı örnek

HTML kodunu göster

<a class="kiris-atla" href="#ana-icerik">Ana içeriğe geç</a>
<main id="ana-icerik" tabindex="-1">
  <h1 class="kiris-baslik kiris-baslik--1">Sayfa başlığı</h1>
</main>

Ne zaman kullanılır

Her sayfada kullanın. İstisnası yoktur.
Sayfadaki ilk odaklanabilir öğe olur.

Erişilebilirlik

Odak almadan gizlidir. Odak alınca görünür olur.
display: none kullanmayın. O zaman klavye de bulamaz.
Hedef öğe tabindex="-1" taşır, yoksa odak taşınmaz.
Ölçüm: 16 Türk bakanlık sitesinin 15 tanesinde bu bağlantı yok.

Karşılanan WCAG 2.2 ölçütleri 2.4.1 2.4.7

Kaynak

Benzer bir bileşen şu ülkelerin tasarım sistemlerinde de var: UK, FR, KR, DK, NO.

Bu bileşenin kodu depoda:

Kayıt defteri tanımı, adı, özeti, kullanım kuralı ve örnekleri
CSS katmanları, kiris-skip-link ile başlayan sınıflar