Skip to main content

Kontrolní seznam WCAG 2.1 AA pro EU online obchody

· WCAG · compliance · EAA · kontrolní seznam · alternativní text

WCAG 2.1 Level AA je technický standard, který vyžaduje European Accessibility Act. Pokud váš obchod prodává zákazníkům kdekoli v EU, musíte jej splňovat. Tento kontrolní seznam pokrývá všechny požadavky standardu, rozdělené podle čtyř principů POUR.

Co principy POUR znamenají v praxi

WCAG 2.1 seskupuje všechny požadavky pod čtyři principy:

  • Perceivable (Vnímatelný) — každý obsah musí být přístupný alespoň jedním smyslem, i když uživatelé nemohou vidět nebo slyšet
  • Operable (Ovladatelný) — každá interakce musí fungovat bez myši
  • Understandable (Srozumitelný) — obsah a chování stránky musí být předvídatelné
  • Robust (Robustní) — kód musí fungovat s dnešními i budoucími asistenčními technologiemi

Level AA leží uprostřed tří úrovní (A, AA, AAA) a je to, co EAA výslovně vyžaduje.

Vnímatelný

Obrázky a média

  • Každý smysluplný obrázek má alternativní text popisující, co zobrazuje a proč je na stránce.
  • Dekorativní obrázky mají prázdný atribut alt="", aby je čtečky obrazovky přeskočily. Vynechání atributu alt je chyba WCAG; prázdný řetězec je správný signál.
  • Videa mají titulky odpovídající mluvenému obsahu. Automaticky generované titulky nesplňují tento požadavek bez kontroly a korekce.
  • Obsah pouze ve formátu audia má textový přepis.

Barevný kontrast

  • Normální tělo textu (pod 18pt) musí dosahovat kontrastního poměru 4,5:1 vůči pozadí.
  • Velký text (18pt a výše) musí dosahovat 3:1.
  • Žádná informace není sdělována pouze barvou. Červený rámeček chyby potřebuje také ikonu nebo textový popisek.

Rozvržení a zoom

  • Stránky nepřicházejí o obsah při škálování textu na 200 %.
  • Při šířce prohlížeče 1280px není vyžadováno horizontální posouvání.

Ovladatelný

Přístup pomocí klávesnice

  • Každý odkaz, tlačítko, pole formuláře a interaktivní prvek je dosažitelný klávesou Tab.
  • Nejsou žádné klávesnicové pasti: pokud uživatel může navigovat do komponenty, může z ní také odejít bez obnovení stránky.
  • Na začátku každé stránky se zobrazuje odkaz "Přejít na hlavní obsah".
  • Indikátor fokusu klávesnice je vždy viditelný. Jeho odstranění pomocí CSS je chyba WCAG.

Navigace a časování

  • Názvy stránek popisují aktuální stránku, ne jen název webu.
  • Odkazy popisují svůj cíl. "Číst více" a "kliknout zde" nesplňují toto kritérium bez kontextu.
  • Časové limity lze prodloužit, pozastavit nebo vypnout.
  • Karusely a automaticky přehrávané obsahy mají ovládací prvky pro pauzu.

Srozumitelný

Jazyk a chyby

  • Element <html> nese atribut lang odpovídající jazyku stránky (např. lang="cs").
  • Pole formulářů mají popisky. Atribut placeholder není popisek.
  • Chybové zprávy říkají, co se pokazilo a jak to opravit.

Předvídatelné chování

  • Stránky automaticky nemění kontext, když uživatel vybere možnost z rozevíracího seznamu nebo zaškrtne políčko.
  • Navigace zůstává na stejném místě na všech stránkách.

Robustní

Kvalita kódu

  • HTML elementy mají správné otevírací a zavírací tagy.
  • Žádná stránka neobsahuje duplicitní hodnoty id.
  • Vlastní komponenty — modály, záložky, akordeony, výběry data — zpřístupňují svou roli, název a stav prostřednictvím atributů ARIA.

Kde e-commerce obchody nejčastěji selhávají

Alternativní texty obrázků způsobují více stížností na WCAG než jakékoli jiné kritérium. Problém je provozní: vývojáři zřídka zapomínají na alternativní texty v šablonách, ale produktové obrázky každodenně nahrávají lidé, kteří nejsou vývojáři. Obchod s 500 produkty může při normálním provozu naakumulovat tisíce chybějících popisů.

Klávesnicová navigace je druhou nejčastější mezerou. Mnoho komerčních šablon je postaveno a testováno pouze s myší.

Jak auditovat svůj web

Spusťte bezplatný WCAG sken vašeho obchodu. Sken kontroluje vaši stránku podle pravidel WCAG 2.1 AA a vrátí skóre s konkrétními místy problémů.

Automatické skenování odhalí 30 až 40 procent problémů s WCAG. Zbytek vyžaduje ruční testování. Pro prohlášení o přístupnosti EAA dle Přílohy V musíte zdokumentovat jak to, co standard splňuje, tak to, co nesplňuje, včetně časového harmonogramu nápravy.

Alternativní texty ve velkém měřítku

Ruční psaní alternativních textů je realistické pro katalog 50 produktů. Při 500 nebo více se stává provozním problémem.

Altvisor generuje alternativní texty splňující WCAG 2.1 AA ve všech 24 oficiálních jazycích EU. Zpracujete produktové obrázky, zkontrolujete výsledky a zveřejníte, až budete spokojeni.

Vytvořte bezplatný účet, abyste zjistili, kolik obrázků ve vašem obchodě nemá vyhovující alternativní text, a spusťte WCAG sken pro úplný přehled o vaší aktuální situaci.