Dostępny akordeon i zakładki w JavaScript: kod do skopiowania | We.Inc
Akordeon w czystym JavaScript z animowaną wysokością i aria-expanded oraz zakładki obsługiwane strzałkami z roving tabindex. Oba działają na żywo na stronie, z listą kontrolną klawiatury i tabelą ARIA.
Dostępny akordeon używa prawdziwego przycisku w każdym nagłówku, z aria-expanded pokazującym, czy panel jest otwarty, i aria-controls wskazującym panel. Dostępne zakładki używają role=tablist, tab i tabpanel z aria-selected, a między zakładkami przechodzi się strzałkami, przy czym w kolejności Tab zostaje tylko wybrana zakładka. Obie demonstracje poniżej działają na żywo.
Czego użyć
Użyj
Kiedy
Akordeon
Długie strony z pytaniami, gdzie ludzie mogą czytać kilka odpowiedzi
Zakładki
Kilka widoków tej samej rzeczy, czytanych po jednym
details i summary
Proste pokazywanie i ukrywanie bez żadnego JavaScript
Każda demonstracja to jeden samodzielny blok HTML, CSS i JavaScript. Edytuj go, a wynik uruchomi się ponownie. Potem odłóż mysz i przetestuj go klawiaturą według listy kontrolnej niżej.
Skopiuj do swojej strony blok potrzebnego komponentu.
Zmień tekst, dbając o to, by każde id było unikalne na stronie.
Przetestuj klawiaturą: Tab, Enter, Space, strzałki, Home i End.
Przetestuj czytnikiem ekranu: powinien mówić rozwinięte lub zwinięte albo zakładka 2 z 3.
Sprawdź stronę z włączonym ograniczeniem ruchu; panele powinny otwierać się bez animacji.
Trzymaj przycisk wewnątrz nagłówka, zamiast robić klikalny nagłówek; nagłówki nie przyjmują fokusu i nie ogłaszają stanu.
Używaj atrybutu hidden na zamkniętych panelach, aby do ich linków nie dało się przejść klawiszem Tab.
Nie umieszczaj zakładek w zakładkach ani akordeonów w zakładkach; ludzie tracą orientację, gdzie są.
Jeśli odpowiedzi są ważne dla wyszukiwarek, zostaw je w HTML (ukryte, a nie wczytywane później), aby roboty i ludzie widzieli ten sam tekst.
Najczęściej zadawane pytania
Czy zakładki powinny przełączać się strzałką czy Enterem?
Przewodnik ARIA dopuszcza oba sposoby. Przełączanie wraz z ruchem strzałki (aktywacja automatyczna) jest najszybsze, gdy panele są już wczytane. Jeśli pokazanie panelu trwa długo, przesuwaj fokus strzałkami, a przełączaj Enterem lub Space.
Jak animować wysokość akordeonu bez mierzenia jej w JavaScript?
Zrób z panelu siatkę i animuj grid-template-rows od 0fr do 1fr, z wewnętrznym elementem z ukrytym overflow. Przeglądarka sama obliczy wysokość.
Czy element details jest dostępny?
Tak. Przeglądarki udostępniają summary jako przycisk ze stanem rozwinięcia i od razu działa on z klawiaturą. Trudniej jest ostylować znacznik i go animować, dlatego wiele stron nadal buduje własne rozwiązania.
Czy ukryte odpowiedzi w akordeonie liczą się dla SEO?
Treść, która jest w HTML, ale zwinięta, nadal jest indeksowana. Trzymaj ją w źródle strony, zamiast wczytywać po kliknięciu, i upewnij się, że widoczna odpowiedź zgadza się z tym, co jest w HTML.
Co dalej
Jeśli pracujesz w React, nasza galeria komponentów ma zestaw zakładek z przesuwanym podkreśleniem i akordeon FAQ, oba z kodem JSX do skopiowania. Do sekcji FAQ dodawaj pasujące dane strukturalne FAQPage tylko wtedy, gdy pytania i odpowiedzi są widoczne na stronie.
Częste błędy
Używanie elementów div z obsługą kliknięcia jako nagłówków akordeonu. Nie da się do nich dojść klawiszem Tab, a czytniki ekranu nie wiedzą, że cokolwiek robią.
Umieszczanie każdej zakładki w kolejności Tab, co zmusza użytkowników klawiatury do przejścia przez wszystkie, zanim dotrą do treści.
Zapominanie o aktualizacji aria-expanded lub aria-selected przy zmianie stanu, przez co czytnik ekranu podaje złą informację.
Akordeon
Dostępny akordeon z animowaną wysokością
Każdy nagłówek zawiera prawdziwy przycisk z aria-expanded i aria-controls. Wysokość animuje się przez przejście grid-rows, więc nie trzeba mierzyć scrollHeight. Wypróbuj go klawiszami Tab, Enter i Space.
Tylko jeden otwarty panel naraz
Gdy panel się otwiera, zamknij każdy inny otwarty. Niech to będzie opcjonalne: ludzie porównujący dwie odpowiedzi często chcą mieć obie otwarte.
Wersja bez JavaScript: details i summary
Natywne elementy details otwierają się i zamykają bez skryptu. Nadanie im tego samego atrybutu name sprawia, że w obecnych przeglądarkach wykluczają się wzajemnie; starsze po prostu pozwalają otworzyć kilka.
Zakładki
Zakładki z roving tabindex i strzałkami
Tylko wybrana zakładka ma tabindex 0, więc Tab wchodzi do listy zakładek raz, a potem przechodzi do panelu. Strzałki w lewo i w prawo przechodzą między zakładkami, Home i End skaczą na końce.
Lista kontrolna klawiatury i ARIA
Test klawiatury: wypróbuj każdy w demonstracjach
Klawisz
Akordeon
Zakładki
Tab
Przechodzi do następnego przycisku nagłówka
Wchodzi do listy zakładek na wybranej zakładce, potem przechodzi do panelu
Shift + Tab
Przechodzi do poprzedniego przycisku nagłówka
Wychodzi z powrotem z listy zakładek
Enter lub Space
Otwiera lub zamyka panel z fokusem
Wybiera zakładkę z fokusem (potrzebne tylko przy aktywacji ręcznej)
Strzałka w prawo / w lewo
Niewymagane
Następna / poprzednia zakładka, z zawijaniem
Home / End
Opcjonalnie: pierwszy / ostatni nagłówek
Pierwsza / ostatnia zakładka
Ściąga ARIA
Atrybuty potrzebne każdej części
Element
Akordeon
Zakładki
Wyzwalacz
button w nagłówku, aria-expanded, aria-controls
role=tab, aria-selected, aria-controls, tabindex 0 lub -1
Kontener
Nic nie jest wymagane
role=tablist z aria-label
Panel
id; role=region z aria-labelledby jest opcjonalne
role=tabpanel, aria-labelledby, tabindex 0, jeśli nie ma treści przyjmującej fokus