Jak otestovat web podle WCAG krok za krokem

Testovat web podle WCAG znamená kontrolovat ho podle kritérií úspěšnosti Web Content Accessibility Guidelines, obvykle na úrovni AA. Žádný jednotlivý nástroj to celé nezvládne. Spolehlivý test přístupnosti webu spojuje automatický test s ručním testováním, při kterém člověk používá klávesnici, přiblížení prohlížeče a čtečku obrazovky. Níže je postup, který doporučujeme e-shopům, webům služeb a agenturám, v pořadí, které s nejmenší námahou najde nejvíc problémů.

Jde o obecné informace, nikoli o právní poradenství. Naše vlastní testy jsou automatizovanou kontrolou, nikoli úplným auditem.

Krok 0: vyberte, co testovat (výběr vzorku)

Každou stránku testujete jen zřídka. Metodika W3C Website Accessibility Conformance Evaluation Methodology (WCAG-EM) popisuje pět kroků: vymezit rozsah, prozkoumat web, vybrat reprezentativní vzorek, vyhodnotit vzorek a sepsat zjištění. Pro vzorek kombinuje strukturovaný vzorek s několika náhodně vybranými stránkami.

U e-shopu strukturovaný vzorek obvykle zahrnuje:

• úvodní stránku, stránku kategorie, detail produktu, výsledky vyhledávání;
• každý krok pokladny od košíku po potvrzení, protože WCAG vyžaduje, aby vyhovovaly celé procesy;
• přihlášení, registraci, obnovu hesla a zákaznický účet;
• kontaktní formulář, nápovědu a stránku s informacemi o přístupnosti;
• stránky se zvláštním obsahem: video, mapy, konfigurátory, PDF ke stažení.

Zapište si verzi a úroveň WCAG (například WCAG 2.2 AA), prohlížeče a asistivní technologie, které používáte, a datum. Budete to potřebovat pro své informace o přístupnosti.

Krok 1: automatický test

Začněte automatickým nástrojem. Je rychlý, opakovatelný a dobrý na problémy v kódu: chybějící alternativní text, nízký kontrast textu, formulářová pole bez popisků, tlačítka a odkazy bez názvu, chybějící jazyk stránky, neplatné ARIA, malé dotykové cíle.

• Jednu stránku zdarma otestujete naším WCAG checkerem, každou stránku webu s tarifem Pandus.
• Stránky za přihlášením, košík a pokladnu zkontrolujete naším rozšířením prohlížeče.
• Další nástroje porovnává článek nástroje pro testování přístupnosti.

Nejdřív opravte automatické nálezy. Obvykle jde o problémy šablony: jedna oprava v šabloně odstraní stejnou chybu na stovkách stránek. Pak pokračujte ručními kroky, protože studie se rozcházejí v tom, jak velký podíl problémů automatika najde, shodují se ale, že ne všechny.

Krok 2: test klávesnicí

Odložte myš a používejte jen klávesnici:

Ověřte, že:

1. Vše funguje z klávesnice — menu, filtry, varianty produktu, přidání do košíku, pokladna, cookie lišta (2.1.1).
2. Fokus se nikde nezasekne ve vyskakovacím okně, chatovacím widgetu ani vloženém přehrávači (2.1.2).
3. Fokus je vždy vidět (2.4.7) a není zakrytý lepící hlavičkou nebo lištou (2.4.11).
4. Pořadí dává smysl a odpovídá vizuálnímu pořadí (2.4.3).
5. Odkaz pro přeskočení nebo orientační body (landmarks) umožní menu přeskočit (2.4.1).
6. Dialogy při otevření přesunou fokus do sebe a při zavření ho vrátí zpět.

Krok 3: přiblížení, přizpůsobení obsahu a mezery v textu

1. Přibližte prohlížeč na 200 %: žádný oříznutý text, nic se nepřekrývá, vše jde stále použít (1.4.4).
2. Přibližte na 400 % nebo zužte okno na 320 CSS pixelů: text se zalamuje, ke čtení není potřeba vodorovné posouvání (1.4.10).
3. Nastavte větší mezery v textu: nic se neořízne (1.4.12).
4. Otočte telefon: stránka funguje na výšku i na šířku.

Více o velikostech v článku velikost písma podle WCAG.

Krok 4: test čtečkou obrazovky

Čtečka obrazovky ukáže, zda stránka dává smysl i bez zraku. Použijte aspoň jednu kombinaci pro počítač a jednu pro mobil:

• NVDA (zdarma, Windows) s Firefoxem nebo Chrome;
• VoiceOver (součást macOS a iOS) se Safari;
• TalkBack (součást Androidu) s Chrome.

Poslouchejte:

