Gezinme · In-page navigation
Sayfa içi gezinme
Uzun bir sayfanın bölümlerini listeler ve her birine bağlantı verir.
- CSS
- kararlı
- JavaScript
- gerekmiyor
- React
- kararlı
- Vue
- kararlı
Örnekler
HTML kodunu göster
<nav class="kiris-icindekiler" aria-labelledby="ic-baslik">
<h2 class="kiris-icindekiler__baslik" id="ic-baslik">Bu sayfada</h2>
<ol class="kiris-icindekiler__liste">
<li><a href="#kosullar">Başvuru koşulları</a></li>
<li><a href="#belgeler">Gerekli belgeler</a></li>
<li><a href="#sure">Süreç ve süre</a></li>
<li><a href="#itiraz">İtiraz yolu</a></li>
</ol>
</nav>
<section class="kiris-bolum" id="kosullar">
<h3 class="kiris-baslik kiris-baslik--3">Başvuru koşulları</h3>
<p>Başvuru için Türkiye Cumhuriyeti vatandaşı olmanız ve 18 yaşını doldurmuş olmanız gerekir.</p>
</section>
<section class="kiris-bolum" id="belgeler">
<h3 class="kiris-baslik kiris-baslik--3">Gerekli belgeler</h3>
<p>Kimlik fotokopisi, ikametgah belgesi ve başvuru formu.</p>
</section>
<section class="kiris-bolum" id="sure">
<h3 class="kiris-baslik kiris-baslik--3">Süreç ve süre</h3>
<p>Başvurunuz en geç 15 iş günü içinde sonuçlanır.</p>
</section>
<section class="kiris-bolum" id="itiraz">
<h3 class="kiris-baslik kiris-baslik--3">İtiraz yolu</h3>
<p>Sonuca 30 gün içinde CİMER üzerinden itiraz edebilirsiniz.</p>
</section>
Ne zaman kullanılır
- Sayfa 4 ekrandan uzunsa ve 3 üstünde bölüm başlığı varsa kullanın.
- Mevzuat, kılavuz ve sıkça sorulan sorular sayfalarında kullanın.
Erişilebilirlik
- Bağlantı hedefi bir başlıktır ve
idtaşır. - Liste sıralıdır,
<ol>. Sıra bilgi taşır. - Sabit konumlu sürüm klavye odağını kapatmaz.
Karşılanan WCAG 2.2 ölçütleri 2.4.12.4.5
Kaynak
Benzer bir bileşen şu ülkelerin tasarım sistemlerinde de var: US, KR, JP, DK.
Bu bileşenin kodu depoda:
- Kayıt defteri tanımı, adı, özeti, kullanım kuralı ve örnekleri
- CSS katmanları,
kiris-in-page-navigationile başlayan sınıflar