Přístupnost karuselů – Jak na přístupnost

Jansova 30.10.2026 – 07:38

Tento článek se zabývá tématem přístupnosti karuselů někdy nazývaných také jako carousel, slideshow, slider nebo animovaný banner. Jde o prezentaci skupiny položek, například aktualit, obrázků či jiných slidů v podobě, kdy je v daný moment plně zobrazen většinou jen jeden slide a typicky existuje časový interval, po němž se jednotlivé slidy postupně automaticky střídají.

Obecné požadavky přístupnosti na karusely

Při tvorbě karuselů je potřeba mít na paměti požadavky následujících skupin specifických uživatelů, kteří nemusejí být schopní s karuselem pracovat tak rychle nebo zručně jako běžní uživatelé:

  • uživatelé s kognitivním postižením,

  • uživatelé s pohybovým či motorickým postižením využívající hlasové ovládání nebo různé spínače,

  • uživatelé se zrakovým postižením využívající zvětšovací software nebo odečítače obrazovky,

  • uživatelé s poruchou pozornosti,

  • uživatelé, u nichž může animace vyvolat nevolnost.

S ohledem na tyto uživatele je dobré myslet na následující obecné přístupnostní požadavky:

  • poskytnout dostatek času na přečtení aktuálního slidu karuselu,

  • umožnit jednoduché ovládání animace karuselu,

  • při navigaci na stránce usnadnit přeskočení karuselu a pokračování ve čtení okolního obsahu,

  • realizovat karusel co nejjednodušeji,

  • vyvarovat se animací, které mohou u některých uživatelů narušit pozornost nebo vyvolat nevolnost,

  • zajistit, aby animace karuselu nerušila procházení nebo prohlížení ostatního obsahu webové stránky.

Prvky karuselu

Pro efektivní ovládání karuselu a pochopení jeho struktury je důležité, aby byl realizován co nejjednodušeji. Ideálně by měl obsahovat následující:

  • Obsah právě zobrazeného slidu.

  • Ovládací prvky karuselu, viz níže.

  • Pro uživatele odečítačů obrazovky je vhodné uvodit karusel stručným a výstižným nadpisem, tedy patřičným elementem <h2> až <h6>, a rovněž za karusel umístit nadpis uvozující obsah nacházející se za karuselem. Skákáním po nadpisech pak uživatel odečítače může karusel snadno přeskočit a věnovat se okolnímu obsahu webové stránky. Tyto nadpisy mohou být případně vizuálně skryty a dostupné jen pro uživatele odečítačů.

  • Těsně před karusel doporučujeme umístit tzv. skip link, tedy odkaz, který po aktivaci přesune fokus klávesnice za karusel a umožní tak uživatelům pohybujícím se na stránce výhradně pomocí klávesnice karusel přeskočit.

  • Celý karusel včetně slidů a jeho ovládacích prvků by měl být obalen do elementu s atributem role="group". Dále by tento element měl být stručně a výstižně pojmenován atributem aria-label nebo aria-labelledby, např. jako „Procházení aktualit“ nebo jen „Aktuality“. Pojem karusel nebo podobné cizojazyčné slovo v pojmenování používat nedoporučujeme, neboť nemusí být všem uživatelům jasný. Toto pojmenování je důležité pro uživatele odečítačů, protože bude odečítačem ohlášeno v momentě vstupu nebo výstupu z karuselu a vytyčuje tak jeho hranice.

  • Nedoporučujeme karusel obalovat do oblasti (landmarku) z důvodu zachování jednoduché struktury oblastí. Karusely lze připodobnit ke statické sekci prezentující novinky, aktuality nebo obrázky, kde použití oblastí není na místě zrovna tak.

Ovládání karuselu

