Zarządzanie roving tabindex w widgetach
Umożliwiaj poruszanie się klawiszami strzałek w obrębie złożonej kontrolki.
Zarządzanie roving tabindex w widgetach to bezpłatna lekcja Web Accessibility Academy na CoddyKit. To lekcja 4 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.
Jedno zatrzymanie dla całego widgetu
W pasku narzędzi lub grupie przycisków radiowych klawisz Tab powinien przenosić fokus do widgetu raz, a nie do każdego elementu. Wzorzec roving tabindex to umożliwia.
Główna idea
W danym momencie dokładnie jeden element ma tabindex="0". Wszystkie pozostałe otrzymują tabindex="-1", dzięki czemu klawisz Tab wprowadza fokus do grupy w jednym miejscu.
Konfiguracja początkowa
Po załadowaniu nadaj pierwszemu lub wybranemu elementowi tabindex="0", a pozostałym ustaw tabindex="-1". To stan spoczynkowy grupy.
<button tabindex="0">Bold</button>
<button tabindex="-1">Italic</button>Klawisze strzałek służą do poruszania się wewnątrz
Gdy fokus znajduje się już wewnątrz, użytkownik porusza się między elementami za pomocą klawiszy strzałek, a nie klawisza Tab. Tab nadal opuszcza cały widget.
Przenoszenie wartości tabindex
Po naciśnięciu strzałki wykonaj dwie czynności: ustaw wartość starego elementu na -1, a nowego na 0, następnie wywołaj focus() na nowym elemencie. 🧭
old.tabIndex = -1;
next.tabIndex = 0;
next.focus();Dlaczego tylko jedno zero
Utrzymywanie jednego tabindex="0" oznacza, że klawisz Tab zawsze przenosi fokus do ostatnio używanego elementu, dzięki czemu powrót do widgetu jest naturalny.
Trzymaj się wzorca APG
ARIA Authoring Practices Guide określa dokładne klawisze dla każdego widgetu. Należy korzystać z jego mapy klawiatury, zamiast tworzyć własną.
Opcjonalne zawijanie
Wiele widżetów zapętla ruch za pomocą strzałek: naciśnięcie prawej strzałki na ostatnim elemencie przenosi do pierwszego. W APG należy sprawdzić, czy w danym wzorcu nawigacja powinna się zapętlać.
Home i End też
Widżety złożone często obsługują także klawisze Home i End, aby przechodzić odpowiednio do pierwszego i ostatniego elementu — to drobne udogodnienie przyspiesza nawigację.
Roving tabindex a aria-activedescendant
Roving tabindex przenosi rzeczywisty fokus w DOM. Alternatywa, czyli aria-activedescendant, utrzymuje fokus na kontenerze i wskazuje wirtualnie aktywny element.
Przetestuj cały cykl
Przejdź do widżetu klawiszem Tab, przejdź strzałkami przez każdy element, wyjdź klawiszem Tab, a następnie ponownie przejdź do widżetu i sprawdź, czy fokus wraca do ostatnio używanego elementu.
Szybkie sprawdzenie
Ile elementów ma w danym momencie tabindex="0" w pasku narzędzi wykorzystującym roving tabindex?
Podsumowanie
Opanowano roving tabindex: jeden element ma wartość 0, pozostałe -1, klawisze strzałek przenoszą wartość 0 między elementami, a Tab przechodzi poza cały widżet. 🚀
Ucz się HTML dzięki korepetycjom AI — za darmo
Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.
- Kursy
- 30
- Lekcje
- 120
Często zadawane pytania
Czy lekcja „Zarządzanie roving tabindex w widgetach” jest bezpłatna?
Tak — pełny tekst „Zarządzanie roving tabindex w widgetach” 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 „Zarządzanie roving tabindex w widgetach”?
Umożliwiaj poruszanie się klawiszami strzałek w obrębie złożonej kontrolki. Ć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 4 z 4.
Ile czasu zajmuje lekcja „Zarządzanie roving tabindex w widgetach”?
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