Přístupnost (WCAG) pro e-shopy: proč na ni nezapomínat
Od 28. června 2025 je přístupnost pro většinu B2C e-shopů zákonná povinnost. Vysvětlujeme, koho se týká, podle čeho se měří a co na e-shopu opravit jako první.
Přístupnost dlouho patřila do kategorie „bylo by hezké“. Od 28. června 2025 už pro většinu e-shopů, které prodávají spotřebitelům, není volitelná. Zákon č. 424/2023 Sb. ji vyžaduje a Česká obchodní inspekce ji může kontrolovat.
Zákon je ale jen jeden důvod. Přístupný e-shop zvládne použít člověk se čtečkou obrazovky, starší zákazník se slabším zrakem, kdokoli se zlomenou rukou nebo s telefonem na slunci. Většina úprav, které přístupnost vyžaduje, zlepšuje nákup všem: čitelnější formuláře, jasnější chybové hlášky, větší klikací plochy. V článku projdeme, co přesně zákon chce, podle čeho se přístupnost měří a co na e-shopu opravit jako první.
Co říká zákon
Evropský akt o přístupnosti (European Accessibility Act, směrnice EU 2019/882) převzala Česká republika zákonem č. 424/2023 Sb., o požadavcích na přístupnost některých výrobků a služeb. Účinnost má od 28. června 2025. Podrobné shrnutí najdete v hesle Přístupnost (WCAG).
| Otázka | Odpověď k 9/2026 |
|---|---|
| Koho se týká | služeb elektronického obchodu pro spotřebitele, tedy B2C e-shopů a obchodníků na online tržištích, bez ohledu na platformu |
| Koho ne | mikropodniků (méně než 10 zaměstnanců a roční obrat nebo bilanční suma nejvýše 2 mil. EUR) a čistě B2B prodeje |
| Kdo kontroluje | u e-shopů Česká obchodní inspekce |
| Sankce | pokuty odstupňované podle druhu přestupku, nejvyšší horní hranice 10 mil. Kč |
| Informační povinnost | ve všeobecných obchodních podmínkách nebo obdobném dokumentu uvést, jak služba splňuje požadavky na přístupnost |
| Zjištěný nesoulad | bez zbytečného odkladu napravit a informovat dozorový orgán |
Zákon zná i výjimku pro nepřiměřenou zátěž. Pokud by splnění požadavků znamenalo zásadní změnu služby nebo nepřiměřenou zátěž, poskytovatel to posoudí, zdokumentuje a oznámí dozorovému orgánu. Nejde o obecnou únikovou cestu: platí jen v rozsahu, v jakém je zátěž skutečně odůvodněná.
Podle čeho se přístupnost měří
Zákon sám neříká „kontrast 4,5 : 1“. Technické požadavky se prokazují harmonizovanou normou EN 301 549, která pro web odkazuje na WCAG (Web Content Accessibility Guidelines) od W3C.
- EN 301 549 v3.2.1 je verze citovaná v Úředním věstníku EU, a tedy právní referenční bod. Odkazuje na WCAG 2.1 úrovně AA.
- EN 301 549 v4.1.1 vydal ETSI 2. září 2026. Přechází na WCAG 2.2 a nově přímo mapuje požadavky na Evropský akt o přístupnosti. Referenčním bodem se stane až po citaci v Úředním věstníku EU.
- WCAG 2.2 je doporučením W3C od října 2023. Oproti 2.1 přidává na úrovních A a AA šest kritérií. Pro e-shop jsou nejdůležitější: prvek s fokusem nesmí zakrývat lepící hlavička ani cookie lišta, klikací plochy mají mít aspoň 24 × 24 CSS pixelů, ovládání tažením musí mít alternativu, v objednávce se nemají znovu vyžadovat už zadané údaje a přihlášení nesmí stát jen na hádance nebo opisování kódu.
- WCAG 3 je k září 2026 stále pracovní návrh, poslední verze vyšla 10. září 2026. W3C uvádí, že hotový standard to ještě několik let nebude a že WCAG 2 po jeho dokončení nebude hned zrušen.
Praktický závěr: cílte na WCAG 2.2 AA. Pokrývá i 2.1, takže splníte dnešní referenční normu a zároveň budete připraveni na novou. Na WCAG 3 nečekejte.
Kde e-shopy nejčastěji padají
Přístupnost se nerozhoduje na homepage, ale v nákupní cestě. Problémy se typicky opakují na stejných místech:
| Místo | Typický problém | Proč vadí |
|---|---|---|
| Výpis a filtry | filtry jako vlastní prvky bez role a stavu, zaškrtnutí nejde klávesnicí | čtečka nepozná, co je vybrané |
| Detail produktu | výběr varianty jen barevnými čtverečky bez textu, galerie bez alternativních textů | informace sdělená jen barvou nebo obrázkem |
| Košík | tlačítka +/− malá, bez popisku, změna ceny se neoznámí | nevidomý neví, co se stalo |
| Checkout | pole bez popisků, jen placeholder, chybová hláška jen červenou barvou | formulář nejde vyplnit |
| Lišty a okna | cookie lišta, chat a pop-up zakrývají fokus nebo nejdou zavřít klávesnicí | uživatel uvízne |
| Doplňky třetích stran | platební widget, recenze, výběr výdejního místa | část cesty nemáte pod kontrolou |
Checkout má z pohledu tržeb největší váhu. Jak ho zjednodušit obecně, popisujeme v článku Checkout UX. Na čitelnost a kontrast textu se zaměřuje článek Typografie v ecommerce.
Checklist pro e-shop
Projděte si ho na vlastním e-shopu. Většinu bodů ověříte za odpoledne bez speciálních nástrojů.
- Klávesnice. Odpojte myš a projděte nákup od kategorie po odeslání objednávky jen klávesou Tab, Enter a šipkami. Kde uvíznete, tam je problém.
- Viditelný fokus. Vždy je vidět, kde se nacházíte, a fokus nezakrývá lepící hlavička, chat ani cookie lišta.
- Alternativní texty. Produktové fotky a ikony nesoucí informaci mají popis. Dekorativní obrázky mají prázdný alternativní text.
- Kontrast. Běžný text aspoň 4,5 : 1, velký text 3 : 1. Včetně ceny, akčních štítků a textu na tlačítkách.
- Nejen barvou. Dostupnost, chyba ve formuláři nebo vybraná varianta nejsou sdělené jen barvou.
- Formuláře. Každé pole má viditelný popisek, ne jen placeholder. Chybová hláška říká, co a jak opravit.
- Klikací plochy. Výběr varianty, +/− v košíku a zavírací křížky mají aspoň 24 × 24 px.
- Zvětšení. Stránka funguje při přiblížení na 200 % a na úzkém displeji bez vodorovného posouvání.
- Pohyb. Animace a automatické karusely jde zastavit a web respektuje nastavení omezeného pohybu v systému.
- Struktura. Nadpisy jdou po sobě logicky (jeden H1, pod ním H2), tlačítka jsou tlačítka a odkazy odkazy.
- Čtečka obrazovky. Aspoň jednou projděte nákup s čtečkou (VoiceOver na Macu a iPhonu, NVDA na Windows).
- Informace o přístupnosti. V obchodních podmínkách nebo na samostatné stránce popište, jak e-shop požadavky splňuje, a uveďte kontakt pro nahlášení problému.
Automatické nástroje (například Lighthouse v prohlížeči Chrome) pomohou s kontrastem nebo chybějícími alternativními texty. Odhalí ale jen část problémů. Ovládání klávesnicí, srozumitelnost chybových hlášek a logiku nákupu musí ověřit člověk.
Proč přístupnost neřešit overlayem
Na trhu jsou widgety, které slibují „přístupnost jedním skriptem“: přidají panel se zvětšením písma, kontrastním režimem a čtením nahlas. Vypadá to jako rychlé řešení. Widget ale neopraví to, co tvoří jádro problému: chybějící popisky polí, filtry nedostupné z klávesnice, špatnou strukturu nadpisů nebo neoznámené změny v košíku. Soulad s WCAG vzniká v šabloně.
Jak na to prakticky
Nejlevnější cesta je řešit přístupnost na úrovni komponent. Když opravíte tlačítko, formulářové pole nebo výběr varianty jednou v komponentové knihovně, oprava se propíše do celého webu. Barvy s dostatečným kontrastem patří rovnou do design systému.
Doporučený postup:
- Audit nákupní cesty klávesnicí, čtečkou a měřením kontrastu. Výstupem je seznam nálezů podle priority.
- Opravy s největším dopadem: checkout, košík, výběr varianty, lišty a okna.
- Doplňky třetích stran: u dodavatelů platebních widgetů, chatu a recenzí si vyžádejte informace o přístupnosti, případně hledejte alternativu.
- Informace o přístupnosti do obchodních podmínek.
- Kontrola při každé změně: nová šablona nebo plugin umí přístupnost rozbít stejně rychle jako strukturovaná data.
Přístupnost kontrolujeme v rámci UX auditu, který obvykle trvá do 10 dnů. Projdeme nákupní cestu klávesnicí i čtečkou, změříme kontrasty a sepíšeme nálezy s prioritou. Pokud chystáte redesign, cílíme na WCAG 2.2 AA od prvního návrhu, což vyjde výrazně levněji než dodatečné opravy. Širší pohled na to, co UX audit odhalí, najdete v článku UX audit e-shopu.
Potřebujete s tím pomoct?