Přístupnost e-shopů podle zákona č. 424/2023 Sb.: Kompletní postup

V červnu 2025 vstupuje v účinnost zákon č. 424/2023 Sb., který zavádí povinnost digitální přístupnosti pro e-shopy a online služby. Tento zákon vychází ze směrnice EU 2019/882 a jeho smyslem je zajistit, aby digitální služby byly přístupné všem – včetně lidí se zdravotním znevýhodněním.

Zákon se netýká jen veřejné sféry, jak tomu bylo dříve, ale dopadá i na komerční subjekty, jako například provozovatele e-shopů, a právě proto je možná i pro vás důležité věnovat mu pozornost. Účinnost zákona je stanovena na 28. června 2025.

Zákon zavádí pro e-shopy nové povinnosti, ale:

• nestanovuje konkrétní technické řešení, pouze se odkazuje na tzv. harmonizovanou normu (EN 301 549) a principy WCAG 2.2,
• přístupnost neznamená změnit design nebo zrušit funkce, ale zajistit, že je může použít každý,
• nejedná se o náročné úpravy – pokud víte, co dělat, zvládnete to s rozumnou investicí.

Co hrozí při nedodržení?

V případě nesplnění nároků zákona 424/2023 Sb. zákon počítá s možností sankcí. Hrozí:

• kontroly ČOI na základě podnětů,
• upozornění a výzvy k nápravě,
• pokuty v případě neplnění.

Checklist požadavků

Abychom se v přístupnosti vyznali, prošli jsme právní analýzy, oficiální výklady a technické standardy. Na základě toho jsme sestavili třináctibodový checklist, který odráží požadavky harmonizované normy EN 301 549 a principy WCAG 2.2 na úrovni AA.

Co váš e-shop musí podle zákona 424/2023 Sb. splňovat:

Všechny webové úpravy jsme nastudovali, otestovali a sami nasadili u několika projektů pomocí nástrojů jako NVDA, JAWS, VoiceOver, TalkBack, Wave, LightHouse nebo axe DevTools. Přinášíme přehled hlavních oblastí, na které se zákon zaměřuje:

1. Přístupnost přes klávesnici – celý web musí být ovladatelný bez myši.
2. Kompatibilita s čtečkami obrazovky – web musí fungovat s čtečkami obrazovky jako NVDA, VoiceOver, je potřeba zkontrolovat sémantiku zdrojového kódu, jako třeba úrovně nadpisů.
3. Textové alternativy obrázků a médií – každý obrázek musí mít smysluplný alt popisek.
4. Dostatečný kontrast – barvy musí být čitelné i pro osoby se zrakovým omezením, tedy v minimálním poměru kontrastu 4,5:1.
5. Zvětšení textu a responzivita – web musí být použitelný i při 200% zvětšení, a to i na mobilních zařízeních.
6. Přístupné formuláře – každé pole musí mít správně přiřazený popisek.
7. Logická struktura obsahu – nadpisy, navigace i tlačítka musí mít logickou hierarchii.
8. Označení jazyka stránky – jazyk webu musí být korektně definován příslušným tagem.
9. Viditelný a nepřekrytý focus ovládacích prvků – aktivní prvky musí být vždy zřetelně označeny.
10. Velikost klikacích prvků – tlačítka musí být pohodlná i na mobilu v minimální velikosti 24x24 px.
11. Ovládání bez nutnosti táhnutí – drag & drop musí mít alternativu, například v podobě ovládaní skrze tlačítka klávesnice.
12. Konzistentní nápověda a kontakt – navigace, kontakt a pomoc musí být vždy dostupné.
13. Zveřejněné prohlášení o přístupnosti – informace o splnění požadavků a nástrojích a postupech, kterými toho bylo dosaženo, musí být veřejně uvedeny na viditelné samostatné podstránce nebo v rámci obchodních podmínek.

Tento článek může sloužit jako vodítko pro každého, kdo se rozhodne zvládnout přístupnost svépomocí. Pokud se do úpravy vašeho e-shopu chcete pustit sami, doporučujeme postupovat podle níže uvedeného checklistu, projít jednotlivé oblasti webu a identifikovat, co je třeba upravit. S tím souvisí i povinnost sepsat tzv. prohlášení o přístupnosti, jehož zveřejnění na webu je od 28. června povinné. Tento dokument má podle zákona shrnovat, jak váš e-shop požadavky na přístupnost plní a které nástroje nebo postupy jste při jejich implementaci použili.

