WCAG 2.2 AA pro e-shopy: checklist přístupnosti webu

Checklist WCAG 2.2 AA pro e-shopy na Shopify a WooCommerce podle typu stránky: alt texty, kontrast, popisky, klávesnice, fokus, velikost cílů a novinky 2.2.

Redakce FixReports10 min čtení

Checklist WCAG 2.2 AA pro e-shop začíná chybami, které najdete ve většině šablon obchodů: chybějící alternativní texty, text s nízkým kontrastem, odkazy a tlačítka bez přístupného názvu, formulářová pole bez popisku, pasti pro klávesnici a neviditelný fokus. WCAG 2.2 k tomu přidává kontroly úrovně AA, které e-shopy zasahují obzvlášť: prvky s fokusem skryté pod lepivými (sticky) lištami (2.4.11), cíle pro klepnutí menší než 24 × 24 CSS pixelů (2.5.8) a přihlášení, při kterém si lidé musí něco pamatovat nebo opisovat (3.3.8). Otestujte každý typ stránky (úvodní stránka, kolekce, produkt, košík) klávesnicí a automatizovaným nástrojem a pak opravte šablony motivu, aby opravu převzala každá stránka.

Hlavní body

  • WCAG 2.2 se stala doporučením W3C 5. října 2023. Aktuální vydání nese datum 12. prosince 2024 a bylo schváleno jako ISO/IEC 40500:2025 (otevře se v nové kartě).
  • Ve studii WebAIM Million 2026 (otevře se v nové kartě) (data z února 2026) mělo 95,9 % úvodních stránek z milionu nejnavštěvovanějších webů zjistitelné chyby podle WCAG 2.
  • Šest nejčastějších chyb: text s nízkým kontrastem (83,9 % stránek), chybějící alternativní text (53,1 %), chybějící popisky formulářů (51 %), prázdné odkazy (46,3 %), prázdná tlačítka (30,6 %) a chybějící jazyk stránky (13,5 %).
  • 42 516 úvodních stránek na Shopify v tomto vzorku mělo v průměru 75,1 zjištěné chyby, oproti 56,1 u všech stránek.
  • WCAG 2.2 přidává čtyři kritéria úrovně AA (2.4.11, 2.5.7, 2.5.8, 3.3.8) a dvě kritéria úrovně A (3.2.6, 3.3.7) a ruší kritérium 4.1.1 Parsing.

Co se ve WCAG 2.2 změnilo pro e-shopy?

WCAG 2.2 přidala devět kritérií úspěchu, z toho šest na úrovni A nebo AA, a jako zastaralé zrušila kritérium 4.1.1 Parsing (W3C WAI (otevře se v nové kartě)).

Nové kritériumÚroveňCo znamená pro e-shop
2.4.11 Focus Not Obscured (Minimum)AAOdkaz nebo tlačítko s fokusem nesmí být zcela zakryté lepivou hlavičkou, lepivou lištou „Přidat do košíku“, cookie lištou nebo chatovým widgetem
2.5.7 Dragging MovementsAAVše, co vyžaduje tažení, například posuvník cenového rozpětí, potřebuje alternativu ovladatelnou jediným klepnutím
2.5.8 Target Size (Minimum)AACíle pro kliknutí a klepnutí mají alespoň 24 × 24 CSS pixelů, nebo jsou od sebe tak daleko, že se kruh o průměru 24 px kolem každého z nich nedotýká sousedních
3.2.6 Consistent HelpAOdkazy na nápovědu, kontaktní údaje nebo chat se na každé stránce zobrazují ve stejném relativním pořadí
3.3.7 Redundant EntryAV rámci jednoho procesu se neptejte dvakrát na stejné údaje; vyplňte je automaticky nebo je nabídněte k výběru
3.3.8 Accessible Authentication (Minimum)AAPřihlášení nesmí záviset na zapamatování nebo opisování, pokud neexistuje alternativa nebo pomůcka, jako je vkládání ze schránky a správci hesel

Zbývající tři (2.4.12, 2.4.13 a 3.3.9) patří do úrovně AAA. Protože 2.2 zachovává všechna kritéria z 2.1 kromě 4.1.1, splnění 2.2 AA pokrývá i 2.1 AA.

Která kritéria WCAG šablony e-shopů nesplňují nejčastěji?

Každý rok se objevuje stejná hrstka: kontrast, alternativní text, popisky formulářů a názvy odkazů a tlačítek, k tomu problémy s klávesnicí a fokusem, které automatizované nástroje odhalí jen zčásti.

KritériumCo v e-shopech selháváJak to opravit
1.1.1 Non-text Content (A)Obrázky produktů bez alternativního textu nebo s názvem souboru jako alternativním textem; obrázky v odkazech bez textuPopište zobrazený produkt (barva, styl, úhel pohledu). alt="" používejte jen u dekorací. Šablony Shopify by měly vypisovat image.alt
1.4.3 Contrast (Minimum) (AA)Světle šedý text v těle stránky, zástupný text (placeholder), štítky slev, text přes úvodní obrázky4,5:1 pro běžný text, 3:1 pro velký text (přibližně 24 px, nebo 18,5 px tučně) (W3C (otevře se v nové kartě))
2.4.4 Link Purpose (A), 4.1.2 Name, Role, Value (A)Odkazy na košík, vyhledávání a sociální sítě tvořené jen ikonou; šipky slideru; zavírací tlačítka „X“ bez názvuDejte každému ovládacímu prvku viditelný text nebo aria-label, například „Košík, 2 položky“
1.3.1 Info and Relationships (A), 3.3.2 Labels or Instructions (A)Pole pro newsletter a vyhledávání jen se zástupným textem; pole pro množství bez popiskuPoužijte <label for>, které odpovídá id pole; vzorníky variant s přepínači seskupte do fieldset s legend
2.1.1 Keyboard (A), 2.1.2 No Keyboard Trap (A)Nabídky fungující jen při najetí myší, vzorníky postavené z prvků div, vyskakovací okna, která nejde zavřít z klávesnicePoužívejte skutečné prvky button a a; klávesa Escape zavírá překryvné vrstvy a vrací fokus
2.4.7 Focus Visible (AA)outline: none v CSS šablonyPřidejte styl :focus-visible, který se výrazně odlišuje od pozadí

WebAIM také zjistil, že každý čtvrtý obrázek v odkazu neměl alternativní text a že 45 % obrázků bez alternativního textu byly odkazy (WebAIM (otevře se v nové kartě)). V mřížce kolekce jde obvykle o odkaz na obrázku produktu.

Co zkontrolovat na úvodní stránce?

Zkontrolujte hlavičku, úvodní banner (hero) a vše, co se vysouvá nebo vyskakuje, protože s tím se každý návštěvník setká jako s prvním.

  • Odkaz pro přeskočení. Odkaz „Přejít na obsah“ jako první prvek, na který lze přesunout fokus (2.4.1 Bypass Blocks, A).
  • Ikony v hlavičce. Ikony vyhledávání, účtu a košíku mají přístupné názvy a název košíku obsahuje počet položek.
  • Nabídka. Otevírá se klávesou Enter nebo mezerníkem, podpoložky jsou dosažitelné tabulátorem, zavírá se klávesou Escape a nespoléhá na najetí myší (2.1.1). Požadavky Theme Store (otevře se v nové kartě) od Shopify uvádějí, že všechny části stránky, včetně rozbalovacích nabídek, musí být ovladatelné z klávesnice.
  • Slider v úvodním banneru. Pokud se snímky automaticky posouvají déle než pět sekund, poskytněte ovládání pro pozastavení (2.2.2 Pause, Stop, Hide, A).
  • Oznamovací lišta a text na obrázcích. Změřte kontrast; barvy značky poměr 4,5:1 často nesplňují.
  • Vyskakovací okna a cookie lišty. Přesuňte fokus do vyskakovacího okna, opatřete pole pro e-mail popiskem, umožněte zavření klávesou Escape a zajistěte, aby lepivá lišta nikdy zcela nezakryla prvek s fokusem (2.4.11). W3C uvádí vlastnost CSS scroll-padding jako jeden ze způsobů, jak udržet prvky s fokusem mimo lepivé lišty (W3C (otevře se v nové kartě)).
  • Jazyk stránky. Prvek html má správný atribut lang (3.1.1 Language of Page, A).

Co zkontrolovat na stránkách kolekcí?

Stránky kolekcí obvykle selhávají na kartách produktů, filtrech a vzornících barev.

  • Karty produktů. Odkaz s obrázkem má alternativní text, nebo je obrázek skrytý před asistivními technologiemi a přístupný název nese odkaz na názvu produktu.
  • Filtry. Každé zaškrtávací políčko má popisek a každá skupina má nadpis nebo legendu. Panel filtrů se dá z klávesnice otevřít, ovládat i zavřít. Aktualizovaný počet výsledků oznamujte jako stavovou zprávu (4.1.3 Status Messages, AA).
  • Cenové posuvníky. Přidejte číselná pole pro minimální a maximální cenu, aby filtr fungoval bez tažení (2.5.7) i bez myši (2.1.1).
  • Vzorníky barev. Každý vzorník má textový název a „vyprodáno“ se nezobrazuje pouze barvou (1.4.1 Use of Color, A). Vzorníky splňují 24 × 24 CSS pixelů nebo pravidlo rozestupů (2.5.8).
  • Řazení a stránkování. Rozbalovací nabídka řazení má popisek; odkazy na stránky a tlačítka „Načíst další“ splňují minimální velikost cíle.

Co zkontrolovat na stránkách produktů?

Na stránce produktu padá rozhodnutí o nákupu, proto otestujte každý ovládací prvek mezi fotografiemi a tlačítkem „Přidat do košíku“.

  • Galerie. Každý obrázek má alternativní text, náhledy jsou tlačítka s názvy jako „Zobrazit obrázek 2“ a šipky fungují bez tažení (2.5.7).
  • Výběr variant. Možnosti velikosti a barvy jsou v pojmenované skupině (1.3.1), vybraná možnost se zpřístupňuje čtečkám obrazovky (4.1.2) a nedostupné velikosti jsou označené textem.
  • Množství. Pole má popisek a tlačítka minus a plus mají názvy a splňují 2.5.8. Theme Store od Shopify nyní vyžaduje dotykové cíle alespoň 24 × 24 CSS pixelů a jeho doporučené postupy pro přístupnost (otevře se v nové kartě) doporučují 44 × 44 pro hlavní ovládací prvky.
  • Přidání do košíku. Zprávy o úspěchu a o chybě se oznamují (4.1.3). Stížnost FTC proti dodavateli překryvného (overlay) nástroje uváděla web, na kterém čtečka obrazovky neoznámila přidání položky do košíku a grafiku hodnocení 5 hvězdičkami přečetla jako tlačítko „previous“ (stížnost FTC (otevře se v nové kartě)).
  • Hodnocení, karty a akordeony. Hodnocení má text, například „4,5 z 5 hvězdiček“. Akordeony zpřístupňují, zda jsou rozbalené.
  • Lepivá lišta „Přidat do košíku“. Nesmí zcela zakrýt prvek s fokusem, když uživatel klávesnice prochází stránku tabulátorem dolů (2.4.11).
  • Video. Videa produktů s mluveným slovem mají titulky (1.2.2 Captions (Prerecorded), A).

Co zkontrolovat v košíku a při přihlášení?

Košík je poslední stránka, kterou má většina šablon plně pod kontrolou, proto ho otestujte až k tlačítku pokladny a pak ověřte, že přihlášení k účtu nezávisí na paměti ani na opisování.

  • Vysouvací panel košíku. Fokus se přesune do panelu, zůstává v něm, dokud je otevřený, a po zavření klávesou Escape se vrátí na tlačítko košíku, jak to popisují doporučené postupy Shopify.
  • Položky košíku. Každé pole pro množství má popisek s názvem produktu a každé tlačítko pro odebrání říká, co odebírá, například „Odebrat lněnou košili, velikost M“.
  • Pole pro slevový kód a poznámku. S popiskem a s chybami popsanými textem (3.3.1 Error Identification, A).
  • Tlačítko pokladny. Dosažitelné tabulátorem, s viditelným fokusem a neskryté za lepivými prvky.
  • Přihlášení (3.3.8). Zákaznické účty Shopify ve výchozím nastavení používají přihlášení bez hesla pomocí jednorázového kódu (otevře se v nové kartě). Podle W3C musí jít kódy vložit nebo automaticky vyplnit a blokování vkládání nebo správců hesel kritérium nesplňuje; CAPTCHA založené na rozpoznávání objektů jsou na úrovni AA přípustné, hádanky nebo matematické CAPTCHA ale potřebují jinou metodu (W3C (otevře se v nové kartě)).

Zde hrají roli rozdíly mezi platformami. Na Shopify už není podporován (otevře se v nové kartě) checkout.liquid pro kroky s informacemi, dopravou a platbou, takže většinu kódu pokladny dodává Shopify, nikoli vaše šablona; otestujte aplikace a úpravy pokladny, které přidáváte. Na WooCommerce je pokladna stránkou na vašem webu ve WordPressu. WooCommerce uvádí, že jeho základní frontend je ve značné míře v souladu s WCAG 2.2 AA (prohlášení naposledy aktualizováno 1. dubna 2025), vaše šablona a pluginy to ale přesto mohou narušit (WooCommerce (otevře se v nové kartě)).

Jak otestovat e-shop podle tohoto checklistu?

Na každém typu stránky zkombinujte automatizovaný sken s nákupem pouze pomocí klávesnice a krátkou kontrolou se čtečkou obrazovky.

  1. Automatizovaný sken. Nástroje jako axe, WAVE nebo Lighthouse odhalí problémy s kontrastem, alternativními texty, popisky a prázdnými odkazy. Theme Store od Shopify požaduje průměrné skóre přístupnosti v Lighthouse alespoň 90 na úvodní stránce, stránkách kolekcí a produktů. To je minimum, nikoli shoda: podle W3C nástroje nedokážou přístupnost samy určit (otevře se v nové kartě).
  2. Nákup pouze klávesnicí. Bez myši se z úvodní stránky dostaňte přes nabídku nebo vyhledávání k produktu, použijte filtr, zvolte variantu, přidejte ji do košíku, otevřete košík a dojděte k tlačítku pokladny.
  3. Namátková kontrola se čtečkou obrazovky. S VoiceOverem nebo NVDA si poslechněte název produktu, cenu, stav varianty a potvrzení přidání do košíku.
  4. Opakované testování po změnách. Aktualizace šablon a nové aplikace mohou opravy zrušit.

Náš bezplatný sken pokrývá krok 1 na úvodní stránce, stránce kolekce, produktu, košíku a obsahové stránce ve skutečném Chromiu s axe-core. Report oprav přístupnosti testuje až 25 stránek, přidává krok 2 jako nákupní test pouze klávesnicí až k tlačítku pokladny, nabízí kód ve srovnání před a po a obsahuje checklist pro krok 3, který musí provést člověk se čtečkou obrazovky. Ani jedno nezaručuje shodu s ADA ani s WCAG.

Často kladené otázky

Je WCAG 2.2 pro e-shopy v USA povinná ze zákona?

Ministerstvo spravedlnosti USA (Department of Justice) nemá žádný předpis k ADA, který by stanovoval webový standard pro soukromé firmy, a jeho pokyny k webu z roku 2022 (otevře se v nové kartě) odkazují na WCAG jako na užitečné vodítko. Předžalobní výzvy (demand letters) se často odvolávají na WCAG 2.1 nebo 2.2 AA, proto své konkrétní povinnosti proberte s právníkem.

Splňuje WCAG 2.2 AA zároveň i WCAG 2.1 AA?

V praxi ano. WCAG 2.2 zachovává všechna kritéria úspěchu WCAG 2.1 kromě 4.1.1 Parsing, které W3C zrušilo jako zastaralé.

Jaká je minimální velikost cíle podle WCAG 2.2?

Podle 2.5.8 musí mít cíle alespoň 24 × 24 CSS pixelů, pokud se kruh o průměru 24 px se středem na každém menším cíli nedotýká jiných cílů ani jejich kruhů. Výjimku mají odkazy uvnitř vět, nestylované ovládací prvky prohlížeče, nezbytná zobrazení a cíle, pro které existuje rovnocenný ovládací prvek, jenž požadavek splňuje.

Znamená skóre přístupnosti 100 v Lighthouse, že je můj e-shop v souladu?

Ne. Automatizované nástroje odhalí jen část chyb a WebAIM upozorňuje, že absence zjištěných chyb neznamená, že je stránka přístupná nebo v souladu se standardem.

Porušuje přihlášení heslem kritérium 3.3.8?

Samo o sobě ne. Pole pro heslo kritérium splní, když do něj lidé mohou vkládat a používat správce hesel; selháním je až blokování vkládání nebo automatického vyplňování.

Jak často mám e-shop znovu testovat?

Testujte znovu po každé aktualizaci šablony, nové aplikaci nebo větší změně šablon stránek a nákupní cestu pravidelně namátkově kontrolujte, protože aplikace mohou bez varování vložit nový kód.

Zdroje

Všichni průvodci