- Konu sahibi
- #1
tabindex değeri, bir HTML öğesinin klavye ile Tab tuşuna basılarak odaklanıp odaklanamayacağını ve odak sırasındaki yerini belirler. Genel kural; doğal olarak odaklanabilen öğelerde tabindex kullanmamak, özel bir ihtiyaç varsa tabindex="0" veya tabindex="-1" tercih etmektir. Pozitif değerler, sayfadaki doğal ve DOM tabanlı odak sırasını bozabileceği için kullanılmamalıdır.Değerler nasıl çalışır?
href taşıyan bir bağlantı, etkin düğme, form alanı veya
textarea gibi etkileşimli HTML öğeleri normalde klavye odağına doğal olarak katılır. Bu öğelere gereksiz yere tabindex="0" eklemek genellikle bir fayda sağlamaz.- tabindex="0": Öğeyi normal klavye odak sırasına ekler. Sıra, mümkün olduğunca belgenin DOM sırasını izler.
- tabindex="-1": Öğeyi Tab sırasından çıkarır; ancak JavaScript ile veya başka bir odaklama işlemiyle odaklanmasına izin verir.
- Pozitif değerler (
1,2gibi): Öğeyi özel bir sıralamaya sokar. Küçük pozitif değerler önce gelir; eşit değerlerde DOM sırası kullanılır. Bu yaklaşım, içerik değiştiğinde yönetilmesi zor bir odak sırası oluşturur.
Hangi durumda hangi değeri seçmelisiniz?
Aşağıdaki karar, çoğu sayfa için yeterlidir. Önce öğenin zaten doğal olarak odaklanıp odaklanmadığını kontrol edin; bağlantı veya düğmeyi sırf erişilebilir olsun diye başka bir elemana dönüştürmek yerine doğrudan yerleşik HTML öğesini kullanın.
| İhtiyaç | Uygun yaklaşım | Neden |
|---|---|---|
| Bağlantı veya düğme eklemek | Yerleşik a ya da button kullanın | Klavye ve etkileşim davranışı hazır gelir |
| Özel bir bileşen Tab sırasına katılsın | tabindex="0" | Normal DOM sırasına dahil olur |
| Açılır iletişim kutusu gibi bir bölüm script ile odaklansın | tabindex="-1" | Tab ile sürekli dolaşmadan programatik olarak odaklanabilir |
| Özel bir Tab sırası oluşturmak | Pozitif değerlerden kaçının; DOM sırasını düzeltin | Bakımı ve klavye deneyimi daha öngörülebilir olur |
Uygulanabilir örnek
Aşağıdaki örnekte özel bir panel, açıldığında JavaScript ile odaklanabilir; fakat kullanıcı Tab tuşuyla paneli gereksiz bir durak olarak görmez. Panel içindeki kapatma düğmesi ise doğal olarak odaklanabilir.
Kod:
<button type="button" id="open-help" aria-controls="help-panel" aria-expanded="false">Yardımı aç</button>
<section id="help-panel" tabindex="-1" aria-labelledby="help-heading" hidden>
<h2 id="help-heading">Yardım</h2>
<p>Bu panel açıldığında odağı alır.</p>
<button type="button" id="close-help">Kapat</button>
</section>
<script>
const openHelp = document.querySelector('#open-help');
const helpPanel = document.querySelector('#help-panel');
const closeHelp = document.querySelector('#close-help');
openHelp.addEventListener('click', () => {
helpPanel.hidden = false;
openHelp.setAttribute("aria-expanded", "true");
helpPanel.focus();
});
closeHelp.addEventListener('click', () => {
helpPanel.hidden = true;
openHelp.setAttribute("aria-expanded", "false");
openHelp.focus();
});
</script>Uygulama sırası şöyledir:
- Klavye ile sayfada dolaşın ve doğal odak sırasının içerik sırasıyla uyuşup uyuşmadığını kontrol edin.
- Yalnızca programatik olarak odaklanması gereken panel, başlık veya durum alanına
tabindex="-1"ekleyin. - Panel görünür olduktan sonra
focus()çağrısını yapın; gizliyken odaklamaya çalışmayın. - Panel kapanınca odağı, paneli açan düğmeye geri verin. Böylece kullanıcı sayfanın başına veya belirsiz bir konuma düşmez.
- Özel bir bileşeni
tabindex="0"ile odaklanabilir yaptıysanız, Enter ve gerekiyorsa Space tuşlarının beklenen etkileşimi başlatmasını ayrıca sağlayın. Mümkünse bunun yerine yerleşikbuttonkullanın.
Panel açıldığında başlık yerine panelin kendisi odaklanırsa başarıyla odaklanmıştır; kapatıldığında imleç “Yardımı aç” düğmesine dönmelidir. Panel görünmüyor veya odak kayboluyorsa önce
hidden durumunun kaldırıldığını, öğenin DOM'da bulunduğunu ve JavaScript'in hata vermediğini kontrol edin.Örnek modal olmayan bir yardım panelidir; arka planı kilitleyen tam dialog değildir ve Tab odağını hapsetmez. Modal gerekiyorsa yerleşik dialog/showModal ya da uygun APG örüntüsü, Escape/kapanış ve focus yönetimi ayrıca uygulanmalıdır. Sadece role veya tabindex eklemek bunları sağlamaz. disabled/hidden/inert durumları da odaklanmayı etkiler; CSS order görsel sırayı değiştirse de klavye sırası kendiliğinden aynı olmaz.
Sık yapılan hatalar
Her elemana tabindex="0" eklemek: Sayfadaki gereksiz odak duraklarını artırır ve kullanıcıyı içerikten uzaklaştırır. Yalnızca gerçekten etkileşimli veya programatik olarak erişilmesi gereken özel öğelerde kullanın.
Pozitif tabindex değerleriyle sırayı zorlamak: Bir üst bilgi, hata mesajı veya yeni eklenen alan sayfaya girdiğinde mevcut sıra kolayca bozulur. HTML içindeki DOM sırasını kullanıcı akışına göre düzenlemek daha sağlamdır.
Div'i yalnızca tabindex ile düğmeye çevirmek:
tabindex="0" div'i odaklanabilir yapar, fakat düğmenin varsayılan klavye ve semantik davranışlarını eklemez. Eylem için button, gezinme için a kullanın.Odak göstergesini kaldırmak: Kullanıcı hangi öğenin seçili olduğunu göremeyebilir. Özel CSS yazıyorsanız görünür bir
:focus veya :focus-visible göstergesi bırakın.Kaynaklar
Sık sorulan sorular
tabindex="-1" olan bir öğeye kullanıcı Tab ile ulaşabilir mi?
Hayır. Öğe normal Tab sırasına katılmaz; ancak JavaScript ilefocus() çağrılarak veya tarayıcının başka bir odaklama davranışıyla odaklanabilir.