Vzory prístupných komponentov

Karty

Karty s prepínaním šípkami, jedným miestom v poradí Tab a voľbou medzi automatickou a manuálnou aktiváciou.

Komponent
<ad-tabs>
Vzor APG
Tabs
Kritériá WCAG
  • 1.3.1 Informácie a vzájomné vzťahy
  • 2.1.1 Klávesnica
  • 2.4.3 Poradie prechádzania prvkami
  • 2.4.7 Viditeľné zameranie
  • 3.2.2 Vstup používateľa
  • 4.1.2 Názov, funkcia, hodnota

Ukážka

Režim aktivácie kariet

Klávesnica

Zamerajte kartu klávesom Tab a prepínajte šípkami vľavo a vpravo. Home a End skočia na prvú a poslednú kartu. Tab z karty vedie priamo do obsahu.

Čítač obrazovky

Čítač obrazovky oznámi „karta, 1 z 3, vybraná“ a po prechode do panela jeho názov. Nič sa neoznamuje navyše, pretože zmenu vyvolali priamo vy.

Priblíženie

Pri 400 % priblížení sa karty zalomia do viacerých riadkov a panel sa nikdy neoreže. Nič nemá pevnú výšku.

Prečo je to prístupné

Karty sú jeden z najčastejšie pokazených prvkov na webe: často sú to len odkazy nastavené tak, aby vyzerali ako záložky, a klávesnica ani čítač obrazovky nevedia, čo k čomu patrí. Tu má zoznam kariet rolu tablist, každá karta rolu tab a každý panel rolu tabpanel, prepojený s kartou, ktorá ho ovláda. Čítač obrazovky preto oznámi „karta, 1 z 3, vybraná“ a vie, kam viesť ďalej.

V poradí Tab zaberá celá skupina kariet jediné miesto. Medzi kartami sa prepína šípkami, takže používateľ klávesnice nemusí prechádzať cez všetky záložky, aby sa dostal k obsahu. Prepínač v ukážke prepína medzi dvoma režimami z APG: pri automatickej aktivácii šípka rovno zobrazí panel, pri manuálnej len presunie zameranie a panel sa zobrazí až po stlačení Enter. Manuálny režim je správna voľba, keď je prepnutie drahé alebo presúva zameranie ďaleko.

Vyskúšajte si sami

Klávesnica

  • Tab na skupinu kariet, potom ← a → na prepínanie.
  • Home a End skočia na prvú a poslednú kartu.
  • Ďalší Tab vedie priamo do obsahu panela, nie na ďalšiu kartu.
  • Prepnite ukážku na manuálny režim a všimnite si, že šípky už panel nemenia.

Čítač obrazovky

  • Na karte počujete jej názov, rolu, poradie a stav „vybraná“.
  • Po prechode do panela počujete jeho názov, ktorý je rovnaký ako názov karty.

Priblíženie a reflow

  • Pri 400 % priblížení sa záložky zalomia do viacerých riadkov; nič sa neoreže ani nepresunie mimo obrazovku.

Bez JavaScriptu

Zoznam kariet je obyčajný zoznam odkazov na jednotlivé časti a všetky časti sú zobrazené pod sebou. Je to čitateľná stránka, nie prázdne miesto.

Kód

<ad-tabs data-activation="automatic" data-label="Ako to vyskúšať">
  <ul data-tab-links>
    <li><a href="#t-keyboard">Klávesnica</a></li>
    <li><a href="#t-sr">Čítač obrazovky</a></li>
  </ul>
  <section id="t-keyboard"><h3>Klávesnica</h3><p>…</p></section>
  <section id="t-sr"><h3>Čítač obrazovky</h3><p>…</p></section>
</ad-tabs>
<link rel="stylesheet" href="/assets/js/components/ad-tabs/ad-tabs.css">
<script type="module" src="/assets/js/components/ad-tabs/ad-tabs.js"></script>