ADA checklist pro weby

Oficiální ADA checklist pro weby neexistuje. Pokyny ministerstva spravedlnosti USA k přístupnosti webu odkazují na existující technické standardy — WCAG a Section 508 Standards — a vyjmenovávají typické bariéry: slabý kontrast barev, obrázky bez alternativního textu, videa bez titulků, nepřístupné formuláře a navigaci, která funguje jen myší. Tento checklist převádí WCAG 2.2 na úrovni AA na praktické kontroly seskupené podle oblastí, pro firemní web nebo e-shop. Jde o obecné informace, nikoli o právní poradenství, a jeho projití nic necertifikuje.

Checklist si můžete níže stáhnout jako PDF.

Jak checklist používat

1. Vyberte stránky, na kterých záleží: úvodní stránku, stránku kategorie, stránku produktu nebo služby, košík, pokladnu, účet, kontaktní formulář a jednu dlouhou obsahovou stránku.
2. Nejdřív spusťte automatický test. Náš bezplatný ADA compliance checker najde zhruba za minutu mnoho problémů v kódu; body označené níže (auto) pokrývá částečně.
3. Projděte ruční body s klávesnicí, čtečkou obrazovky a přiblížením v prohlížeči.
4. Zapište si, co jste našli a opravili, i s daty. Takový záznam se hodí v každém případě.

Čísla kritérií v závorkách odkazují na WCAG 2.2.

Obrázky a grafika

• [ ] Každý informativní obrázek má textovou alternativu (auto: přítomnost), která popisuje jeho obsah nebo účel (1.1.1).
• [ ] Dekorativní obrázky mají prázdný alternativní text, aby je čtečky obrazovky přeskočily (1.1.1).
• [ ] Obrázkové odkazy a tlačítka s ikonou říkají, kam vedou nebo co dělají — „Košík“, ne „ikona“ (1.1.1, 2.4.4) (auto).
• [ ] Text se nezobrazuje jako obrázek, kromě log (1.4.5).
• [ ] Grafy a infografiky mají poblíž textové shrnutí (1.1.1).

Barvy a kontrast

• [ ] Běžný text má kontrast nejméně 4,5:1, velký text 3:1 (1.4.3) (auto). Dvojice barev otestujete v kontrole kontrastu barev.
• [ ] Ikony, okraje polí a indikátory fokusu mají vůči pozadí nejméně 3:1 (1.4.11).
• [ ] Barva nikdy není jediným způsobem, jak sdělit informaci, například u povinných polí, chyb nebo zlevněných cen (1.4.1).

Klávesnice a fokus

• [ ] Každý odkaz, tlačítko, menu, posuvník a formulářové pole funguje s klávesami Tab, Shift+Tab, Enter, mezerník a šipkami (2.1.1).
• [ ] Nikdy neuvíznete ve vyskakovacím okně, chatovacím widgetu nebo přehrávači videa (2.1.2).
• [ ] Fokus je vždy viditelný (2.4.7) a neschovává se za lepkavým záhlavím nebo cookie lištou (2.4.11).
• [ ] Pořadí fokusu odpovídá vizuálnímu pořadí (2.4.3).
• [ ] Odkaz „přeskočit na obsah“ nebo orientační body umožní přeskočit navigaci (2.4.1).

Formuláře a pokladna

• [ ] Každé pole má viditelný popisek, který je s ním propojený v kódu (1.3.1, 3.3.2, 4.1.2) (auto: propojení).
• [ ] Pole pro adresu, e-mail a platbu používají atributy autocomplete (1.3.5) (auto: platné hodnoty).
• [ ] Chyby jsou popsané textem u pole, s nápovědou, jak je opravit (3.3.1, 3.3.3).
• [ ] Objednávky a platby lze před dokončením zkontrolovat a opravit (3.3.4).
• [ ] Přihlášení nevyžaduje řešení hádanky ani zapamatování kódu bez alternativy, jako je vložení ze schránky nebo správce hesel (3.3.8).
• [ ] Již zadané údaje se ve stejném procesu znovu nepožadují (3.3.7).

Struktura a navigace

• [ ] Každá stránka má jedinečný, popisný název (2.4.2) (auto: přítomnost).
• [ ] Nadpisy tvoří logickou osnovu a seznamy a tabulky používají skutečné značky (1.3.1, 2.4.6).
• [ ] Jazyk stránky je nastavený (3.1.1) (auto).
• [ ] Navigace a odkazy na nápovědu jsou na každé stránce na stejném místě (3.2.3, 3.2.6).
• [ ] Ke stránce vede víc než jedna cesta, například menu, vyhledávání nebo mapa webu (2.4.5).
• [ ] Text odkazu dává smysl v kontextu — žádné holé „klikněte zde“ (2.4.4).

Rozvržení, přiblížení a mobil