Karusel by měl poskytovat následující výstižně a stručně pojmenované ovládací prvky:

  • Tlačítko pro pozastavení animace karuselu. Doporučujeme pojmenovat „Pozastavit animaci“ při stavu, kdy animace běží, a „Spustit animaci“ při stavu pozastavené animace.

  • Tlačítka pro přesun na předchozí a následující slide karuselu. Aktivace těchto tlačítek by neměla nikam přesouvat fokus klávesnice, aby uživatel mohl pohodlně postupně přepínat na následující či předchozí slide. V pojmenování tlačítek doporučujeme nepoužívat výraz „slide“, protože ten nemusí být znám všem uživatelům. Raději zvolte pojmenování s ohledem na typ karuselu, např. „Předchozí aktualita“ a „Následující aktualita“, popřípadě „Předchozí snímek“ a „Následující snímek“.

Pokud jsou tato ovládací tlačítka reprezentována ikonami, tak by měla být řádně pojmenována pro odečítače obrazovky pomocí atributu aria-label.

Ovládací tlačítka by měla být zaměřitelná fokusem pomocí klávesnice, čehož docílíte použitím elementu <button>. Jestliže tento element použít nemůžete, tak lze zvolit jiný element, například <div>, a učinit jej zaměřitelným fokusem přidáním atributu tabindex="0". V takovém případě je ještě potřeba umožnit, aby se element jevil pro odečítač obrazovky jako tlačítko, čehož dosáhnete přidáním atributu role="button".

Tlačítko pro pozastavení animace karuselu by se v kódu mělo nacházet před samotnými slidy karuselu, aby uživatel odečítače, který se na stránce pohybuje shora dolů, na toto tlačítko narazil dříve než na zobrazený slide a mohl tak karusel snadno pozastavit.

Ovládací prvky pro přepnutí na konkrétní slide

Doporučujeme zvážit, jestli kromě výše zmíněných tlačítek pro ovládání karuselu nepřidat také tlačítka pro přepnutí na konkrétní slide. Tato tlačítka by měla splňovat následující:

  • Být implementována pomocí elementu <button>.

  • Jako text tlačítka používat samotnou číslici, popřípadě ikonku např. puntíku, ale pro odečítače pojmenovat výstižněji pomocí atributu aria-label, např. <button aria-label="Aktualita 1">1</button>.

  • Na tlačítko, které odpovídá aktuálně zobrazenému slidu, přidat atribut aria-current="true". Toto aktuální tlačítko by rovněž mělo být vizuálně odlišeno od ostatních tlačítek nejen barvou, ale i tvarem.

  • Po aktivaci tlačítka pro přepnutí na konkrétní slide přesunout fokus klávesnice na tento slide, aby si daný slide uživatel odečítače mohl následně přečíst. Jestliže je slide realizován neinteraktivním elementem, např. <div>, tak je nutné tomuto elementu nastavit atribut tabindex="-1", aby bylo možné na něj pomocí JavaScriptu přesunout fokus.

  • Pokud je slidů větší množství, tak doporučujeme místo tlačítek pro přepnutí na konkrétní slide použít raději záložky (tabs). V tomto případě by se skupina záložek měla jevit jako jediná zastávka tabulátoru (Tab stop) a mezi záložkami by mělo být možné se navigovat klávesovými šipkami. To proto, aby uživatel při pohybu přes karusel tabulátorem nemusel procházet všechna tlačítka jednotlivých slidů.

