Wzorzec kart: tablist, tab, tabpanel
Połącz trzy role wymagane przez zestaw kart.
Wzorzec kart: tablist, tab, tabpanel 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.
Czym naprawdę jest zestaw kart
Zestaw kart wyświetla jeden panel naraz i pozwala użytkownikom przełączać się między nimi. Dla technologii asystujących musi wyglądać jak jeden komponent, a nie zbiór luźnych linków.
Trzy role współpracują ze sobą
Ten wzorzec opiera się na trzech rolach ARIA: tablist, który zawiera karty, każdej karcie oraz panelu wyświetlanym przez daną kartę. Wszystkie trzy muszą być użyte prawidłowo.
Kontener to tablist
Umieść wiersz kart w elemencie z role="tablist". Informuje to czytniki ekranu, że znajdujące się w środku elementy tworzą powiązany zestaw kart.
<div role="tablist">...</div>Każda karta jest przyciskiem
Zbuduj każdą kartę z prawdziwego button z role="tab". Przycisk domyślnie może otrzymać fokus i zostać kliknięty, więc nie trzeba dodawać dodatkowej obsługi.
<button role="tab">Profile</button>Panel to tabpanel
Treści wyświetlane przez poszczególne karty otrzymują role="tabpanel". Oznacza to, że są obszarem kontrolowanym przez aktualnie wybraną kartę.
<div role="tabpanel">Profile details</div>Oznacz wybraną kartę
Ustaw aria-selected="true" na aktywnej karcie, a na pozostałych ustaw false. Czytniki ekranu ogłoszą, która karta jest obecnie wybrana.
<button role="tab" aria-selected="true">Profile</button>Połącz kartę z jej panelem
Wskaż panel każdej karty za pomocą aria-controls, ustawiając wartość równą identyfikatorowi panelu. Użytkownicy dowiedzą się, który obszar otwiera dana karta.
<button role="tab" aria-controls="p1">Profile</button>Nadaj panelowi nazwę na podstawie jego karty
Dodaj panelowi aria-labelledby wskazujące z powrotem na jego kartę. Panel wykorzysta wtedy tekst karty jako swoją dostępną nazwę.
<div role="tabpanel" aria-labelledby="tab1">...</div>Ukryj nieaktywne panele
Jednocześnie powinien być widoczny tylko jeden panel. Dodaj atrybut hidden do paneli, których karta nie jest wybrana, aby nie były obecne na stronie.
<div role="tabpanel" hidden>...</div>Nadaj tablist etykietę
Tablist powinien mieć element aria-label opisujący jego przeznaczenie, na przykład „Ustawienia konta”. Użytkownicy usłyszą, do czego służy cały zestaw kart.
<div role="tablist" aria-label="Account settings">...</div>Jak to brzmi w praktyce
Po połączeniu wszystkich elementów czytnik ekranu ogłosi coś w rodzaju Profil, karta, wybrana, 1 z 3. Taka orientacja sprawia, że karty są użyteczne.
Szybkie sprawdzenie
Konfigurujesz kontener zawierający wiersz kart. Która rola powinna się na nim znaleźć?
Podsumowanie: wzorzec kart
Dowiedziałeś się, że zestaw tworzą elementy tablist, tab, tabpanel. Oznacz wybraną kartę, połącz każdą kartę z panelem i ukryj nieaktywne panele.
Często zadawane pytania
Czy lekcja „Wzorzec kart: tablist, tab, tabpanel” jest bezpłatna?
Tak — pełny tekst „Wzorzec kart: tablist, tab, tabpanel” 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 „Wzorzec kart: tablist, tab, tabpanel”?
Połącz trzy role wymagane przez zestaw kart. Ć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 „Wzorzec kart: tablist, tab, tabpanel”?
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