EAA checklist přístupnosti pro weby a e-shopy

O nařízení EAA přístupnosti, které vstupuje v platnost 28. června 2025, a jeho dopadech jsme už psali dříve – nejprve ve článku o školení přístupnosti, později ve článku co to znamená pro e-shopy. Tento článek navazuje prakticky: sdílíme náš vlastní EAA Accessibility checklist (kontrolní seznam) přístupnosti.

Checklist přístupnosti

Na konci článku najdete odkaz ke stažení checklistu v PDF.

Struktura obsahu

• Nadpisy – správná hierarchie a značení (<h1> až <h6>)
• Pouze jeden <h1> tag
• Konzistentní navigace napříč stránkami
• Sémanticky označené sekce – <header>, <nav>, <main>, <section>, <footer>…

Ne‑textový obsah (obrázky, ikony, média)

• Obrázky mají smysluplný atribut alt (nebo prázdný, pokud jsou dekorativního charakteru)
• Ikony (např. SVG) mají přístupný popis (aria-label nebo skrytý text)
• Video má titulky a případně zvukový popis (audiodescription)
• <iframe> s YouTube videem má atribut title popisující obsah

Klávesová ovladatelnost

• Vše lze ovládat bez myši
• Focus je viditelný a jednoznačný (ne jen jemná změna barvy)
• Modální okna mají tzv. focus trap
• Po zavření modálního okna se focus vrací na původní místo

Asistivní technologie

• Formulářové prvky mají <label> nebo atribut aria-label
• Skrytý text (např. třída .sr-only) informuje o funkci, pokud ikona nestačí
• Důležité stavy mají atribut aria-live (např. chybové hlášky)
• Obsah mimo aktivní modální okno má aria-hidden="true"

Formuláře a nákupní proces

• Každý vstupní prvek má popisek (<label>) nebo atribut aria-label / aria-labelledby
• Skupiny <input type="checkbox"> a <input type="radio"> jsou ve <fieldset> s <legend>
• Chyby ve formuláři jsou jasně popsané
• Validace probíhá i bez JavaScriptu
• Košík, výběr dopravy a platby jsou přístupné z klávesnice a čtečkami
• Srozumitelně popsaná tlačítka
• Proces objednávky umožňuje opravit chyby
• Informace o produktech (parametry, cena) jsou přístupné a strojově čitelné

Barvy, text a čitelnost

• Barevný kontrast textu vůči pozadí je min. 4,5:1
• Text lze zvětšit na 200 % bez ztráty obsahu či funkce
• Důležité informace nejsou sdělovány pouze barvou
• Interaktivní prvky jsou dostatečně velké (doporučeno min. 44 × 44 px)
• Text není skrytý přes overflow: hidden (bez možnosti rozbalení)

Responzivita

• Rozvržení pomocí CSS Grid nebo Flexbox se přizpůsobuje i při zvětšení písma (nejen šířce obrazovky)
• Používají se relativní jednotky (em, rem, %) místo absolutních (px, pt)

Technické řešení

• Kód HTML je validní
• Dynamické části mají odpovídající role nebo atributy (aria-expanded, aria-controls…)
• Není blokováno čtení screen readery (např. role="presentation" je používáno správně)
• Nepoužívají se nepřístupné vzory, např. <a><label><input></label></a>, tabulky pro rozvržení (ty pak musí být doplněny o atribut role="presentation") apod.

Prohlášení o přístupnosti

• Je snadno dohledatelné (např. v patičce)
• Popisuje aktuální stav souladu s WCAG 2.1 AA
• Uvádí známé nedostatky a plán jejich řešení
• Obsahuje kontaktní údaje pro zpětnou vazbu
• Uvádí datum poslední aktualizace

Nejde o formálně dokonalý nebo 100% vyčerpávající seznam. Ale pokrývá to nejdůležitější, s čím se u webů a e-shopů běžně setkáváme. Checklist budeme případně postupně rozšiřovat o nové poznatky z praxe.

Stáhněte si EAA checklist v PDF a mějte ho neustále po ruce.

Stáhnout checklist