• smysluplný titulek stránky a strukturu nadpisů, po které se dá skákat (1.3.1);
• popisy obrázků, které říkají to podstatné (1.1.1);
• tlačítka a odkazy, které říkají, co dělají — „Přidat do košíku“, ne „Tlačítko“ (4.1.2);
• stavové zprávy, například „Přidáno do košíku“ nebo „3 výsledky“, oznámené bez přesunu fokusu;
• popisky polí, povinná pole a chyby přečtené spolu s polem.

Nejdřív se naučte základní příkazy: další nadpis, další odkaz, další formulářové pole, číst vše. Uživatelé čteček se pohybují právě takto, ne řádek po řádku.

Krok 5: formuláře a pokladna

Projděte každý formulář a záměrně dělejte chyby:

• každé pole má viditelný popisek, ne jen zástupný text (placeholder);
• chyby jsou popsané textem u pole, s nápovědou, jak je opravit (3.3.1);
• už zadané údaje se znovu nevyžadují (3.3.7);
• přihlášení povoluje správce hesel a vkládání a hádanky mají alternativu (3.3.8);
• atributy autocomplete jsou nastavené u jména, e-mailu, adresy a telefonu;
• časové limity jdou prodloužit a objednávku jde před odesláním zkontrolovat.

Krok 6: média, barvy a pohyb

• Videa mají titulky (1.2.2); obsah jen se zvukem má přepis.
• Nic samo nepouští zvuk déle než tři sekundy bez možnosti ho zastavit.
• Karusely a animace jde pozastavit.
• Barva není jediným signálem u chyb, dostupnosti zboží nebo odkazů v textu.
• Text a ovládací prvky mají dostatečný kontrast; nejasné případy ověřte v kontrole kontrastu barev.

Krok 7: zapisujte a testujte znovu

U každého problému zapište stránku, prvek, kritérium WCAG, snímek obrazovky a závažnost. Opravujte podle dopadu: co brání nákupu nebo přihlášení, má přednost. Testujte znovu po každém vydání, aktualizaci šablony nebo nové aplikaci — po změnách se problémy s přístupností často vracejí. Týdenní monitoring zachytí jejich automatizovatelnou část.

Kdy si objednat audit přístupnosti

Vlastní testy jsou dobrá rutina, ale nejsou auditem. Zvažte profesionální audit přístupnosti, když potřebujete prohlášení o shodě, před spuštěním nebo veřejnou zakázkou, po stížnosti nebo výzvě, nebo když jsou výsledky nejasné. Auditor ručně otestuje všechna kritéria dané úrovně, s několika asistivními technologiemi, a zdokumentuje metodu.

Časté otázky

Co je testování podle WCAG?

Kontrola webu podle kritérií úspěšnosti Web Content Accessibility Guidelines. Spojuje automatické testy, které rychle najdou problémy v kódu, s ručními testy, při kterých člověk používá klávesnici, přiblížení a čtečku obrazovky.

Lze testování podle WCAG plně automatizovat?

Ne. Automatické nástroje najdou jen část problémů. Zda alternativní text dává smysl, zda je pořadí fokusu logické nebo zda je chybová hláška srozumitelná, musí posoudit člověk.

Jak otestovat ovládání klávesnicí?

Odložte myš. Pohybujte se klávesami Tab a Shift+Tab, odkazy aktivujte klávesou Enter, tlačítka klávesou Enter nebo mezerníkem, v menu používejte šipky a dialogy zavírejte klávesou Esc. Ověřte, že fokus je vždy vidět, má logické pořadí a nikde se nezasekne.

Jakou čtečkou obrazovky testovat?

NVDA s Firefoxem nebo Chrome ve Windows, VoiceOver se Safari v macOS a iOS a TalkBack s Chrome v Androidu. Test jednou čtečkou na počítači a jednou na mobilu najde většinu problémů.

Kolik stránek mám otestovat?

Reprezentativní vzorek, jak ho popisuje metodika W3C WCAG-EM: úvodní stránku, jednu stránku od každé šablony, všechny kroky klíčových procesů, jako je pokladna a přihlášení, a několik náhodně vybraných stránek.

Kdy potřebuji profesionální audit přístupnosti?

Když potřebujete prohlášení o shodě, před veřejným spuštěním nebo veřejnou zakázkou, po stížnosti nebo výzvě, nebo když vaše vlastní testy nechají otevřené otázky. Audit ručně pokryje všechna kritéria; automatická kontrola ne.

Zdroje

• W3C, WCAG-EM overview: https://www.w3.org/WAI/test-evaluate/conformance/wcag-em/
• W3C, Easy Checks — a first review of web accessibility: https://www.w3.org/WAI/test-evaluate/preliminary/
• W3C, WCAG 2.2: https://www.w3.org/TR/WCAG22/