tabindex
Decyduje, czy element da się zaznaczyć klawiszem Tab i w jakiej kolejności.
- Dotyczy
- Wszystkie elementy HTML
Przykład
#<style>
[tabindex]:focus { outline: 2px solid #a78bfa; outline-offset: 2px; }
.tile { display: inline-block; padding: 8px 12px; margin: 4px; border-radius: 8px; background: #1f1f23; }
</style>
<p>Kliknij w podgląd i naciskaj klawisz Tab:</p>
<div class="tile" tabindex="0">Kafelek w kolejności Tab</div>
<div class="tile" tabindex="-1">Kafelek pomijany przez Tab</div>
<button type="button">Zwykły przycisk</button>Definicja i zastosowanie
#Atrybut tabindex steruje nawigacją klawiaturą. Linki, przyciski i pola formularzy są osiągalne klawiszem Tab od razu. Inne elementy, na przykład <div>, trzeba do tego dopuścić.
tabindex="0" dodaje element do naturalnej kolejności Tab, zgodnej z kolejnością w kodzie. tabindex="-1" sprawia, że element nie jest osiągalny klawiszem Tab, ale można ustawić na nim fokus w JavaScripcie przez focus(). Przydaje się to na przykład w oknach dialogowych.
Wartości dodatnie (1, 2…) wymuszają własną kolejność przed wszystkimi innymi elementami. To prawie zawsze pogarsza dostępność, bo kolejność przestaje odpowiadać temu, co widać na ekranie.
Składnia
#<element tabindex="0 | -1 | liczba">…</element>Wartości
#0
Element trafia do kolejności Tab zgodnie z położeniem w kodzie.-1
Element nie jest osiągalny klawiszem Tab, ale da się na nim ustawić fokus w skrypcie.liczba dodatnia
Wymusza własną kolejność. Lepiej unikać.
Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Zamiast dodawać
tabindex="0"do klikalnego<div>, użyj po prostu<button>. Dostaniesz za darmo obsługę Enter i Spacji. - Element z fokusem musi być widocznie wyróżniony. Nie usuwaj obramowania
outlinebez zamiennika.
Powiązane hasła
#- <button>Klikalny przycisk: wysyła formularz, czyści go albo uruchamia akcję na stronie.
- inertWyłącza interakcję z elementem i jego potomkami: klikanie, fokus i czytniki ekranu.
- idUnikalny identyfikator elementu w całym dokumencie.
- <a>Odnośnik do innej strony, pliku, adresu e-mail albo miejsca na tej samej stronie.
- autofocusUstawia fokus na elemencie od razu po wczytaniu strony albo po otwarciu okna dialogowego.
Widzisz błąd albo brakuje przykładu? Napisz do nas.