Další doporučení

  • Při najetí myší na karusel nebo při přesunutí fokusu klávesnice na karusel doporučujeme pozastavit jeho animaci. Tím poskytnete víc času uživatelům pro přečtení obsahu karuselu nebo případně pro interakci s odkazy či jinými prvky uvnitř karuselu. Nicméně když uživatel odečítače najede do karuselu prohlížecím kurzorem odečítače, tak bohužel není technicky možné tuto skutečnost detekovat a je tedy očekáváno, že se animace nepozastaví jako v případě zaměření obsahu karuselu fokusem klávesnice.

  • Při automatické změně slidu doporučujeme neohlašovat název ani obsah právě zobrazeného slidu odečítačem pomocí live regionu, neboť toto ohlašování může být pro uživatele odečítačů velmi rušivé a může znemožnit čtení ostatního obsahu stránky. Takové ohlašování však doporučujeme zajistit při ruční aktivaci tlačítek pro přepnutí na následující nebo předchozí slide, ale nikoliv při aktivaci tlačítek pro přepnutí na konkrétní slide. V tomto ohlášení doporučujeme uvést číslo nově zobrazeného slidu a celkový počet slidů, např. „Zobrazena aktualita 2 z 5“.

  • Při automatické změně slidu nedoporučujeme ani nikam přesouvat fokus klávesnice, neboť to může uživatele mást.

  • Animace karuselu by měla být po načtení stránky pozastavena v případě, že má uživatel v systému zapnutou funkci omezeného pohybu nebo zakázaných animací. Tuto funkci využívají zejména uživatelé, u nichž animace může vyvolat nevolnost, a je možné ji v JavaScriptu zohlednit tímto způsobem.

  • Uživatel by neměl být při pohybu tabulátorem omezen jen na pohyb uvnitř karuselu. Neměl by tedy nastat tzv. focus trap.

  • Slidy, které aktuálně nejsou viditelné, ale nacházejí se v kódu, by měly být programově skryty. Nestačí tedy, aby slide byl schován za okrajem karuselu, neboť takový slide bude odečítač obrazovky při navigaci na stránce stále číst. Slide by měl být schován před odečítačem např. pomocí CSS vlastnosti display: none;.

  • Jestliže karusel prezentuje sadu obrázků, tak by každý obrázek měl mít nastavený stručný a výstižný alternativní text určený atributem alt.

Přístupnější alternativy pro karusel

Z výše uvedeného vyplývá, že karusely mohou činit mnoha specifickým skupinám uživatelů různé potíže a správná implementace karuselů není úplně triviální. Doporučujeme tak zvážit, jestli karusel nenahradit nějakou přístupnější a jednodušší alternativou, např. jednou z následujících:

  • Statický obsah: Strukturovaný textový a jiný obsah, který může být rozvržen například do mřížky. Výhodou je především to, že uživatelům odečítačů obrazovky umožňuje jednoduché lineární čtení odshora dolů a že veškerý text je na stránce přímo k dispozici, takže je možné jakýkoliv text vyhledat ať už pomocí funkce webového prohlížeče nebo asistivní technologie, jako jsou odečítače obrazovky.

  • Záložky: Umožňují přednostně prezentovat panel první záložky (tab panel) a ostatní panely záložek zobrazit na vyžádání po aktivaci požadované záložky. Bližší popis tohoto vzoru záložek a jeho ukázky najdete na stránce Tab Patterns (součást ARIA Authoring Practices Guide).

  • Akordeon: Vertikálně orientovaná sada sekcí, které je možné rozbalit či sbalit. Bližší popis tohoto vzoru akordeonu a jeho ukázky najdete na stránce Accordion Pattern (Sections With Show/Hide Functionality) (opět v rámci ARIA Authoring Practices Guide).

Podrobnější rozbor a demonstraci zmíněných tří alternativ pro karusel je možné zhlédnout ve videu Accessible Alternatives to Carousels | Accessible Web Webinar.

Oficiální doporučení, funkční ukázky a zdrojový kód

Oficiální doporučení včetně obecných požadavků jako těch na velikost interaktivních prvků, kontrasty nebo jiné stylování jsou uvedena v následujících zdrojích od autority W3C:

Související kritéria úspěšnosti standardu WCAG

Výše uvedená doporučení vycházejí jednak z dobré praxe, jednak z následujících takzvaných kritérií úspěšnosti webového standardu WCAG 2.2:

Autor: Adam Samec

Štítky

přístupnost
Jak na přístupnost