Postup řešení kompatibility s Prohlášením o přístupnosti

Základní shrnutí postupu:

1. Začněte auditovat web uvedenými nástroji.
2. Projděte požadavky - každý bod otestujte a případně opravte.
3. Každou změnu konzultujte s testem přes screen reader a ověřte automatickým testem.
4. Průběžně aktualizujte stránku Plnění požadavků a uveďte, jak byly konkrétní body splněny.
5. Výsledek: web / e-shop je kompatibilní se zákonem a průběžně jej udržujete.

Testování se čtečkami obrazovky:

Screen readery (čtečky obrazovky)

• NVDA (Windows, zdarma)
  • Web NVDA (česky i anglicky)
  • Nejrozšířenější čtečka na Windows, hodí se na testování běžných webů.
  • S podporou klávesnicového ovládání.
• JAWS (Windows, placený, ale velmi rozšířený)
  • Web JAWS
  • Profesionální řešení pro nevidomé, podporuje složité webové aplikace.
• VoiceOver (macOS/iOS, zdarma)
  • Vestavěná čtečka v MacBook/iPhone/iPad. 
  • Aktivace v nastavení přístupnosti.
• TalkBack (Android, zdarma)
  • Vestavěná čtečka na Android telefonech
  • Aktivace v nastavení -> Přístupnost.

Návody na testování

• Testování webu s NVDA (WebAIM)
• Jak začít s VoiceOver na Macu

Nástroje pro testování přístupnosti:

• Slouží k rychlému ověření základních problémů.
  • axe DevTools (Chrome/Firefox rozšíření): axe DevTools
  • Lighthouse (nástroj v Chrome DevTools): Google Lighthouse
  • WAVE: Online kontrola zde

Postup kontroly a řešení dle požadavků

1. Přístupnost přes klávesnici

• Úkol: Všechny funkce a navigace musí být použitelné pouze pomocí klávesnice (Tab, Enter, mezerník, šipky).
• Implementace:
  • Otestovat přecházení (Tab/Shift+Tab) přes všechny ovládací prvky.
  • Nepoužívat nestandardní widgety bez správného ARIA značení.
  • Nastavit správně tabindex tam, kde je to nutné.
  • Nezablokovat uživatele v modálních oknech.

2. Kompatibilita se čtečkami obrazovky

• Úkol: Ověřit, že web je správně čitelný a ovladatelný pomocí screen readerů (čteček obrazovky), případně opravit podle zásad přístupnosti
• Implementace:
  • Jsou použité sémantické HTML značky (<h1>, <nav>, <main>, <button>, <label>,  apod.).
  • Každý obrázek má smysluplný atribut alt.
  • Všechny formulářové prvky mají přiřazený <label>.
  • Grafické prvky a ikony nejsou použity bez textového popisu; kde je potřeba, je doplněn skrytý text nebo ARIA popisek.
  • Nadpisy používají správnou úroveň (<h1>, <h2>, … bez přeskočení úrovní).
  • Dynamický obsah (modální okna, dialogy) je označen pomocí ARIA atributů (např. role="dialog", aria-live).
  • Jazyk stránky je správně nastaven (např. <html lang="cs">).
  • Menu je v <nav> a je popsané pro čtečky obrazovky (aria-label="Hlavní navigace").
  • Navigační odkazy mají popisné názvy.

3. Textové alternativy obrázků a médií

• Úkol: Každý obrázek musí mít smysluplný atribut alt. Dekorativní obrázky by měly mít prázdný alt="" (vizuální oddělovače, opakující se ilustrační ikony, grafické pozadí atd.)
• Implementace:
  • Projít HTML/šablony, zkontrolovat obrázky.
  • Doplnit nebo upravit atributy alt.
  • Videa opatřit titulky nebo přepisem.

4. Dostatečný barevný kontrast

• Úkol: Texty a ovládací prvky musí být dobře čitelné (poměr kontrastu min. 4,5:1).
• Implementace:
  • Prověřit hlavní barvy přes WebAIM Contrast Checker.
  • Upravit barvy v CSS podle potřeby.

5. Zvětšení textu a responzivita

• Úkol: Web musí fungovat při zvětšení textu až na 200% a na všech zařízeních.
• Implementace:
  • Používat raději relativní jednotky (em, rem, %) místo px (zajišťují maximální kompatibilitu napříč zařízeními, prohlížeči i asistenčními technologiemi).
  • Testovat zoom v prohlížeči.
  • Ověřit chování na mobilu/tabletu (responzivní design).

