Akordeón

Rozbaľovacie sekcie postavené na natívnych prvkoch details a summary, s nadpismi v hlavičkách, ovládaním šípkami a animovaným otváraním. Pri tlači sa všetky položky rozbalia.

Komponent
<ad-accordion>
Vzor APG
Accordion
Vybrané kritériá WCAG

Komponent musí spĺňať všetky kritériá WCAG; uvádzame tie, ktoré sa pri ňom porušujú najčastejšie.

Ukážka

Stačí jedno vyhlásenie o prístupnosti za celú organizáciu?

Nie. Vyhlásenie sa vzťahuje na konkrétne webové sídlo alebo mobilnú aplikáciu, preto ich býva viac.

Prečo nepoužívate len automatické nástroje?

Automaty odhalia zhruba 20 až 30 % problémov. Zvyšok vyžaduje človeka: zmysluplnosť alternatívnych textov, poradie zamerania, zrozumiteľnosť chýb.

Ako dlho trvá zhodnotenie prístupnosti?

Podľa rozsahu: orientačné posúdenie niekoľko dní, hĺbkové hodnotenie webového sídla s desiatkami stránok dva až štyri týždne.

Prečo je to prístupné

Najlepšia ARIA je žiadna ARIA. Akordeón je zložený z natívnych prvkov details a summary, ktorým prehliadač sám dáva rolu, názov aj stav „otvorené / zatvorené“. Nič z toho sa nedá pokaziť skriptom, ktorý sa nenačíta. Hlavička každej položky je zároveň nadpis (h3 vnútri summary), podobne ako pri akordeóne na GOV.UK, takže sa objaví aj v zozname nadpisov čítača obrazovky a stránka má súvislú osnovu.

Položky sa nezatvárajú samy. Čo otvoríte, zostane otvorené, kým to sami nezatvoríte, takže si môžete dve odpovede porovnať vedľa seba. Vylepšenie pridáva pohyb šípkami medzi položkami, tlačidlo „Otvoriť všetko“, ktoré sa po otvorení všetkých položiek zmení na „Zatvoriť všetko“, a plynulé otváranie, ktoré je čisto v CSS a rešpektuje nastavenie obmedzeného pohybu. Pri tlači sa všetky položky rozbalia, takže na papieri nič nechýba.

Vyskúšajte si sami

Klávesnica

  • Tab na hlavičku položky, Enter alebo medzerník ju otvorí.
  • ↓ a ↑ presúvajú zameranie medzi hlavičkami, Home a End na prvú a poslednú.
  • Otvorte druhú položku: prvá zostane otvorená.

Čítač obrazovky

  • Hlavička sa oznámi ako nadpis úrovne 3 a ovládací prvok so stavom. NVDA v slovenčine povie napríklad „zatvorené“ alebo „otvorené“; presné znenie závisí od čítača obrazovky, prehliadača a jazyka.
  • Po aktivácii sa stav zmení bez ďalšieho oznamu.
  • Safari s VoiceOver nadpis vnútri summary dlho neoznamoval ako nadpis. Položky sú aj tak plne ovládateľné, len chýbajú v zozname nadpisov.

Priblíženie a reflow

  • Hlavičky majú výšku najmenej 44 px, takže sú pohodlným cieľom aj na dotykovej obrazovke.
  • Obsah nemá pevnú výšku; pri priblížení sa jednoducho predĺži.

Tlač

  • Otvorte náhľad tlače (Ctrl + P): všetky položky sú rozbalené a žiadny obsah sa neoreže.

Bez JavaScriptu

Všetko funguje: položky sa otvárajú a zatvárajú natívne. Chýba iba pohyb šípkami a tlačidlo na hromadné otvorenie. Rozbalenie pri tlači zabezpečí v prehliadačoch s podporou ::details-content samotné CSS; v ostatných ho doplní skript.

Kód

<ad-accordion data-expand-all="Otvoriť všetko" data-collapse-all="Zatvoriť všetko">
  <details>
    <summary><h3>Stačí jedno vyhlásenie o prístupnosti za celú organizáciu?</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 „naraz len jedna otvorená“ je k dispozícii cez atribút exclusive, ale neodporúčame ho: používateľom prekáža, keď sa im obsah zatvára sám.