Vzory přístupných komponent

Harmonika

Rozbalovací sekce postavené na nativních prvcích details a summary, s režimem „najednou jen jedna“ a animovaným otevíráním.

Komponenta
<ad-accordion>
Vzor APG
Accordion
Kritéria WCAG
  • 1.3.1 Informace a vztahy
  • 2.1.1 Klávesnice
  • 2.3.3 Animace vyvolané interakcí
  • 2.4.7 Viditelné zaměření
  • 2.5.8 Velikost cíle (minimální)
  • 4.1.2 Název, role, hodnota

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. Harmonika 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.

Vylepšení přidává tři věci: režim „najednou jen jedna otevřená“ (opět nativně, přes atribut name, takže ostatní položky zavírá prohlížeč), pohyb šipkami mezi položkami a plynulé otevírání, které je čistě v CSS a respektuje nastavení omezeného pohybu.

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í se sama zavře.

Odečítač obrazovky

  • Záhlaví se oznámí jako „sbaleno“ nebo „rozbaleno“ a po aktivaci se stav změní bez dalšího oznámení.

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ží.

Bez JavaScriptu

Vše funguje: položky se otevírají a zavírají nativně. Chybí jen režim „najednou jen jedna“ a pohyb šipkami.

Kód

<ad-accordion exclusive data-expand-all="Rozbalit vše" data-collapse-all="Sbalit vše">
  <details>
    <summary>Stačí jedno prohlášení o přístupnosti za celou organizaci?</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>