Přístupný karusel (slider)

Hero slider na úvodní stránce a karusely s fotkami produktů patří mezi nejkritizovanější vzory přístupnosti, zčásti proto, že se často dělají špatně, zčásti proto, že se lidé málokdy podívají dál než na první slide. Pokud ho používáte, udělejte ho ovladatelný. Stránka je součástí série přístupné vzory UI.

Kdy karusel použít

APG popisuje karusel jako prvek, který prezentuje „sadu položek, nazývaných slidy, tím, že postupně zobrazuje podmnožinu jednoho nebo více slidů“. Hodí se pro fotky produktu na produktové stránce nebo pro krátkou sadu souvisejících položek. U akcí, z nichž každá je důležitá, zvažte zobrazení v samostatných blocích: nic není skryté a nic se nehýbe.

APG upozorňuje na dva konkrétní problémy: skryté slidy nesmějí zůstat dostupné čtečkám obrazovky (například pouhým odsunutím mimo obrazovku) a neoznámené otáčení mate uživatele čteček, kteří se najednou ocitnou v obsahu jiného slidu.

Související kritéria WCAG

• 2.2.2 Pozastavení, zastavení, skrytí (A): pohyblivý obsah, který „(1) se spustí automaticky, (2) trvá déle než pět sekund a (3) je prezentován souběžně s jiným obsahem“, potřebuje „mechanismus, kterým ho uživatel může pozastavit, zastavit nebo skrýt“. W3C mezi příklady uvádí automaticky postupující prezentace.
• 2.1.1 Klávesnice (A): všechny ovládací prvky fungují klávesnicí; swipe není jediná možnost.
• 2.5.1 Gesta ukazatele (A): pro swipe je potřeba alternativa jedním ukazatelem, například tlačítka dalšího a předchozího slidu.
• 1.1.1 Netextový obsah (A): obrázky slidů mají textové alternativy; text uvnitř obrázků bannerů musí být také v alternativě.
• 1.4.5 Obrázky textu (AA): propagační text má být skutečný text, ne vypálený do obrázku.
• 4.1.2 Název, role, hodnota (A): tlačítka mají názvy; výběr slidu ukazuje aktuální slide.
• 2.5.8 Velikost cíle (minimum) (AA): tečkové indikátory bývají hluboko pod 24 × 24 CSS pixelů.
• 2.4.3 Pořadí fokusu (A): skryté slidy nedostávají fokus.

Příklad kódu

<section class="carousel" aria-roledescription="carousel" aria-label="Podzimní nabídka">
  <button type="button" class="rotation" aria-label="Zastavit otáčení slidů">⏸</button>
  <button type="button" aria-controls="slides" aria-label="Předchozí slide">‹</button>
  <button type="button" aria-controls="slides" aria-label="Další slide">›</button>

  <div id="slides" aria-live="off" aria-atomic="false">
    <div role="group" aria-roledescription="slide" aria-label="1 z 3">
      <a href="/cs/podzimni-bundy">
        <img src="jackets.jpg" alt="Podzimní bundy, sleva 20 % do neděle">
      </a>
    </div>
    <div role="group" aria-roledescription="slide" aria-label="2 z 3" hidden>…</div>
    <div role="group" aria-roledescription="slide" aria-label="3 z 3" hidden>…</div>
  </div>
</section>

Co APG předepisuje:

• Kontejner je region (prvek section s názvem) nebo group s aria-roledescription="carousel" a popiskem, který neobsahuje slovo „karusel“.
• Každý slide je group s aria-roledescription="slide" a názvem; pokud slidy nemají jedinečné názvy, funguje pozice, například „3 z 10“.
• Obal slidů má aria-atomic="false"; aria-live je off, když se karusel otáčí automaticky, a polite, když ne, aby se ruční změny oznámily.
• Popisek tlačítka otáčení popisuje akci, „Zastavit otáčení slidů“ nebo „Spustit otáčení slidů“, takže nepotřebuje aria-pressed.
• Otáčení se zastaví, když fokus klávesnice vstoupí do karuselu, a pokračuje jen na žádost uživatele; pozastaví se také, když nad karuselem najede myš.
• Výběr slidu lze postavit jako záložky (slidy se stanou prvky tabpanel) nebo jako pojmenovanou skupinu tlačítek, kde tlačítko aktuálního slidu má aria-disabled="true" místo disabled, takže zůstane v pořadí tabulátoru.

Ovládání klávesnicí

APG řadí ovládání otáčení v pořadí tabulátoru na první místo, před otáčející se obsah.

Časté chyby v e-shopech

• Hero slidery, které se otáčejí každé tři sekundy a nemají tlačítko pozastavení.
• Skryté slidy odsunuté mimo obrazovku s odkazy, které stále dostávají fokus, takže Tab skáče do neviditelného obsahu.
• Tečky jako jediná navigace, malé a bez názvů („tlačítko“, „tlačítko“, „tlačítko“).
• Propagační text jen uvnitř obrázku, s alt="banner".
• Karusely fotek produktů, které na mobilu fungují jen swipem, a na počítači jen s náhledy, které jsou prvky div.
• Otáčení pokračuje, zatímco uživatel čte nebo se tabulátorem dostane do slidu.
• Klonované slidy pro nekonečné smyčky, které duplikují odkazy a ID.

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

Všechna jsou kartami v naší knihovně pravidel. Kritérium 2.2.2 se automaticky otestovat nedá: zda se slider hýbe, jak dlouho a zda jde pozastavit, musí posoudit člověk. Klávesnicí také vyzkoušejte, že se otáčení při fokusu zastaví, že se na skryté slidy nedá dostat a že čtečka obrazovky oznámí ruční změny slidů.

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

Časté otázky

Povoluje WCAG automaticky se otáčející karusely?

Ano, ale s možností je zastavit. Kritérium 2.2.2 Pozastavení, zastavení, skrytí vyžaduje mechanismus pro pozastavení, zastavení nebo skrytí pohyblivého obsahu, který se spustí automaticky, trvá déle než pět sekund a zobrazuje se souběžně s jiným obsahem.

Jaké ovládací prvky přístupný karusel potřebuje?

Podle APG tlačítka pro předchozí a další slide, volitelně tlačítka nebo záložky pro výběr slidu a u automaticky se otáčejících karuselů tlačítko pro zastavení a spuštění otáčení, které je v pořadí tabulátoru první.

Má se otáčení zastavit, když uživatel dá karuselu fokus?

Ano. Podle APG se otáčení zastaví, když fokus klávesnice vstoupí do karuselu, a nepokračuje, dokud o to uživatel nepožádá; pozastaví se také, když nad ním najede myš.

Jak čtečky obrazovky poznají, který slide je zobrazený?

Každý slide je skupina s aria-roledescription="slide" a názvem, například „3 z 5“, a kontejner slidů má aria-live="polite", když se karusel automaticky neotáčí, takže se ruční změny slidů oznámí.

Dokáže automatizovaná kontrola otestovat karusel?

Najde obrázky slidů bez alternativního textu, tlačítka bez názvu, odkazy s fokusem ve skrytých slidech a malé cíle. Neotestuje, zda jde otáčení pozastavit nebo zda se při fokusu zastaví.

Zdroje

• W3C WAI, APG Carousel pattern: https://www.w3.org/WAI/ARIA/apg/patterns/carousel/
• W3C, Understanding 2.2.2 Pause, Stop, Hide: https://www.w3.org/WAI/WCAG22/Understanding/pause-stop-hide.html