Záložky

Proč je to přístupné

Záložky jsou jeden z nejčastěji pokažených prvků na webu: často jsou to jen odkazy nastylované tak, aby vypadaly jako záložky, a klávesnice ani odečítač obrazovky nevědí, co k čemu patří. Tady má seznam záložek roli tablist, každá záložka roli tab a každý panel roli tabpanel, propojený se záložkou, která ho ovládá. Odečítač obrazovky proto ví, kam vést dál: NVDA v češtině oznámí například „Klávesnice, záložka, vybráno, 1 ze 3“. Přesné znění závisí na odečítači obrazovky, prohlížeči a jazyku.

V pořadí Tab zabírá celá skupina záložek jediné místo. Mezi záložkami 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.

Kdy záložky použít

• Nejvýše pět až šest záložek. Větší počet se na užší obrazovce zalomí do více řádků, popisky se začnou zkracovat a uživatel ztrácí přehled o tom, která záložka je aktivní. Pokud jich potřebujete víc, obsah patří na samostatné stránky nebo do akordeonu.
• Krátké popisky z jednoho až dvou slov, které se nikdy nezkracují třemi tečkami.
• Panely jsou rovnocenné pohledy na tentýž druh obsahu, například Klávesnice, Odečítač obrazovky a Zvětšení. Na kroky postupu patří průvodce s tlačítky Další a Zpět; na obsah, který má uživatel porovnávat, patří sloupce nebo tabulka.
• Do neaktivního panelu nepatří klíčové informace, například ceny nebo podmínky. Co je v neaktivním panelu, většina uživatelů nikdy neuvidí.
• Záložky se nevkládají do záložek a jejich pořadí se během používání nemění. Při načtení je vybraná první záložka, případně ta, na kterou ukazuje adresa stránky.
• Při tisku se seznam záložek skryje a všechny panely se vytisknou pod sebou i s nadpisy, aby na papíře nic nechybělo.

Vyzkoušejte si sami

Klávesnice

• Tab na skupinu záložek, potom ← a → pro přepínání.
• Home a End skočí na první a poslední záložku.
• Další Tab vede přímo do obsahu panelu, ne na další záložku.
• 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 záložce uslyšíte její název, roli, stav „vybráno“ a pořadí.
• Po přechodu do panelu uslyšíte jeho název, který je stejný jako název záložky.

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.

Tisk

• Otevřete náhled tisku (Ctrl + P): seznam záložek zmizí a všechny tři panely jsou vytištěné pod sebou.

Bez JavaScriptu

Seznam záložek 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>