Přístupné záložky (tablist)

Produktové stránky často dělí popis, parametry, doručení a recenze do záložek. Dobře udělané záložky se klávesnicí ovládají rychle. Postavené z prvků div s obsluhou kliknutí skryjí uživatelům klávesnice a čteček obrazovky většinu informací o produktu. Stránka je součástí série přístupné vzory UI.

Kdy záložky použít

APG definuje záložky jako „vrstvené oddíly obsahu, známé jako panely záložek, které zobrazují vždy jeden panel obsahu“, přičemž každý panel má záložku, která ho po aktivaci zobrazí. Záložky používejte pro několik souvisejících, rovnocenných oddílů podobné váhy, mezi kterými uživatelé přepínají. Nepoužívejte je pro:

• Navigaci mezi stránkami — to jsou odkazy v nav, i když vypadají jako záložky; aktuální označte pomocí aria-current="page".
• Dlouhý obsah, který na sebe navazuje, nebo víc než pár oddílů — použijte nadpisy nebo akordeon.

Související kritéria WCAG

• 4.1.2 Název, role, hodnota (A): role tab, tablist, tabpanel a stav výběru.
• 1.3.1 Informace a vztahy (A): vztah mezi záložkou a panelem je v kódu.
• 2.1.1 Klávesnice (A): všechny záložky jde klávesnicí dosáhnout a aktivovat.
• 2.4.3 Pořadí fokusu (A) a 2.4.7 Viditelný fokus (AA).
• 1.4.11 Netextový kontrast (AA): indikátor vybrané záložky potřebuje kontrast 3:1.
• 1.4.1 Použití barvy (A): vybraná záložka se pozná podle víc než jen barvy.
• 1.4.10 Přizpůsobení obsahu (AA): záložky fungují i na obrazovce široké 320 CSS pixelů.

Příklad kódu

<div class="tabs">
  <div role="tablist" aria-label="Informace o produktu">
    <button type="button" role="tab" id="tab-desc" aria-selected="true"
            aria-controls="panel-desc">Popis</button>
    <button type="button" role="tab" id="tab-specs" aria-selected="false"
            aria-controls="panel-specs" tabindex="-1">Parametry</button>
    <button type="button" role="tab" id="tab-reviews" aria-selected="false"
            aria-controls="panel-reviews" tabindex="-1">Recenze (12)</button>
  </div>

  <div role="tabpanel" id="panel-desc" aria-labelledby="tab-desc" tabindex="0">…</div>
  <div role="tabpanel" id="panel-specs" aria-labelledby="tab-specs" tabindex="0" hidden>…</div>
  <div role="tabpanel" id="panel-reviews" aria-labelledby="tab-reviews" tabindex="0" hidden>…</div>
</div>

Co musí skript dělat:

• Šipky přesouvají fokus mezi záložkami. Používá se k tomu roving tabindex: aktivní záložka má tabindex="0", ostatní tabindex="-1", jak popisuje průvodce klávesnicí v APG.
• Při aktivaci: nastavte aria-selected="true" na nové záložce a false na všech ostatních, zobrazte její panel a ostatní skryjte pomocí hidden.
• tablist má aria-label, nebo aria-labelledby, pokud je nad ním viditelný nadpis.
• APG uvádí, že panel „by měl mít tabindex="0"“, pokud neobsahuje nic, co může získat fokus, nebo jeho první obsah fokus získat nemůže, aby se na něj dalo dostat tabulátorem.
• Svislý seznam záložek dostane aria-orientation="vertical" a ovládá se šipkami nahoru a dolů.

Ovládání klávesnicí

Podle vzoru záložek v APG (vodorovný seznam záložek):

Automatická vs ruční aktivace. APG uvádí, že „se doporučuje, aby se záložky aktivovaly automaticky, když dostanou fokus“, pokud se panel zobrazí bez znatelné prodlevy, což obvykle znamená, že je jeho obsah už načtený. Pokud zobrazení panelu vyžaduje síťový požadavek, automatická aktivace pohyb šipkami zpomalí — pak použijte ruční aktivaci mezerníkem nebo klávesou Enter. APG má příklady obou variant.

Časté chyby v e-shopech

• Záložky postavené z prvků li nebo div s obsluhou kliknutí: žádná role, žádná klávesnice, žádný stav výběru.
• Všechny záložky v pořadí tabulátoru a žádné šipky — nebo šipky fungují, ale chybí role="tab", takže čtečky obrazovky neoznámí „záložka 2 ze 3“.
• aria-selected zůstává true na první záložce i poté, co uživatel vybere jinou.
• Panely skryté pomocí opacity: 0 nebo posunuté mimo obrazovku, které jdou ale dál přečíst a mohou získat fokus.
• Navigace stylovaná jako záložky s role="tab", přičemž každá „záložka“ načte novou stránku.
• Záložka s recenzemi načítaná skriptem a automatická aktivace, která při každém stisku šipky odešle požadavek.
• Vybraná záložka poznatelná jen podle trochu jiné barvy.

Co najde automatizovaná kontrola a co ruční testování

Všechna jsou kartami v naší knihovně pravidel. Ruční testování: přejděte tabulátorem do seznamu záložek, vyzkoušejte šipky, Home a End, ověřte, že je v pořadí tabulátoru jen jedna záložka, že se panel mění a že čtečka obrazovky oznámí roli, pozici a stav výběru. Vizuální indikátor zkontrolujte kontrolou kontrastu.

Spusťte bezplatnou kontrolu jedné stránky na produktové stránce. Je to automatizovaná kontrola, nikoli úplný audit.

Časté otázky

Jaké role ARIA přístupné záložky potřebují?

Kontejner s role="tablist" a popiskem, v něm prvky s role="tab", každý s aria-selected a aria-controls, a panely s role="tabpanel", které jsou pojmenované svou záložkou.

Jak se uživatelé klávesnice pohybují mezi záložkami?

Tab přesune fokus do seznamu záložek na aktivní záložku; šipky vlevo a vpravo přecházejí mezi záložkami a na koncích pokračují od začátku; Home a End jsou volitelné; další Tab přejde na panel. V pořadí tabulátoru je jen jedna záložka.

Má se záložka aktivovat při fokusu, nebo klávesou Enter?

APG doporučuje, aby se záložky aktivovaly automaticky, když dostanou fokus, pokud se panel zobrazí bez znatelného zpoždění. Pokud se panel musí nejdřív načíst, použijte ruční aktivaci klávesou Enter nebo mezerníkem.

Jsou na mobilní produktové stránce lepší záložky, nebo akordeon?

Přístupné může být obojí. Záložky potřebují vodorovné místo a celý model ovládání klávesnicí; akordeon z rozbalovacích tlačítek je jednodušší a na úzkých obrazovkách funguje dobře. Mnoho e-shopů používá na počítači záložky a na mobilu akordeon.

Dokáže automatizovaná kontrola otestovat záložky?

Najde role tab mimo tablist, tablisty bez záložek, aria-controls odkazující na neexistující ID a neplatné hodnoty aria-selected. Nezkontroluje šipky ani to, zda se aria-selected změní, když uživatel vybere jinou záložku.

Zdroje

• W3C WAI, APG Tabs pattern: https://www.w3.org/WAI/ARIA/apg/patterns/tabs/
• W3C WAI, APG Developing a Keyboard Interface (roving tabindex): https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/