Klavye erişilebilirliği nasıl sağlanır? tabindex değerleri ne anlama gelir?

Tüm etkileşimli öğelere sadece klavye ile ulaşılabilmeli ve kullanılabilmeli: Tab ile gezinme, Enter/Space ile tetikleme, Escape ile kapatma ve her zaman görünür bir odak göstergesi.

Temel kurallar

• Native elemanları kullanın: <button>, <a href>, <input>, <select> klavye desteğini bedava getirir. Tıklanabilir <div onClick> klavyeyle çalışmaz.
• Odak sırası DOM sırasını takip eder; CSS ile görsel sırayı değiştirmek (ör. order, flex-direction: row-reverse) kafa karıştırır.
• outline: none ile odak halkasını kaldırmayın; özelleştirmek için :focus-visible kullanın.

button:focus-visible { outline: 3px solid #2563eb; outline-offset: 2px; }

tabindex

Odak yönetimi

• Modal açılınca odağı içine taşıyın, kapanınca açan butona geri verin.
• SPA'da route değişince odağı yeni sayfanın başlığına (tabindex="-1" ile) taşıyın.
• "İçeriğe atla" (skip link) bağlantısı ekleyin.
• Arka plandaki içeriği etkileşime kapatmak için inert attribute'u kullanılabilir.

Composite widget'lar

Tab listesi, menü, grid gibi bileşenlerde roving tabindex kullanılır: grubun sadece bir öğesi tabindex="0", diğerleri -1; grup içinde ok tuşlarıyla gezilir.