Klavye navigasyonu
Tab sırası, tabindex ve focus yönetimini öğrenirsin.
Tab sırası ve tabindex
Klavye kullananlar Tab tuşuyla sayfada ilerler. Doğal sıra, odaklanabilir öğelerin HTML'deki yer sırasıdır: bağlantılar, butonlar ve input'lar. Bu sırayı bozmadan bırakmak en iyisidir.
Bazen müdahale gerekirse tabindex özniteliği kullanılır: tabindex="0" bir öğeyi normal akışa sokar; tabindex="-1" öğeyi akıştan çıkarır ama JavaScript ile odaklanabilir kılar; tabindex="1" ve üzeri kaçınılır, çünkü sırayı bozar.
Focus yönetimi
Bir öğe açılıp kapandığında odak doğru yere gitmelidir. Bir menü açıldığında odak menünün ilk öğesine, kapandığında tetikleyen butona dönmelidir. Buna focus yönetimi denir.
Modal açıldığında odak modal içine taşınır; kapanınca kullanıcıyı tetikleyen öğeye geri verilir. Aksi halde klavye kullanan, ekranı göremeyen kişi odağın nerede olduğunu bilemez. JavaScript ile .focus() çağrısı yapılır.
Uygulama Skip link ve odaklanabilir bölümleri yaz
Body içine bir skip link ekle: <a href="#content">İçeriğe geç</a>. Sonra bir <main id="content"> aç. main içine bir <button> ve bir <div> koy. Butonun metni dolu olsun. div'e tabindex="0" ver ki klavye ile odaklanabilsin. main'i kapat.
Örnek çözümü göster
<body>
<a href="#content" class="skip-link">İçeriğe geç</a>
<main id="content">
<button>Menüyü aç</button>
<div tabindex="0" role="region">Hızlı bilgi</div>
</main>
</body>Kendini test et
-
tabindex="-1" ne yapar?
- Öğeyi Tab akışından çıkarır ama JS ile odaklanabilir kılar
- Öğeyi Tab akışının başına koyar
- Öğeyi tam ekran yapar
- Öğeyi gizler
Cevabı göster
Öğeyi Tab akışından çıkarır ama JS ile odaklanabilir kılar — Doğru. -1 öğeyi Tab sırasından çıkarır ama JavaScript ile odaklanabilir tutar; programatik odak için ideal.
-
Skip link hedefini tamamla
<body> <a href="#____" class="skip-link">İçeriğe geç</a> <main id="content">...</main> </body>Cevabı göster
<body> <a href="#content" class="skip-link">İçeriğe geç</a> <main id="content">...</main> </body> -
tabindex değerini davranışıyla eşleştir
- tabindex="0"
- Normal Tab akışına sokar
- tabindex="-1"
- Tab dışı ama odaklanabilir
- tabindex="1"
- Sırayı bozar, kaçınılır
- tabindex yok
- Doğal HTML sırası
-
Bir modal kapandığında odak nereye gitmeli?
- Sayfanın en üstüne
- Body'ye
- Sonraki bölüme
- Tetikleyen butona geri dönmeli
Cevabı göster
Tetikleyen butona geri dönmeli — Doğru. Modalı açan buton, kapanınca odağı geri alır; kullanıcı nerede kaldığını bilir.