Vzory přístupných komponent

Karty

Karty s přepínáním šipkami, jedním místem v pořadí Tab a volbou mezi automatickou a manuální aktivací.

Komponenta
<ad-tabs>
Vzor APG
Tabs
Kritéria WCAG
  • 1.3.1 Informace a vztahy
  • 2.1.1 Klávesnice
  • 2.4.3 Pořadí zaměření
  • 2.4.7 Viditelné zaměření
  • 3.2.2 Při zadávání vstupu
  • 4.1.2 Název, role, hodnota

Ukázka

Režim aktivace karet

Klávesnice

Zaměřte kartu klávesou Tab a přepínejte šipkami vlevo a vpravo. Home a End skočí na první a poslední kartu. Tab z karty vede přímo do obsahu.

Odečítač obrazovky

Odečítač obrazovky oznámí „karta, 1 ze 3, vybraná“ a po přechodu do panelu jeho název. Nic dalšího se neoznamuje, protože změnu jste vyvolali sami.

Zvětšení

Při 400% zvětšení se karty zalomí do více řádků a panel se nikdy neořízne. Nic nemá pevnou výšku.

Proč je to přístupné

Karty jsou jeden z nejčastěji pokažených prvků na webu: často jsou to jen odkazy nastavené tak, aby vypadaly jako záložky, a klávesnice ani odečítač obrazovky nevědí, co k čemu patří. Tady má seznam karet roli tablist, každá karta roli tab a každý panel roli tabpanel, propojený s kartou, která ho ovládá. Odečítač obrazovky proto oznámí „karta, 1 ze 3, vybraná“ a ví, kam vést dál.

V pořadí Tab zabírá celá skupina karet jediné místo. Mezi kartami se přepíná šipkami, takže uživatel klávesnice nemusí procházet přes všechny záložky, aby se dostal k obsahu. Přepínač v ukázce přepíná mezi dvěma režimy z APG: při automatické aktivaci šipka rovnou zobrazí panel, při manuální jen přesune zaměření a panel se zobrazí až po stisknutí Enter. Manuální režim je správná volba, když je přepnutí drahé nebo přesouvá zaměření daleko.

Vyzkoušejte si sami

Klávesnice

  • Tab na skupinu karet, potom ← a → pro přepínání.
  • Home a End skočí na první a poslední kartu.
  • Další Tab vede přímo do obsahu panelu, ne na další kartu.
  • Přepněte ukázku na manuální režim a všimněte si, že šipky už panel nemění.

Odečítač obrazovky

  • Na kartě uslyšíte její název, roli, pořadí a stav „vybraná“.
  • Po přechodu do panelu uslyšíte jeho název, který je stejný jako název karty.

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

  • Při 400% zvětšení se záložky zalomí do více řádků; nic se neořeže ani nepřesune mimo obrazovku.

Bez JavaScriptu

Seznam karet je obyčejný seznam odkazů na jednotlivé části a všechny části jsou zobrazené pod sebou. Je to čitelná stránka, ne prázdné místo.

Kód

<ad-tabs data-activation="automatic" data-label="Jak to vyzkoušet">
  <ul data-tab-links>
    <li><a href="#t-keyboard">Klávesnice</a></li>
    <li><a href="#t-sr">Odečítač obrazovky</a></li>
  </ul>
  <section id="t-keyboard"><h3>Klávesnice</h3><p>…</p></section>
  <section id="t-sr"><h3>Odečí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>