Přístupný akordeon

Akordeony drží dlouhé stránky přehledné: FAQ, doprava a vrácení zboží, podrobnosti o produktu, skupiny filtrů. APG ho definuje jako „svisle naskládanou sadu interaktivních nadpisů, z nichž každý obsahuje název, úryvek obsahu nebo náhled představující sekci obsahu“ — nadpisy zobrazují nebo skrývají své panely. Tato stránka ukazuje správný kód. Je součástí série přístupné vzory UI.

Kdy akordeon použít

• Několik nezávislých sekcí, z nichž uživatelé chtějí jen jednu nebo dvě: FAQ, velikosti a péče, doprava a vrácení.
• Mobilní rozvržení, kam se záložky nevejdou.
• Skupiny filtrů v postranním panelu kategorie.

Neskrývejte v zavřeném panelu podstatné informace, které potřebuje většina uživatelů — cena, dostupnost a hlavní údaje o produktu patří na otevřenou stránku.

Související kritéria WCAG

• 4.1.2 Název, role, hodnota (A): každé záhlaví je tlačítko se stavem rozbaleno nebo sbaleno.
• 1.3.1 Informace a vztahy (A): názvy sekcí jsou skutečné nadpisy.
• 2.4.6 Nadpisy a popisky (AA): nadpisy popisují svou sekci.
• 2.1.1 Klávesnice (A) a 2.4.7 Viditelný fokus (AA).
• 1.4.11 Netextový kontrast (AA): ikona plus nebo šipka, která ukazuje stav, potřebuje 3:1.
• 2.5.8 Velikost cíle (minimum) (AA): cílem je celý řádek záhlaví, ne jen ikona.

Příklad kódu

<!-- Akordeon podle APG: nadpis > tlačítko, panel ovládaný tlačítkem -->
<h3>
  <button type="button" id="acc-shipping" aria-expanded="true" aria-controls="panel-shipping">
    Doprava a doručení
  </button>
</h3>
<div id="panel-shipping">
  <p>Objednávky přijaté do 14:00 odesíláme ještě týž pracovní den.</p>
</div>

<h3>
  <button type="button" id="acc-returns" aria-expanded="false" aria-controls="panel-returns">
    Vrácení zboží
  </button>
</h3>
<div id="panel-returns" hidden>
  <p>Zboží můžete vrátit do 30 dnů.</p>
</div>

<!-- Nativní alternativa pro nezávislé sekce -->
<details>
  <summary>Pokyny k údržbě</summary>
  <p>Prát v pračce na 30 °C.</p>
</details>

Poznámky ze vzoru akordeonu v APG:

• Název každého záhlaví je v prvku s rolí button, který je obalený nadpisem vhodné úrovně, a tlačítko „je jediným prvkem uvnitř nadpisu“.
• aria-expanded má hodnotu true, když je panel viditelný, a false, když je skrytý; aria-controls odkazuje na panel.
• Pokud je panel otevřený a akordeon nedovoluje ho sbalit, má jeho tlačítko aria-disabled="true".
• Každý panel může mít role="region" s aria-labelledby odkazujícím na jeho tlačítko. Je to volitelné a APG to nedoporučuje, když lze rozbalit hodně panelů najednou (zhruba šest a víc), protože vznikne příliš mnoho orientačních bodů.
• Skript přepíná aria-expanded a atribut hidden. Šipku otáčejte v CSS podle [aria-expanded="true"], aby se vizuální stav nemohl rozejít se skutečným.

details a summary vám dají tlačítko, stav i chování klávesnice bez jakéhokoli skriptu. Hodí se pro FAQ a pokyny k údržbě; verzi s ARIA použijte, když názvy sekcí musí být zároveň nadpisy ve struktuře stránky.

Ovládání klávesnicí

Podle vzoru akordeonu v APG:

Časté chyby v e-shopech

• Klikací záhlaví z prvků div s ikonou šipky — žádné tlačítko, žádný stav, žádná klávesnice.
• Nadpis uvnitř tlačítka nebo tlačítko obalující celý panel, což rozbije strukturu nadpisů.
• aria-expanded nastavené jednou a nikdy neaktualizované.
• Zavřené panely skryté pomocí max-height: 0, jejichž odkazy ale dál dostávají fokus.
• Otázky FAQ vypadající jako nadpisy, ale v kódu jako p nebo span, případně nadpisy, které přeskakují úrovně.
• Klikací je jen malá ikona „+“, ne název.
• Akordeony filtrů, které po otevření znovu načtou stránku, takže se ztratí fokus.

Co najde automatizovaná kontrola a co ruční testování

Všechna jsou kartami v naší knihovně pravidel. Ruční testování: otevřete a zavřete každou sekci klávesou Enter a mezerníkem, ověřte, že čtečka obrazovky oznámí „sbaleno“ a „rozbaleno“, že zavřené panely nemohou získat fokus a že ikona stavu je vidět v obou motivech i při přiblížení na 200 %.

Spusťte bezplatnou kontrolu jedné stránky. Je to automatizovaná kontrola, nikoli úplný audit.

Časté otázky

Jak postavit přístupný akordeon?

Název každé sekce dejte do nadpisu a do nadpisu vložte tlačítko s aria-expanded a aria-controls, které panel zobrazí nebo skryje. To je vzor akordeonu podle APG. Nativní prvky details a summary jsou jednodušší alternativou pro nezávislé sekce.

Které klávesy akordeon potřebuje?

Enter nebo mezerník na tlačítku v záhlaví otevře nebo zavře jeho panel; Tab a Shift + Tab procházejí záhlavími a odkazy v otevřených panelech. Šipky nejsou potřeba.

Má mít každý panel akordeonu role="region"?

Je to volitelné. APG radí se mu vyhnout, když může být otevřeno víc panelů zároveň, zhruba šest a víc, protože vznikne příliš mnoho orientačních bodů (landmarks).

Je obsah v zavřeném panelu problém pro přístupnost?

Ne, obsah v zavřeném panelu nevadí, pokud je tlačítko dosažitelné a oznamuje svůj stav. Obsah musí být správně skrytý, například atributem hidden, aby v zavřeném stavu nemohl získat fokus.

Dokáže automatizovaná kontrola otestovat akordeon?

Najde tlačítka v záhlavích nebo prvky summary bez názvu, prázdné nadpisy, neplatné hodnoty aria-expanded a aria-controls odkazující na neexistující ID. Zda se stav mění a panel se otevře klávesnicí, je potřeba otestovat ručně.

Zdroje

• 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