tabindex 0, -1 i nigdy dodatni
Kontroluj, co może otrzymać fokus, a co jest dostępne tylko ze skryptu.
tabindex 0, -1 i nigdy dodatni to bezpłatna lekcja Web Accessibility Academy na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Web Accessibility Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Web Accessibility Academy zawiera 4 lekcji w sumie.
Do czego służy tabindex
Atrybut tabindex określa, czy element może otrzymać fokus z klawiatury i jak wpisuje się w kolejność przechodzenia klawiszem Tab. To pokrętło sterujące możliwością uzyskania fokusu.
Większość elementów jest już dostępna za pomocą klawiatury
Linki, przyciski i pola wejściowe są domyślnie dostępne za pomocą klawiatury, dlatego rzadko zmienia się dla nich tabindex. Należy użyć go tylko wtedy, gdy element natywny nie może spełnić zadania.
tabindex 0 dołącza do kolejności
Ustawienie tabindex="0" umieszcza element, który normalnie nie przyjmuje fokusu, w naturalnej kolejności przechodzenia klawiszem Tab — dokładnie w miejscu, w którym znajduje się w DOM.
<div role="button" tabindex="0">Custom action</div>Kiedy używać wartości 0
Użyj tabindex="0" dla niestandardowego widgetu utworzonego na bazie div lub span, który musi być dostępny z klawiatury, na przykład skryptowanego przełącznika.
tabindex -1 oznacza dostęp tylko za pomocą skryptu
Przy tabindex="-1" element jest pomijany podczas przechodzenia klawiszem Tab, ale nadal można ustawić na nim fokus z JavaScriptu za pomocą element.focus().
<div id="panel" tabindex="-1">Result area</div>Dlaczego -1 jest tak przydatne
Użyj tabindex="-1", aby po wykonaniu działania przenieść fokus do określonego obszaru, na przykład panelu wyników, bez dodawania go do każdej kolejnej pozycji przechodzenia klawiszem Tab. 🎯
Nigdy nie używaj wartości dodatnich
Dodatnia wartość tabindex, na przykład 3, umieszcza element przed wszystkimi innymi, zaburzając kolejność i zamykając użytkownika w labiryncie. Należy jej unikać.
<input tabindex="3">Wartości dodatnie zaburzają kolejność
Każdy element z wartością dodatnią jest odwiedzany przed wszystkimi elementami z tabindex="0" oraz elementami domyślnymi, dlatego kolejność fokusu przestaje odpowiadać kolejności wizualnej.
Pozwól DOM ustalić kolejność
Najbardziej przejrzysta kolejność przechodzenia klawiszem Tab wynika z samej kolejności w DOM. Ułóż znaczniki logicznie, a większość problemów z fokusem zniknie sama.
Nie udostępniaj wszystkiego za pomocą klawiatury
Dodanie tabindex="0" do zwykłego tekstu lub całych kontenerów tworzy szum, zmuszając użytkowników klawiatury do przechodzenia klawiszem Tab przez elementy, które nic nie robią.
Prosta zasada
Użyj 0, aby dodać niestandardową kontrolkę do kolejności, -1, aby umożliwić fokusowanie tylko za pomocą skryptu, i nigdy nie używaj liczby dodatniej. To wystarcza w niemal każdym przypadku.
Szybki test
Jaka wartość tabindex sprawia, że element można fokusować za pomocą skryptu, ale pomija się go podczas przechodzenia klawiszem Tab?
Podsumowanie
Potrafi już Pan korzystać z pokrętła tabindex: 0 dodaje niestandardowe kontrolki do kolejności, -1 umożliwia fokusowanie za pomocą skryptu, a wartości dodatnie są niedozwolone. 👍
Często zadawane pytania
Czy lekcja „tabindex 0, -1 i nigdy dodatni” jest bezpłatna?
Tak — pełny tekst „tabindex 0, -1 i nigdy dodatni” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Web Accessibility Academy, przejdź na CoddyKit PRO. Kurs Web Accessibility Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „tabindex 0, -1 i nigdy dodatni”?
Kontroluj, co może otrzymać fokus, a co jest dostępne tylko ze skryptu. Ćwiczysz Web Accessibility Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Web Accessibility Academy?
Nie wymagamy żadnego doświadczenia. Web Accessibility Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.
Ile czasu zajmuje lekcja „tabindex 0, -1 i nigdy dodatni”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Web Accessibility Academy?
Tak. Każda lekcja Web Accessibility Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- tabindex 0, -1 i nigdy dodatni
- Przenoszenie fokusu po wykonaniu akcji
- Przywracanie fokusu po zamknięciu warstwy
- Zarządzanie roving tabindex w widgetach