Záložky

Prečo je to prístupné

Záložky sú jeden z najčastejšie pokazených prvkov na webe: často sú to len odkazy naštylované tak, aby vyzerali ako záložky, a klávesnica ani čítač obrazovky nevedia, čo k čomu patrí. Tu má zoznam záložiek rolu tablist, každá záložka rolu tab a každý panel rolu tabpanel, prepojený so záložkou, ktorá ho ovláda. Čítač obrazovky preto vie, kam viesť ďalej: NVDA v slovenčine oznámi napríklad „Klávesnica, záložka, vybraté, 1 z 3“. Presné znenie závisí od čítača obrazovky, prehliadača a jazyka.

V poradí Tab zaberá celá skupina záložiek jediné miesto. Medzi záložkami 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.

Kedy záložky použiť

• Najviac päť až šesť záložiek. Väčší počet sa na užšej obrazovke zalomí do viacerých riadkov, štítky sa začnú skracovať a používateľ stráca prehľad o tom, ktorá záložka je aktívna. Ak ich potrebujete viac, obsah patrí na samostatné stránky alebo do akordeónu.
• Krátke štítky z jedného až dvoch slov, ktoré sa nikdy neskracujú tromi bodkami.
• Panely sú rovnocenné pohľady na ten istý druh obsahu, napríklad Klávesnica, Čítač obrazovky a Priblíženie. Na kroky postupu patrí sprievodca s tlačidlami Ďalej a Späť; na obsah, ktorý má používateľ porovnávať, patria stĺpce alebo tabuľka.
• Do neaktívneho panela nepatria kľúčové informácie, napríklad ceny alebo podmienky. Čo je v neaktívnom paneli, väčšina používateľov nikdy neuvidí.
• Záložky sa nevkladajú do záložiek a ich poradie sa počas používania nemení. Pri načítaní je vybraná prvá záložka, prípadne tá, na ktorú ukazuje adresa stránky.
• Pri tlači sa zoznam záložiek skryje a všetky panely sa vytlačia pod sebou aj s nadpismi, aby na papieri nič nechýbalo.

Vyskúšajte si sami

Klávesnica

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

Čítač obrazovky

• Na záložke počujete jej názov, rolu, stav „vybraté“ a poradie.
• Po prechode do panela počujete jeho názov, ktorý je rovnaký ako názov záložky.

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.

Tlač

• Otvorte náhľad tlače (Ctrl + P): zoznam záložiek zmizne a všetky tri panely sú vytlačené pod sebou.

Bez JavaScriptu

Zoznam záložiek 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>