Jak checklist používat
Checklist odhalí typické bariéry, ale nenahrazuje audit. Automatické nástroje (WAVE, axe, Lighthouse) najdou zhruba třetinu problémů - zbytek se pozná jen ručním průchodem klávesnicí a čtečkou.
Odškrtnutá políčka se nikam neukládají. Stránka je připravená k tisku, pokud chcete checklist na papíře.
Stáhnout a odkazy
- Checklist v Excelu Sloupce Stav, Odpovědný, Termín a Poznámka navíc. Stáhněte, pojmenujte po projektu a odškrtávejte.
- Checklist v PDF K vytištění, se zaškrtávacími políčky. Pro papírový průchod webem.
- Vzor prohlášení o přístupnosti Připravený text podle § 14 zákona. Vyplňuje se až podle výsledků z tohoto checklistu.
1. Struktura a HTML
| Hotovo | Kritérium | Co zkontrolovat | Dopad |
|---|---|---|---|
| SémantikaWCAG 1.3.1 (A) | Nadpisy jdou logicky za sebou: jeden h1 na stránce, podnadpisy h2 → h3 bez přeskočení. Seznamy jsou ul / ol, ne vizuální odrážky. Tabulky mají th scope. |
Čtečka umí procházet podle nadpisů. Test: zapněte NVDA a stiskněte H. | |
| Platné HTMLWCAG 4.1.1 (A) | HTML bez závažných chyb, id jsou na stránce jedinečná. Ověřte validátorem W3C. |
Duplicitní id matou čtečky i automatizaci. |
|
| Pořadí obsahuWCAG 1.3.2 (A) | Pořadí prvků v kódu odpovídá vizuálnímu pořadí; žádný prvek není posunutý čistě přes CSS mimo logický tok. | Klávesnicový uživatel skáče po stránce v nesmyslném pořadí. | |
| Název stránkyWCAG 2.4.2 (A) | Každá stránka má smysluplný a jedinečný title. Příklad: Košík | Název e‑shopu. |
Orientace v záložkách prohlížeče; čtečka oznámí název stránky. | |
| Jazyk stránkyWCAG 3.1.1 (A) | <html lang="cs"> je nastaven správně. Cizojazyčné úseky mají vlastní lang. |
Čtečka čte text se správnou výslovností. | |
| LandmarksWCAG 1.3.1 (A) | Stránka má pojmenované oblasti header, nav, main, footer. Opakující se navigace má aria-label. |
Rychlá navigace čtečkou přes klávesové zkratky. |
2. Navigace a odkazy
| Hotovo | Kritérium | Co zkontrolovat | Dopad |
|---|---|---|---|
| Skip linkWCAG 2.4.1 (A) | Na začátku stránky je odkaz „Přeskočit na obsah“ mířící na main. Může být skrytý a zobrazit se až při fokusu. |
Bez něj musí klávesnicový uživatel proklikat celou navigaci na každé stránce. | |
| Účel odkazuWCAG 2.4.4 (A) | Text odkazu nebo tlačítka sám o sobě vysvětluje cíl. Místo „Více“ použijte „Více o produktu XYZ“. Obrázkové odkazy mají alt text. | Uživatel čtečky slyší seznam odkazů bez kontextu. | |
| KonzistenceWCAG 3.2.3 (AA) | Navigace a sdílené prvky se na všech stránkách chovají a vypadají stejně. Košík a vyhledávání jsou vždy na stejném místě. | Dezorientace při přechodu mezi stránkami. | |
| Nové oknoWCAG 2.4.4 (A) | Otevírá-li se odkaz v novém okně, je to zřejmé - ikonou nebo skrytým textem v aria-label. |
Uživatel čtečky neví, že opustil aktuální stránku. |
3. Ovládání klávesnicí a fokus
Proč začít touto oblastí
Když nákupní tok nejde projít klávesnicí, část zákazníků nemůže nakoupit vůbec. Tuhle oblast testujte jako první.
| Hotovo | Kritérium | Co zkontrolovat | Dopad |
|---|---|---|---|
| KlávesniceWCAG 2.1.1 (A) | Celý nákupní tok od úvodní stránky po potvrzení objednávky je průchodný jen klávesnicí (Tab, Enter, mezerník, šipky, Esc). Žádný prvek nesmí „chytat“ fokus. | Motoricky postižení uživatelé nemohou nakoupit. | |
| Viditelný fokusWCAG 2.4.7 (AA) | Aktivní prvek má vždy viditelný indikátor (obrys, podtržení). outline: none bez náhrady je zakázán. |
Uživatel klávesnice neví, kde se nachází. | |
| Fokus v dialoguWCAG 2.1.2 (A) | Modální okna drží fokus uvnitř. Esc je zavírá. Po zavření se fokus vrátí na spouštěcí prvek. | Fokus „uteče“ za modál a uživatel se ztratí. | |
| Dotyková gestaWCAG 2.1.1 (A) | Swipe gesta mají alternativu klávesnicí nebo myší (tlačítka Předchozí / Další u karuselů). | Uživatelé bez dotykové obrazovky nebo s asistivním zařízením nemohou obsah ovládat. |
4. Formuláře a chyby
| Hotovo | Kritérium | Co zkontrolovat | Dopad |
|---|---|---|---|
| Labely políWCAG 1.3.1 (A) | Každé pole má viditelný label svázaný přes for / id. Placeholder nesmí nahradit label - při psaní zmizí. |
Čtečka neoznámí účel pole; uživatel zapomene, co vyplňuje. | |
| AutocompleteWCAG 1.3.5 (AA) | Standardní pole (jméno, e‑mail, adresa, telefon) mají atribut autocomplete. |
Uživatelé s motorickým postižením vloží data jedním klikem. | |
| Chyby - označeníWCAG 3.3.1 (A) | Chybová zpráva se zobrazí přímo u chybného pole, ne jen jako souhrn nahoře. Chyba je svázána s polem přes aria-describedby. |
Uživatel neví, které pole je špatně. | |
| Chyby - návodWCAG 3.3.3 (AA) | Chybová zpráva obsahuje konkrétní návod: „Zadejte PSČ ve tvaru 123 45“, ne jen „Chybný formát“. | Uživatel neví, jak chybu opravit. | |
| Skupiny volebWCAG 1.3.1 (A) | Skupiny přepínačů a zaškrtávátek jsou obalené fieldset s legend. Například Způsob dopravy. |
Čtečka neoznámí kontext skupiny voleb. | |
| Časové limityWCAG 2.2.1 (A) | Stránka s časovým limitem (sezení, platba) nabídne prodloužení nebo varování: „Sezení brzy vyprší - prodloužit?“ | Uživatel přijde o obsah košíku bez možnosti reagovat. | |
| PotvrzeníWCAG 3.3.4 (AA) | U důležitých kroků (objednávka, platba) má uživatel možnost zkontrolovat a potvrdit data před odesláním. | Nechtěné objednávky bez možnosti opravy. |
5. Obrázky, ikony, video
| Hotovo | Kritérium | Co zkontrolovat | Dopad |
|---|---|---|---|
| Alt textWCAG 1.1.1 (A) | Informativní obrázky mají alt s popisem obsahu. Dekorativní mají alt="". Obrázkové odkazy popisují cíl odkazu, ne název souboru. |
Nevidomý uživatel neví, co je na obrázku. | |
| IkonyWCAG 1.1.1 (A) | Ikony (lupa, košík, srdíčko) mají aria-label nebo skrytý text s popisem. |
Čtečka oznamuje jen „tlačítko“ bez kontextu. | |
| Text v obrazuWCAG 1.4.5 (AA) | Texty na bannerech jsou skutečný HTML text, ne text vypálený do obrázku. | Nelze zvětšit, přeložit ani přečíst čtečkou. | |
| Titulky videaWCAG 1.2.2 (A) | Předtočená videa mají titulky, živý přenos titulky z live captioningu, zvukové záznamy přepis. | Neslyšící uživatelé nezískají informaci z videa. | |
| Autoplay zvukWCAG 1.4.2 (A) | Automaticky spuštěný zvuk lze okamžitě ztlumit nebo zastavit; ovládání je v horní části stránky. | Čtečka přestane být slyšet přes automatický zvuk. | |
| AnimaceWCAG 2.2.2 (A) | Pohybující se prvky (karusel, animace) lze zastavit nebo pozastavit. Nic nebliká rychleji než 3× za sekundu. | Riziko záchvatu, rozptýlení, čtečka nestíhá číst měnící se obsah. |
6. Barvy a čitelnost
| Hotovo | Kritérium | Co zkontrolovat | Dopad |
|---|---|---|---|
| Kontrast textuWCAG 1.4.3 (AA) | Normální text nejméně 4,5:1. Velký text (od 18 pt, nebo 14 pt tučně) nejméně 3:1. | Slabozrací uživatelé text nepřečtou. | |
| Kontrast UI prvkůWCAG 1.4.11 (AA) | Ikony, obrysy polí a tlačítka nejméně 3:1 vůči okolnímu pozadí. | Uživatel nevidí hranice ovládacích prvků. | |
| Barva není infoWCAG 1.4.1 (A) | Informace není sdělována pouze barvou - doplňte text, ikonu nebo vzor. Chybné pole: červená plus ikona plus text chyby. | Barvoslepí uživatelé nezjistí chybový stav. | |
| Zvětšení 200 %WCAG 1.4.4 (AA) | Při 200 % zoomu zůstává obsah čitelný bez vodorovného posouvání a prvky funkční. | Slabozrací uživatelé běžně používají zvětšení prohlížeče. | |
| Rozestupy textuWCAG 1.4.12 (AA) | Zvětšení řádkování a mezer mezi písmeny či slovy nesmí rozbít layout ani překrýt obsah. | Uživatelé, kteří si typografii upravují kvůli čitelnosti, ztratí layout. | |
| Velikost cílůWCAG 2.5.5 (AA) | Klikací prvky nejméně 44×44 px nebo s dostatečnou mezerou. Zejména na mobilu. | Na dotykovém displeji uživatel omylem stiskne špatné tlačítko. |
7. Responzivita a mobil
| Hotovo | Kritérium | Co zkontrolovat | Dopad |
|---|---|---|---|
| Reflow 320 pxWCAG 1.4.10 (AA) | Web funguje na šířce 320 px bez vodorovného posouvání. Široké tabulky smí rolovat ve vlastním kontejneru. | Uživatelé se zvětšeným textem nebo na malých displejích. | |
| Rozbalovací menuWCAG 2.1.1 (A) | Vysouvací panely a filtry lze zavřít klepnutím mimo, křížkem i klávesou Esc. | Uživatel se nedostane z otevřeného menu. |
8. Dynamika a oznámení
| Hotovo | Kritérium | Co zkontrolovat | Dopad |
|---|---|---|---|
| Live regionyWCAG 4.1.3 (AA) | Dynamické změny se oznamují čtečce: „přidáno do košíku“, „nalezeno X produktů“. Použijte aria-live="polite". |
Uživatel neví, že akce proběhla, ani kolik platí. | |
| Fokus po akciWCAG 2.4.3 (A) | Po filtrování, třídění nebo načtení dalšího obsahu se fokus přesune na nadpis výsledků nebo relevantní oblast. | Uživatel klávesnice neví, kde nový obsah začíná. |
9. Prohlášení o přístupnosti a kontakt
Zákonná povinnost
Tahle oblast není z WCAG, ale přímo ze zákona (§ 14). Splnit ji lze i u e‑shopu, který zatím souladný není - prohlášení se pak vydá jako částečně souladné s plánem nápravy.
| Hotovo | Požadavek | Co zkontrolovat | Dopad |
|---|---|---|---|
| Zveřejněné informace§ 14 odst. 1 a 2 | Ve VOP nebo v obdobném dokumentu je popis jednotlivých požadavků na přístupnost a u každého stav souladu, plus všeobecný popis služby a vysvětlivky k jejímu fungování. | Zákonná povinnost. Obecná věta „e‑shop je přístupný“ nestačí. | |
| Zvuková forma§ 14 odst. 1 | Na stránce je uvedeno, jak si tytéž informace vyžádat ve zvukové formě. | Zákonná povinnost na žádost. | |
| Trvalá dostupnost§ 14 odst. 4 | Informace jsou zveřejněné po celou dobu poskytování služby a samy jsou přístupné. | Zastaralé nebo nepřístupné prohlášení povinnost nesplní. | |
| Nahlášení bariérydoporučeno | Je k dispozici jednoduchý způsob, jak nahlásit bariéru - e‑mail nebo krátký přístupný formulář. | Uživatel nemá jak informovat provozovatele o problému. | |
| Oznámení nesouladu ČOI§ 13 odst. 2 | Zjistí-li poskytovatel nesoulad, bezodkladně informuje orgán dozoru o jeho povaze, příčinách a přijatých opatřeních. Konzultujte s právníky, kdy oznámení podat. | Samostatná povinnost mimo obsah stránky. |
10. Soubory ke stažení a obsah
| Hotovo | Kritérium | Co zkontrolovat | Dopad |
|---|---|---|---|
| PDF a dokumentyWCAG 1.3.1 (A) | Dokumenty ke stažení jsou přístupné (tagované PDF s nadpisy a alt texty). U odkazu je uveden typ a velikost: „Ceník (PDF, 1,2 MB)“. | Čtečka nepřečte netagované PDF. | |
| HTML alternativadoporučeno | Důležité informace nejsou dostupné jen v PDF - mají i HTML verzi na webu. | Přístupné PDF je náročné vyrobit; HTML je snazší a preferované. | |
| Srozumitelnost textůWCAG 3.1.1 (A) | Texty jsou stručné a čitelné. Nepoužívejte VELKÁ PÍSMENA pro celé věty. Krátké věty, minimum žargonu. | Kognitivní zátěž; čtečky čtou verzálky po písmenech. | |
| Informace o zbožípříloha č. 1, oddíl IV, bod 7.1 | Pokud výrobce poskytuje informace o přístupnosti prodávaného zboží, e‑shop je musí zobrazit. | Přehlížený požadavek. Netýká se webu, ale sortimentu. |
Čím testovat
Automaticky - rychlý přehled zřejmých chyb:
- WAVE - zobrazí problémy přímo na stránce
- Axe DevTools - rozšíření prohlížeče pro detailní kontrolu
- Lighthouse - součást Chrome DevTools, záložka Accessibility
- Accessibility Insights - průvodce ručními testy
Ručně - odhalí funkční bariéry, které automat nenajde:
- Projít celý nákupní tok jen klávesnicí (Tab, Shift+Tab, Enter, Esc) od úvodní stránky po potvrzení objednávky.
- Projít web čtečkou - NVDA (Windows, zdarma) nebo VoiceOver (macOS, iOS). Ověřit čtení nadpisů, tlačítek, formulářů a dynamických oznámení.
- Zvětšit text na 200 % a zúžit okno na 320 px - obsah musí zůstat čitelný bez vodorovného posouvání.
- Změřit kontrast barev nástrojem Color Contrast Checker nebo WAVE.