6. Přístupné formuláře

• Úkol: Každý vstupní prvek má přiřazený <label>, chybová hlášení jsou srozumitelná.
• Implementace:
  • Prověřit všechny formuláře.
  • Každé políčko musí mít viditelný popisek (label).
  • Error hlášky zpřístupnit pro čtečky (aria-live, role="alert").

7. Logická struktura obsahu

• Úkol: Správné používání tagů (header, nav, main, footer, button, label, atd.), uživatel se snadno orientuje v obsahu, navigační prvky jsou jasné a předvídatelné.
• Implementace:
  • Projít HTML, zkontrolovat správnou hierarchii nadpisů (<h1>, <h2>, ...).
  • Používání tlačítek <button>.
  • Menu je v <nav> a popsané pro čtečky (aria-label="Hlavní navigace")
  • Validovat kód: W3C Validator

8. Označení jazyka stránky

• Úkol: Celá stránka deklaruje hlavní jazyk pomocí <html lang="cs">.
• Implementace:
  • Zkontrolovat šablonu stránky.
  • V případě cizojazyčného obsahu označit změnu.

9. Focus - viditelný, dostatečně patrný

• Úkol: Fokus ovládacích prvků musí být vždy viditelný a nesmí být překryt a musí být dostatečně patrný (např. rámeček, změna barvy).
• Implementace:
  • Ověřit viditelnost fokusu na všech interaktivních prvcích (tlačítka, odkazy, formuláře). Zajistit, že fokus není překryt jinými prvky
  • Upravit CSS pro zřetelný vzhled focusu (outline, box-shadow nebo border).
  • Ověřit při ovládání pouze klávesnicí (Tab / Shift+Tab).

10. Minimální velikost cíle

• Úkol: Tlačítka a ovládací prvky mají minimálně 24×24 px, aby šly pohodlně ovládat i na dotykových zařízeních.
• Implementace:
  • Zkontrolovat, že každý klikací prvek (tlačítka, ikonky, odkazy v menu...) má:
    • buď samotný rozměr min. 24×24 px
    • nebo dostatečný padding, který výsledný klikací prostor rozšíří
  • Otestovat na dotykových zařízeních (mobil, tablet), že se dá prvek pohodlně stisknout bez rizika chyby.
  • Pokud nelze technicky zvětšit (např. kvůli designu), doporučuje se rozšířit aktivní oblast ovládacího prvku.
• Nemusí být splněno, když: 
  • Funkce lze dosáhnout pomocí jiného ovládacího prvku na stejné stránce, který splňuje toto kritérium.
  • Cíl je ve větě nebo je jeho velikost jinak omezena výškou řádku textu, který není cílem.
  • Všechny vyjímky

11. Ovládání bez nutnosti táhnutí

• Úkol: Funkce na webu nesmí být závislé výhradně na tažení (drag & drop). Uživatel musí mít možnost ovládat tyto funkce i jiným způsobem – například pomocí kliknutí nebo klávesnice.
• Implementace:
  • Ověřit funkčnost bez myši, pouze pomocí klávesnice a v prostředí čteček obrazovky.
  • Pokud není alternativa dostupná, danou funkci je třeba přehodnotit nebo přepracovat.

12. Nápovědy, navigace, kontaktní možnosti

• Úkol: Pokud web nabízí kontaktní nebo podpůrné možnosti (např. e-mail, nápovědu, chat), musí být přístupné a umístěné konzistentně na všech stránkách. Stejně tak navigace, nápovědy apod.
• Implementace:
  • Ujistit se, že podpůrné prvky (navigace, kontakty…) jsou:
    • viditelné, dostupné a funkční
    • umístěny konzistentně v rámci všech stránek webu 
  • Ověřit při ovládání pouze klávesnicí.

13. Informace o přístupnosti ve veřejných dokumentech

• Úkol: Zveřejnit informace o splnění požadavků na přístupnost ve všeobecných obchodních podmínkách nebo na webu.
• Implementace:
  • Uvést v obchodních podmínkách nebo na samostatné stránce popis, jak služba splňuje požadavky na přístupnost. 
  • Na požádání poskytnout informace i ve zvukové podobě.
  • Zajistit, že informace jsou ve formátu přístupném pro všechny (čitelný text, ne jen obrázek).