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.

Sıradaki ders: Live regions

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler