Šest nových kritérií WCAG 2.2, na které se zaměřit již teď

EN 301 549 V4 posouvá klauzule 9–11 z WCAG 2.1 na 2.2. Pro vývojáře to znamená dva nové požadavky úrovně A, čtyři AA a jedno zrušené kritérium.

Draft EN 301 549 v4.1.0 vyšel v listopadu 2025, finální v4.1.1 se očekává v Úředním věstníku EU zhruba v říjnu 2026. Do té doby je harmonizovanou normou v 3.2.1 a právním měřítkem WCAG 2.1 AA. Několik nových kritérií padá přímo na typické e-shopové vzory: checkout, filtry, drag & drop řazení, přihlašovací formulář.

Přehled změn

Kde to na e-shopu typicky padá:

• 3.2.6 Consistent Help, (úroveň A) - Kontakt/chat jinde na stránce produktu než v košíku
• 3.3.7 Redundant Entry, (úroveň A) - Doručovací adresa se opisuje z fakturační
• 2.4.11 Focus Not Obscured (Min), (úroveň AA) - Sticky header, cookie lišta, chat widget
• 2.5.7 Dragging Movements, (úroveň AA) - Cenový slider, řazení, galerie obrázků
• 2.5.8 Target Size (Minimum), (úroveň AA) - Ikony +/− u množství, filtry, patička
• 3.3.8 Accessible Authentication, (úroveň AA) - CAPTCHA, blokovaný paste, OTP bez autocomplete

Zrušeno je 4.1.1 Parsing – WCAG 2.2 ho označilo za obsoletní, protože prohlížeče i asistivní technologie dnes chyby v markupu řeší samy. Prakticky: duplicitní ID nebo nezavřený tag už není samostatné selhání kritéria. Neznamená to, že validní HTML nepotřebujete – duplicitní ID vám rozbije aria-labelledby a neprojde  jiné kritérium, typicky4.1.2 Name, Role, Value.

 

3.2.6 Consistent Help (A)

Pokud stránka nabízí nápovědu – kontaktní údaje na člověka, kontaktní mechanismus, samoobslužnou nápovědu nebo automatizovaného asistenta – musí být na sadě stránek ve stejném relativním pořadí. Kritérium nevyžaduje nápovědu poskytovat.

Nejčastější porušení není v šabloně, ale v odchylkách: jednokrokový checkout, který používá jiný layout než zbytek webu, nebo landing page z kampaně bez patičky. Řešení je architektonické – nápovědu vykreslovat v layoutu, ne v jednotlivých šablonách.

Poznámka: „stejné relativní pořadí" neznamená stejný pixel. Responzivní posun v mobilní verzi je v pořádku, dokud je pořadí vůči ostatním prvkům zachováno.

 

3.3.7 Redundant Entry (A)

V rámci jednoho procesu nesmíte chtít znovu informaci, kterou už uživatel zadal – buď ji předvyplňte, nebo mu ji nabídněte k výběru. Výjimky: opětovné zadání je nezbytné (potvrzení hesla), jde o test paměti, nebo informace už neplatí.

Checkout je hlavní podezřelý. Konkrétně:

• Checkbox „doručovací adresa je stejná jako fakturační" – a musí být zaškrtnutý nebo alespoň dostupný.
• E-mail zadaný v prvním kroku se nesmí znovu vypisovat u vytvoření účtu.
• Po chybě validace nesmí formulář vymazat ostatní pole. Tohle je klasika u serverového renderu bez zachování stavu.

Neplní kritérium, ale když je autocomplete off, přímo na poli tak to kritérium porušuje. A to konkrétně 1.3.5 (to je WCAG 2.1):

<input name="email" autocomplete="email">
<input name="street" autocomplete="shipping street-address">
<input name="zip" autocomplete="shipping postal-code">

 

2.4.11 Focus Not Obscured (Minimum) (AA)

Prvek, který získá fokus klávesnicí, nesmí být zcela skrytý za jiným obsahem. Verze „Minimum" povoluje částečné překrytí; úplné skrytí je selhání.

Sticky header je viník číslo jedna. Prohlížeč odscrolluje na prvek tak, aby byl ve viewportu, ale nezná výšku vaší fixní hlavičky. Řeší se to jedním řádkem CSS:

html {
  scroll-padding-top: var(--header-height, 96px);
}

Další časté případy: cookie lišta ukotvená dole překryje zaměřený prvek v patičce; chat widget v pravém dolním rohu překryje tlačítko „Do košíku" ve sticky liště; modální okno, které nezachytává fokus a nechá uživatele tabovat na obsah pod overlayem (tzv. focus trap).

Test: projděte celou stránku klávesou Tab při zavřeném i otevřeném cookie banneru. Pokud máte chat, zkuste na různých velikostech zařízení použít Tab při zapnutém chatu a chatu sbaleném do lišty. Zvětšení stránky na 200 % odhalí další případy, protože sticky prvky zaberou víc plochy.

 

2.5.7 Dragging Movements (AA)

Cokoli, co se ovládá tažením, musí mít alternativu jedním ukazatelem (klik nebo tap), pokud tažení není nezbytné nebo ho nevynucuje user agent.

E-shopové kandidáty:

• Cenový filtr jako dvojitý slider – přidejte číselné inputy „od / do". Nativní input type="range" je klávesnicí ovladatelný, ale kritérium se ptá na alternativu jedním ukazatelem, ne jen na klávesnici.
• Karusel produktů ovládaný swipem – potřebuje viditelná tlačítka předchozí/další.
  Před/po porovnání obrázků s posuvnou přepážkou – doplňte přepínač nebo dvě samostatná zobrazení.
• Drag & drop řazení položek v administraci nebo v seznamu přání – přidejte šipky nahoru/dolů nebo pole s pořadovým číslem.

Pozor na knihovny: mnoho slider komponent (noUiSlider, Swiper) umí klávesnici, ale alternativu jedním kliknutím musíte doplnit sami.

 

 2.5.8 Target Size (Minimum) (AA)

Cíl musí mít alespoň 24 × 24 CSS pixelů. Výjimky: dostatečné rozestupy (kolem cíle se vejde kružnice o průměru 24 px, která nezasahuje do jiného cíle), ekvivalentní cíl jinde na stránce, cíl uvnitř věty nebo bloku textu (inline), cíl stylovaný user agentem a případy, kdy je konkrétní velikost nezbytná.

Praktické minimum, které vás dostane přes většinu nálezů:

.icon-btn, .qty-btn, .footer a, .pagination a {
  min-inline-size: 24px;
  min-block-size: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

Pokud vizuálně nechcete tlačítko zvětšit, rozšiřte klikací plochu pseudoprvkem:

.icon-btn { position: relative; }
.icon-btn::after {
  content: ""; position: absolute; inset: 50% auto auto 50%;
  inline-size: 24px; block-size: 24px;
  transform: translate(-50%, -50%);
}

 

Typické nálezy: tlačítka +/− u množství v košíku, „×" pro odebrání položky nebo zrušení filtru, hvězdičky u hodnocení, ikony sociálních sítí v patičce, stránkování a šipky karuselu. Odkazy v běžném odstavci textu spadají pod inline výjimku – ty řešit nemusíte..

 

3.3.8 Accessible Authentication (Minimum) (AA)

Přihlášení nesmí vyžadovat kognitivní test paměti nebo přepisu, ledaže je k dispozici alternativa, mechanismus pomoci (správce hesel), rozpoznání běžného objektu nebo obsahu, který uživatel sám poskytl.

Nejčastější reálná selhání:

• Blokovaný paste do pole s heslem nebo OTP. Odstraňte veškeré handlery typu onpaste="return false". Toto je nejrychlejší oprava s největším dopadem.
• Textová CAPTCHA s přepisem zkomolených znaků. Rozpoznání běžných objektů („vyberte obrázky s autobusem") je podle výjimky přípustné, přepis znaků není.
• Chybějící atribut autocomplete, takže správce hesel pole nenajde.
• Rozdělení OTP kódu do šesti samostatných inputů bez podpory automatického vyplnění.

<input type="password" name="password" autocomplete="current-password">
<input type="text" name="otp" inputmode="numeric"
       autocomplete="one-time-code" maxlength="6">

 

Testovací postup, který zabere hodinu

1. Projděte pomocí klávesnice kompletní cestu zákazníka: kategorie → detail produktu → košík → checkout → přihlášení. Sledujte, jestli je fokus vždy viditelný.
2. Zopakujte krok 2 se zobrazeným cookie bannerem a otevřeným chatem.
3. Zvětšete stránku na 200 % a projděte checkout znovu.
4. Vyplňte checkout, vyvolejte chybu validace a ověřte, že se nic nevymazalo.
5. Zkuste vložit heslo ze schránky do přihlašovacího formuláře.
6. Najděte na webu vše, co se ovládá tažením, a ověřte, že to jde ovládat i kliknutím.

 

Co nezachytí automatizované nástroje

Automatizované testování odhalí zhruba 30–57 % problémů podle metodiky měření. Z těchto šesti kritérií automatizované nástroje  spolehlivě změří jen 2.5.8 a částečně 3.3.8. Konzistentní umístění nápovědy, viditelnost fokusu pod sticky prvky, existence alternativy k tažení a redundantní zadávání jsou úsudkové otázky, které musí projít člověk.

Praktický důsledek: pokud reportujete shodu klientovi nebo vedení, uveďte u každého kritéria, jestli šlo o automatický nebo manuální nález. Až v roce 2026 vyjde odkaz na V4 v Úředním věstníku, budete mít doklad místo odhadu.

Potřebujete to mít hotové dřív, než přijde termín?

Virtual Visit dělá audity přístupnosti e-shopů a webů proti WCAG 2.1 i 2.2 AA – automatický sken plus manuální průchod klávesnicí a čtečkou obrazovky. Dostanete seznam nálezů s odkazem na konkrétní selektor a doporučenou opravu.
Kontakt: ondrej.kral@virtualvisit.cz · Virtual Visit

 

Zdroje:

• Draft ETSI EN 301 549 V4.1.0 (2025-11)
• ETSI EN 301 549 V3.2.1 (2021-03) – aktuální harmonizovaná norma
• W3C: Web Content Accessibility Guidelines (WCAG) 2.2
• Evropská komise: Web Accessibility Directive – standards and harmonisation
• Zákon č. 99/2019 Sb. a zákon č. 424/2023 Sb.