Vzory prístupných komponentov

Harmonika

Rozbaľovacie sekcie postavené na natívnych prvkoch details a summary, s režimom „naraz len jedna“ a animovaným otváraním.

Komponent
<ad-accordion>
Vzor APG
Accordion
Kritériá WCAG
  • 1.3.1 Informácie a vzájomné vzťahy
  • 2.1.1 Klávesnica
  • 2.3.3 Animácie z interakcií
  • 2.4.7 Viditeľné zameranie
  • 2.5.8 Veľkosť cieľa (minimálna)
  • 4.1.2 Názov, funkcia, hodnota

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. Harmonika je zložená z natívnych prvkov details a summary, ktorým prehliadač sám dáva rolu, názov aj stav „rozbalené / zbalené“. Nič z toho sa nedá pokaziť skriptom, ktorý sa nenačíta.

Vylepšenie pridáva tri veci: režim „naraz len jedna otvorená“ (opäť natívne, cez atribút name, takže ostatné položky zatvára prehliadač), pohyb šípkami medzi položkami a plynulé otváranie, ktoré je čisto v CSS a rešpektuje nastavenie obmedzeného pohybu.

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á sa sama zavrie.

Čítač obrazovky

  • Hlavička sa oznámi ako „zbalené“ alebo „rozbalené“ a po aktivácii sa stav zmení bez ďalšieho oznamu.

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.

Bez JavaScriptu

Všetko funguje: položky sa otvárajú a zatvárajú natívne. Chýba iba režim „naraz len jedna“ a pohyb šípkami.

Kód

<ad-accordion exclusive data-expand-all="Rozbaliť všetko" data-collapse-all="Zbaliť všetko">
  <details>
    <summary>Stačí jedno vyhlásenie o prístupnosti za právny subjekt?</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>