Dostępny akordeon

Akordeony porządkują długie strony: FAQ, dostawa i zwroty, szczegóły produktu, grupy filtrów. APG definiuje je jako „pionowo ułożony zestaw interaktywnych nagłówków, z których każdy zawiera tytuł, fragment treści lub miniaturę reprezentującą sekcję treści” – nagłówki pokazują lub ukrywają swoje panele. Ta strona pokazuje poprawny kod. Należy do serii dostępne wzorce interfejsu.

Kiedy użyć akordeonu

• Kilka niezależnych sekcji, z których użytkownik potrzebuje tylko jednej lub dwóch: FAQ, rozmiary i pielęgnacja, dostawa i zwroty.
• Układy mobilne, w których zakładki się nie mieszczą.
• Grupy filtrów w bocznym panelu kategorii.

Nie należy chować w zamkniętym panelu informacji niezbędnych większości użytkowników – cena, dostępność i podstawowe dane produktu powinny być na otwartej stronie.

Kryteria WCAG

• 4.1.2 Nazwa, rola, wartość (A): każdy nagłówek jest przyciskiem ze stanem rozwinięty lub zwinięty.
• 1.3.1 Informacje i relacje (A): tytuły sekcji to prawdziwe nagłówki.
• 2.4.6 Nagłówki i etykiety (AA): nagłówki opisują swoją sekcję.
• 2.1.1 Klawiatura (A) i 2.4.7 Widoczny fokus (AA).
• 1.4.11 Kontrast elementów nietekstowych (AA): ikona plusa lub strzałki pokazująca stan wymaga kontrastu 3:1.
• 2.5.8 Rozmiar celu (minimum) (AA): celem jest cały wiersz nagłówka, a nie tylko ikona.

Przykład kodu

<!-- Akordeon z APG: nagłówek > przycisk, panel sterowany przyciskiem -->
<h3>
  <button type="button" id="acc-shipping" aria-expanded="true" aria-controls="panel-shipping">
    Dostawa
  </button>
</h3>
<div id="panel-shipping">
  <p>Zamówienia złożone przed godz. 14:00 wysyłamy w ten sam dzień roboczy.</p>
</div>

<h3>
  <button type="button" id="acc-returns" aria-expanded="false" aria-controls="panel-returns">
    Zwroty
  </button>
</h3>
<div id="panel-returns" hidden>
  <p>Towar można zwrócić w ciągu 30 dni.</p>
</div>

<!-- Natywna alternatywa dla niezależnych sekcji -->
<details>
  <summary>Pielęgnacja</summary>
  <p>Prać w pralce w temperaturze 30 °C.</p>
</details>

Uwagi z wzorca akordeonu APG:

• Tytuł każdego nagłówka znajduje się w elemencie z rolą button, który jest ujęty w nagłówek odpowiedniego poziomu, a przycisk „jest jedynym elementem wewnątrz nagłówka”.
• aria-expanded ma wartość true, gdy panel jest widoczny, i false, gdy jest ukryty; aria-controls wskazuje panel.
• Jeśli panel jest otwarty, a akordeon nie pozwala go zwinąć, jego przycisk ma aria-disabled="true".
• Każdy panel może mieć role="region" z aria-labelledby wskazującym jego przycisk. To opcjonalne, a APG odradza to, gdy jednocześnie może być rozwiniętych wiele paneli (około sześciu lub więcej), bo powstaje zbyt wiele landmarków.
• Skrypt przełącza aria-expanded i atrybut hidden. Strzałkę należy obracać w CSS na podstawie [aria-expanded="true"], aby wygląd nie rozjechał się ze stanem.

details i summary dają przycisk, stan i obsługę klawiatury bez żadnego skryptu. Dobrze pasują do FAQ i instrukcji pielęgnacji; wersji z ARIA warto użyć, gdy tytuły sekcji muszą być także nagłówkami w strukturze strony.

Obsługa klawiaturą

Z wzorca akordeonu APG:

Typowe błędy w sklepach internetowych

• Klikalne nagłówki div z ikoną strzałki – bez przycisku, bez stanu, bez obsługi klawiatury.
• Nagłówek wewnątrz przycisku albo przycisk obejmujący cały panel, co psuje strukturę nagłówków.
• aria-expanded ustawione raz i nigdy nieaktualizowane.
• Zamknięte panele ukryte przez max-height: 0, których linki nadal otrzymują fokus.
• Pytania FAQ ostylowane jak nagłówki, ale oznaczone jako p lub span, albo nagłówki pomijające poziomy.
• Klikalna jest tylko mała ikona „+”, a nie tytuł.
• Akordeony filtrów przeładowujące stronę po otwarciu, co gubi fokus.

Co wychwytuje kontrola automatyczna, a co wymaga testu ręcznego

Wszystkie to karty z naszej biblioteki reguł. Test ręczny: proszę otworzyć i zamknąć każdą sekcję klawiszami Enter i Spacja, sprawdzić, czy czytnik ekranu ogłasza „zwinięte” i „rozwinięte”, czy zamknięte panele nie przyjmują fokusu oraz czy ikona stanu jest widoczna w obu motywach i przy powiększeniu 200%.

Darmowa kontrola jednej strony to automatyczna kontrola, a nie pełny audyt.

Najczęstsze pytania

Jak zbudować dostępny akordeon?

Każdy tytuł sekcji należy umieścić w nagłówku, a wewnątrz nagłówka dać przycisk z aria-expanded i aria-controls, który pokazuje lub ukrywa panel. To wzorzec akordeonu z APG. Prostszą alternatywą dla niezależnych sekcji są natywne elementy details i summary.

Jakich klawiszy potrzebuje akordeon?

Enter lub Spacja na przycisku nagłówka otwiera albo zamyka jego panel, a Tab i Shift + Tab przechodzą przez nagłówki i ewentualne linki w otwartych panelach. Strzałki nie są wymagane.

Czy każdy panel akordeonu powinien mieć role="region"?

To opcjonalne. APG zaleca unikać tej roli, gdy jednocześnie może być otwartych wiele paneli, około sześciu lub więcej, ponieważ powstaje zbyt wiele punktów orientacyjnych (landmarków).

Czy treść w zamkniętym panelu to problem dla dostępności?

Nie, o ile przycisk jest osiągalny i ogłasza swój stan. Treść musi być poprawnie ukryta, np. atrybutem hidden, aby w stanie zamkniętym nie mogła otrzymać fokusu.

Czy kontrola automatyczna przetestuje akordeon?

Znajduje przyciski nagłówków lub elementy summary bez nazwy, puste nagłówki, nieprawidłowe wartości aria-expanded i aria-controls wskazujące brakujące identyfikatory. To, czy stan się zmienia, a panel otwiera się z klawiatury, wymaga testu ręcznego.

Źródła

• W3C WAI, APG Accordion pattern: https://www.w3.org/WAI/ARIA/apg/patterns/accordion/
• W3C WAI, APG Disclosure pattern: https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/
• WHATWG, HTML Living Standard, interactive elements (details and summary): https://html.spec.whatwg.org/multipage/interactive-elements.html