Akordeon

Rozbalovací sekce postavené na nativních prvcích details a summary, s nadpisy v záhlavích, ovládáním šipkami a animovaným otevíráním. Při tisku se všechny položky rozbalí.

Komponenta
<ad-accordion>
Vzor APG
Accordion
Vybraná kritéria WCAG

Komponenta musí splňovat všechna kritéria WCAG; uvádíme ta, která se u ní porušují nejčastěji.

Ukázka

Stačí jedno prohlášení o přístupnosti za celou organizaci?

Ne. Prohlášení se vztahuje ke konkrétnímu webu nebo mobilní aplikaci, proto jich bývá více.

Proč nepoužíváte jen automatické nástroje?

Automaty odhalí zhruba 20 až 30 % problémů. Zbytek vyžaduje člověka: smysluplnost alternativních textů, pořadí zaměření, srozumitelnost chyb.

Jak dlouho trvá hodnocení přístupnosti?

Podle rozsahu: orientační posouzení několik dní, hloubkové hodnocení webu s desítkami stránek dva až čtyři týdny.

Proč je to přístupné

Nejlepší ARIA je žádná ARIA. Akordeon je složený z nativních prvků details a summary, kterým prohlížeč sám dává roli, název i stav „rozbaleno / sbaleno“. Nic z toho nelze pokazit skriptem, který se nenačte. Záhlaví každé položky je zároveň nadpis (h3 uvnitř summary), podobně jako u akordeonu na GOV.UK, takže se objeví i v seznamu nadpisů odečítače obrazovky a stránka má souvislou osnovu.

Položky se nezavírají samy. Co otevřete, zůstane otevřené, dokud to sami nezavřete, takže si můžete dvě odpovědi porovnat vedle sebe. Vylepšení přidává pohyb šipkami mezi položkami, tlačítko „Rozbalit vše“, které se po rozbalení všech položek změní na „Sbalit vše“, a plynulé otevírání, které je čistě v CSS a respektuje nastavení omezeného pohybu. Při tisku se všechny položky rozbalí, takže na papíře nic nechybí.

Vyzkoušejte si sami

Klávesnice

  • Tab na záhlaví položky, Enter nebo mezerník ji otevře.
  • ↓ a ↑ přesouvají zaměření mezi záhlavími, Home a End na první a poslední.
  • Otevřete druhou položku: první zůstane otevřená.

Odečítač obrazovky

  • Záhlaví se oznámí jako nadpis úrovně 3 a ovládací prvek se stavem. NVDA v češtině řekne například „sbaleno“ nebo „rozbaleno“; přesné znění závisí na odečítači obrazovky, prohlížeči a jazyku.
  • Po aktivaci se stav změní bez dalšího oznámení.
  • Safari s VoiceOver nadpis uvnitř summary dlouho neoznamovalo jako nadpis. Položky jsou i tak plně ovladatelné, jen chybí v seznamu nadpisů.

Zvětšení a přizpůsobení obsahu

  • Záhlaví mají výšku alespoň 44 px, takže jsou pohodlným cílem i na dotykové obrazovce.
  • Obsah nemá pevnou výšku; při zvětšení se jednoduše prodlouží.

Tisk

  • Otevřete náhled tisku (Ctrl + P): všechny položky jsou rozbalené a žádný obsah se neořízne.

Bez JavaScriptu

Vše funguje: položky se otevírají a zavírají nativně. Chybí jen pohyb šipkami a tlačítko pro hromadné rozbalení. Rozbalení při tisku zajistí v prohlížečích s podporou ::details-content samotné CSS; v ostatních ho doplní skript.

Kód

<ad-accordion data-expand-all="Rozbalit vše" data-collapse-all="Sbalit vše">
  <details>
    <summary><h3>Stačí jedno prohlášení o přístupnosti za celou organizaci?</h3></summary>
    <div><p>…</p></div>
  </details>
  <details>…</details>
</ad-accordion>
<link rel="stylesheet" href="/assets/js/components/ad-accordion/ad-accordion.css">
<script type="module" src="/assets/js/components/ad-accordion/ad-accordion.js"></script>

Režim „najednou jen jedna otevřená“ je k dispozici přes atribut exclusive, ale nedoporučujeme ho: uživatelům vadí, když se jim obsah zavírá sám.