• [ ] Při přiblížení na 200 % se žádný text neořízne (1.4.4); při 400 % nebo šířce 320 pixelů není potřeba vodorovné posouvání (1.4.10).
• [ ] Web funguje na výšku i na šířku (1.3.4).
• [ ] Tlačítka a odkazy mají nejméně 24 × 24 CSS pixelů nebo dostatečné rozestupy (2.5.8) (auto).
• [ ] Vše, co se ovládá tažením, například cenový posuvník, funguje i jednoduchým klepnutím nebo kliknutím (2.5.7).
• [ ] Obsah, který se objeví při najetí myší nebo fokusu, lze zavřít a zůstane zobrazený, dokud je nad ním ukazatel (1.4.13).

Video, zvuk a pohyb

• [ ] Videa ze záznamu mají přesné titulky (1.2.2) a zvukový popis nebo přepis (1.2.3, 1.2.5).
• [ ] Nic automaticky nepřehrává zvuk déle než tři sekundy bez možnosti ho zastavit (1.4.2).
• [ ] Karusely a animace lze pozastavit (2.2.2) a nic nebliká víc než třikrát za sekundu (2.3.1).
• [ ] Vypršení relace uživatele upozorní a lze ho prodloužit (2.2.1).

Kontrola čtečkou obrazovky

• [ ] S VoiceOverem, NVDA nebo TalkBackem lze dokončit hlavní úkoly — najít produkt, vložit do košíku, zaplatit, kontaktovat vás.
• [ ] Stavové zprávy jako „Přidáno do košíku“ nebo „3 výsledky“ se ohlásí (4.1.3).
• [ ] Vlastní ovládací prvky ohlašují svůj název, roli a stav, například „rozbaleno“ (4.1.2) (auto: částečně).

Dokumenty a obsah třetích stran

• [ ] PDF, jídelní lístky, ceníky a formuláře, na které odkazujete, jsou přístupné nebo dostupné v přístupném formátu — viz kontrola přístupnosti PDF.
• [ ] Vložené widgety — chat, recenze, rezervace, mapy — projdou stejnými kontrolami klávesnicí a čtečkou obrazovky.
• [ ] Nespoléháte na overlay widget, který má web „opravit“; viz proč overlaye nejsou řešení.

Zveřejnění a údržba

• [ ] Stránka o přístupnosti vysvětluje, co jste udělali a jak mohou lidé nahlásit bariéru.
• [ ] Kontrolujete znovu po aktualizacích šablony, pluginů a aplikací, ne jen jednou.

Od checklistu k ADA auditu

Tento seznam je sebekontrola. Checklist pro ADA audit, se kterým pracuje odborník, prochází každé kritérium WCAG A a AA na definovaném vzorku stránek a končí písemnou zprávou — viz audit přístupnosti. Federální zákazníci mohou chtít i posouzení podle Section 508 nebo ACR na základě VPAT. Úplný seznam po jednotlivých kritériích najdete v checklistu WCAG 2.2; právní souvislosti v článku ADA a přístupnost webu.

Kontroly označené (auto) můžete bez námahy opakovat každý týden: s tarifem Pandus zkontroluje všechny stránky vašeho webu a dá vám vědět, když se objeví nové problémy. Jde o automatizovanou kontrolu, nikoli úplný audit.

Zdroje

• ADA.gov, Guidance on Web Accessibility and the ADA: https://www.ada.gov/resources/web-guidance/
• ADA.gov, informační list k pravidlu Title II pro weby a mobilní aplikace: https://www.ada.gov/resources/2024-03-08-web-rule/
• W3C, WCAG 2.2: https://www.w3.org/TR/WCAG22/

Časté otázky

Existuje oficiální ADA checklist pro weby?

Ne. ADA neobsahuje technický checklist webů pro soukromé firmy. Ministerstvo spravedlnosti USA odkazuje na WCAG a Section 508 Standards; tento checklist vychází z WCAG 2.2 na úrovni AA.

Znamená projití checklistu, že můj web splňuje ADA?

To žádný checklist slíbit nemůže. Pomůže vám najít a opravit nejčastější bariéry a zdokumentovat vaši práci. Svou právní situaci proberte s právníkem.

Jakou úroveň WCAG by měl ADA checklist používat?

Úroveň AA. Pravidlo DOJ pro Title II, určené státním a místním samosprávám, přebírá WCAG 2.1 AA a u firemních webů je obvyklým měřítkem WCAG 2.1 nebo 2.2 AA. WCAG 2.2 AA zahrnuje téměř celou 2.1 AA; viz WCAG 2.1 vs 2.2.

Mohu si checklist stáhnout jako PDF?

Ano. Odkaz na PDF verzi tohoto checklistu najdete na této stránce, takže si ho můžete vytisknout nebo poslat vývojáři či agentuře.

Čím se ADA audit liší od tohoto checklistu?

Audit je strukturované hodnocení odborníkem podle každého kritéria WCAG, se zprávou. Tento checklist je praktická sebekontrola; pokrývá nejdůležitější bariéry, ale ne každé kritérium do hloubky.