Nawigacja między kartami za pomocą klawiszy strzałek
Umożliw użytkownikom przechodzenie między kartami za pomocą klawiatury.
Nawigacja między kartami za pomocą klawiszy strzałek to bezpłatna lekcja Web Accessibility Academy na CoddyKit. To lekcja 2 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.
Karty to nie tylko klikanie
Poprawny zestaw kart obsługuje klawiaturę, a nie tylko mysz. Wzorzec APG zakłada używanie klawiszy strzałek do przemieszczania się między kartami.
Tablist jest jednym miejscem zatrzymania klawisza Tab
Naciśnięcie klawisza Tab powinno przenieść fokus na zestaw kart tylko raz, a nie zatrzymywać go na każdej karcie. Cały tablist działa jako jedno miejsce zatrzymania w kolejności strony.
Tylko jedna karta może otrzymać fokus klawiszem Tab
Aktywnej karcie nadaj tabindex="0", a każdej pozostałej tabindex="-1". To tak zwany ruchomy tabindex, który zapobiega przechodzeniu klawiszem Tab przez wszystkie karty.
<button role="tab" tabindex="0">Profile</button>Klawisze strzałek przenoszą fokus
W poziomym tablist elementy Right i Left arrows przenoszą fokus z jednej karty na drugą. W ten sposób użytkownicy klawiatury przeglądają zestaw.
W kartach pionowych używaj góra–dół
Jeśli karty są ułożone pionowo, używaj zamiast tego Up i Down arrows. Ustaw aria-orientation="vertical", aby technologie asystujące znały układ.
<div role="tablist" aria-orientation="vertical">...</div>Zawijaj na końcach
Gdy fokus znajduje się na ostatniej karcie i użytkownik naciśnie kolejną strzałkę, zawróć do pierwszej. Zapętlenie sprawia, że nawigacja jest płynna i przewidywalna.
Home i End przenoszą daleko
Dodaj dwa skróty: Home przenosi fokus na pierwszą kartę, a End na ostatnią. Nawigowanie po długich zestawach kart staje się znacznie szybsze.
Przenoszenie roving index
Gdy strzałka przeniesie fokus, zaktualizuj tabindex: ustaw wartość 0 dla nowo zaznaczonej karty, a dla poprzedniej ustaw -1, a następnie wywołaj na niej focus.
newTab.tabIndex = 0; oldTab.tabIndex = -1; newTab.focus();Automatyczna aktywacja
Przy automatycznej aktywacji skupienie fokusu na karcie również ją zaznacza i wyświetla jej panel. Daje to natychmiastowy efekt, ale może być obciążające, jeśli wyświetlanie paneli jest kosztowne.
Ręczna aktywacja
Przy ręcznej aktywacji klawisze strzałek tylko przenoszą fokus; użytkownik naciska Enter lub Spację, aby zaznaczyć kartę. Wybierz tę opcję, gdy wyświetlanie panelu jest kosztowne.
Dlaczego to ma znaczenie
Bez obsługi klawiszy strzałek użytkownicy klawiatury muszą przechodzić klawiszem Tab przez każdą kartę i każdy panel. Właściwa obsługa klawiszy sprawia, że widżet jest wydajny, a nie tylko osiągalny.
Szybkie sprawdzenie
Fokus znajduje się na karcie w poziomym tablist. Użytkownik naciska strzałkę w prawo. Co powinno się stać?
Podsumowanie: nawigacja strzałkami
Dowiedziałeś się, że karty używają mechanizmu roving tabindex z klawiszami strzałek oraz Home i End. Wybierz automatyczną lub ręczną aktywację zależnie od kosztu wyświetlania panelu.
Często zadawane pytania
Czy lekcja „Nawigacja między kartami za pomocą klawiszy strzałek” jest bezpłatna?
Tak — pełny tekst „Nawigacja między kartami za pomocą klawiszy strzałek” 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 „Nawigacja między kartami za pomocą klawiszy strzałek”?
Umożliw użytkownikom przechodzenie między kartami za pomocą klawiatury. Ć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 2 z 4.
Ile czasu zajmuje lekcja „Nawigacja między kartami za pomocą klawiszy strzałek”?
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
- Wzorzec kart: tablist, tab, tabpanel
- Nawigacja między kartami za pomocą klawiszy strzałek
- Akordeony z button i aria-expanded
- Mechanizm ujawniania czy karty: wybierz właściwy