Testování webů z hlediska přístupnosti pro uživatele se znevýhodněním: audit

Proč a jak testovat přístupnost pro uživatele se znevýhodněním

Webová přístupnost není jen zákonný požadavek nebo kontrolní seznam, ale soubor postupů, které zajišťují, že web je použitelný pro co nejširší spektrum lidí – včetně uživatelů se zrakovým, sluchovým, motorickým či kognitivním znevýhodněním. Testování přístupnosti (A11y) ověřuje, zda rozhraní splňuje principy WCAG (vnímatelnost, ovladatelnost, srozumitelnost, robustnost) a zda je v praxi ovladatelné pomocí asistivních technologií. Tento článek představuje metodický rámec, nástroje, scénáře a měřitelné výstupy testů přístupnosti.

Rámec: WCAG 2.x a principy POUR

Vnímatelnost (Perceivable): obsah musí být prezentován způsoby, které mohou uživatelé vnímat (textové alternativy, kontrast, strukturovaná média).
Ovladatelnost (Operable): rozhraní musí být ovladatelné bez pastí pro klávesnici, s dostatkem času a bez zbytečných pohybových aktivací.
Srozumitelnost (Understandable): předvídatelné chování, jasné popisky, srozumitelná chybová hlášení a pomoc při zadávání dat.
Robustnost (Robust): kompatibilita s asistivními technologiemi a standardy (HTML, ARIA), stabilní DOM a správně definované role a stavy.

Role testování: kombinace automatizace, manuální kontroly a uživatelských studií

Žádná jednotlivá metoda nepokryje vše. Úspěšné programy přístupnosti kombinují:

Automatizované skenování: rychlá detekce typických nedostatků (atributy alt, kontrast, role, názvy ovládacích prvků).
Manuální heuristiky: hodnocení ovládání klávesnicí, čitelnosti, logiky fokusu, navigačních vzorů a validace formulářů.
Testy s asistivními technologiemi: čtení pomocí čtečky obrazovky, ovládání pouze klávesnicí, hlasové ovládání.
Studie s uživateli se znevýhodněním: ověření skutečného používání a odhalení bariér nad rámec standardů.

Plán testování: rozsah, priority a definice „hotovo“

Definujte cíle: určete, které uživatelské cesty (registrace, nákup, vyhledávání informací) musí být bezbariérové.
Vyberte kritéria: úroveň WCAG (A/AA) jako minimální cílový standard; u kritických produktů zvažte prvky úrovně AAA.
Stanovte priority: kritické bariéry (znemožňující dokončení úkolu) > závažné > střední > nízké.
Definujte „Definition of Done“: žádné blokující ani závažné chyby, 100 % klíčových cest splňuje úroveň AA, automatizace v CI.

Nástroje: automatizovaná kontrola a CI/CD

Doplňky prohlížeče: kontrola kontrastu, atributů role/aria-*, názvů ovládacích prvků, titulku a hierarchie nadpisů.
CLI a CI: integrujte testovací nástroje do pipeline, nastavte prahové hodnoty (např. „0 kritických chyb“ jako blokátor buildu).
Snímky a vizuální testy: ověřte, že změny CSS nezpůsobily ztrátu viditelnosti fokusu nebo dostatečného kontrastu.
Lintování šablon: statická analýza HTML/JSX (zakázat „onClick“ bez alternativy pro klávesnici, vyžadovat label a for).

Manuální test: pouze klávesnice

Navigace Tab/Shift+Tab: ověřte logické pořadí, nepřítomnost pastí a dosažitelnost všech interaktivních prvků.
Viditelný fokus: prvek ve fokusu musí mít výraznou vizuální indikaci i při nastavení vysokého kontrastu.
Alternativy ovládání klávesnicí: akce dostupné kliknutím musí být proveditelné klávesami Enter/Space; rozbalovací prvky musí jít ovládat šipkami.
Odkaz pro přeskočení: odkaz „Přeskočit na obsah“ musí být viditelný při fokusu a funkční na všech stránkách.

Manuální test: kontrast, barvy a režimy

Kontrast: text oproti pozadí splňuje minimálně poměr 4.5:1 (AA) u běžného textu a 3:1 u velkého textu (≥18 pt nebo 14 pt tučně).
Barva není jediným nositelem informace: doplňte vzor, tvar nebo text.
Režim vysokého kontrastu a tmavý režim: ověřte, že systémové režimy nezpůsobí neviditelnost prvků.

Formuláře: popisky, chyby a nápověda

Výslovné popisky: každý input má viditelný label a programový název (Accessible Name).
Chybová hlášení: konkrétní, přiřazená k poli a oznamovaná živě (např. aria-live="polite").
Skupiny polí: použijte fieldset a legend pro logické celky (např. výběr pohlaví).
Tipy a příklady: uveďte očekávaný formát; masky pro zadávání nesmějí bránit práci čteček obrazovky.

Sémantika a ARIA: kdy ano a kdy ne

Upřednostňujte nativní prvky: tlačítka, odkazy, seznamy, tabulky, nadpisy (h1–h6).
ARIA používejte uvážlivě: přidávejte ji pouze tam, kde nelze použít nativní sémantiku; nikdy nepřepisujte nativní role.
Orientanční body: header, nav, main, aside, footer umožňují rychlou navigaci ve čtečce obrazovky.
Stavy a názvy: ověřte Accessible Name/Description Computation (např. u tlačítek s ikonami).

Správa fokusu a dialogy

Zachycení fokusu: modální okno musí udržet fokus uvnitř a po zavření jej vrátit na předchozí prvek.
Oznámení otevření: dialog má roli dialog nebo alertdialog, nadpis a popis.
Klávesa ESC a zavření: umožněte bezpečné zavření pomocí klávesnice bez ztráty stavu.

Média: titulky, přepisy a popisy

Video: synchronizované titulky a případně zvukový popis vizuálních informací.
Audio: textový přepis a přehrávač ovladatelný klávesnicí i čtečkou obrazovky.
Automatické přehrávání: musí být vypnuté nebo snadno zastavitelné; respektujte nastavení „reduced motion“.

Testy se čtečkami obrazovky: praktický postup

Vyberte kombinace: Windows+NVDA, Windows+JAWS, macOS+VoiceOver, iOS+VoiceOver, Android+TalkBack.
Testy podle scénářů: dokončení nákupu, vyplnění formuláře, filtrování výsledků, práce s tabulkou.
Rychlé navigační příkazy: přechody mezi nadpisy, poli formuláře, odkazy a oblastmi; kontrola pořadí čtení.
Výstup a očekávání: zapisujte přesné hlasové výstupy a porovnávejte je s očekávanými názvy/rolemi/stavy.

Motorická přístupnost: alternativní vstupy a plochy pro kliknutí

Velikost cíle: minimální rozměr 24×24 px; zajistěte dostatečné rozestupy pro dotykové ovládání.
Alternativy ke gestům: funkce „táhni“ musí mít ekvivalentní tlačítko; nepoužívejte zatřesení nebo poklepání bez alternativy.
Hlasové ovládání: prvky musí mít stabilní a srozumitelné názvy pro hlasové systémy.

Kognitivní přístupnost: srozumitelnost a zátěž

Jasný jazyk: krátké věty, vyhýbejte se žargonu a vysvětlujte důležité pojmy.
Průvodci a postupy: rozdělte složité úkony do kroků s indikátorem průběhu.
Předvídatelnost: konzistentní umístění navigace, žádné nečekané přesuny fokusu.

Mobilní přístupnost: orientace, zvětšení a otočení

Responzivní rozvržení: textové bloky se nesmějí posouvat vodorovně.
Zvětšení: podporujte systémové zvětšení písma, aniž by se rozbilo rozhraní.
Orientace: aplikace by neměla bezdůvodně vynucovat jedinou orientaci.

Tabulky, grafy a komplexní komponenty

Datové tabulky: záhlaví definujte pomocí <th scope="col/row">, u složitých tabulek použijte headers/id.
Grafy: poskytněte textové shrnutí trendu a klíčových hodnot, přístupnou legendu a popisky os.
Přetahování: nabídněte alternativy pro ovládání klávesnicí (tlačítka „přesunout nahoru/dolů“) a živé oznámení změny pořadí.

PDF a dokumenty: alternativy a označování značkami

Upřednostňujte HTML: dokumentaci zpřístupněte na webu v HTML s možností tisku.
Přístupné PDF: pokud je PDF nezbytné, zajistěte označení značkami, pořadí čtení, záložky, alternativní texty a dostatečný kontrast.

Testovací scénáře: uživatelské cesty od začátku do konce

Vyhledání informací: vyhledání článku, přechod z výsledků, čtení a stažení souboru.
Odeslání formuláře: přihlášení k odběru, validace, chybové stavy, potvrzení.
Nákup: přidání do košíku, změna varianty, platba, rekapitulace.
Správa účtu: změna hesla, dvoufaktorové ověřování, nastavení předvoleb.

Zapojení osob se znevýhodněním: etika a metodika

Nábor: různorodé profily (zrakové, sluchové, motorické, kognitivní znevýhodnění) a různé asistivní technologie.
Souhlas a odměna: informovaný souhlas, bezpečné prostředí, přiměřená kompenzace.
Moderování: scénáře zaměřené na úkoly, žádné navádění, zachycení verbálních i neverbálních signálů.

Reportování: jak psát nálezy, aby vedly k opravám

Struktura nálezu: název, závažnost, dotčené kritérium WCAG, kroky k reprodukci, očekávané a skutečné chování, snímky obrazovky/video, návrh opravy.
Stanovení priorit: blokující (úkol nelze dokončit), závažné (výrazná bariéra), střední, nízké.
Sledovatelnost: propojte nález s uživatelským příběhem/testovacím případem; sledujte jeho stav v backlogu.

Neustálé zlepšování: metriky a správa

KPI: procento cest splňujících úroveň AA, počet kritických chyb mezi jednotlivými vydáními, doba nápravy, skóre automatizace.
Školení: pravidelná školení pro designéry, vývojáře i testery; knihovna přístupných komponent.
Designový systém: zdokumentované vzory s příklady kódu, požadavky na ARIA a kontrolní seznamy pro testování.

Kontrolní seznam: rychlá kontrola každé stránky

Nadpisy tvoří logickou hierarchii a odrážejí strukturu obsahu.
Všechny interaktivní prvky jsou dosažitelné a ovladatelné klávesnicí, fokus je viditelný.
Textové alternativy vystihují smysl netextových prvků.
Kontrast splňuje minimální poměry, barva není jediným nositelem informace.
Formuláře mají popisky, chybová hlášení a nápovědu; chyby jsou oznamovány.
Dialogy správně zachycují fokus a informují čtečku obrazovky.
Média mají titulky/přepisy; animace respektují nastavení „reduced motion“.
HTML je validní, role/stavy/názvy odpovídají očekáváním asistivních technologií.

Příklady běžných antipatternů a jejich náprava

Tlačítko s ikonou bez názvu: doplňte aria-label nebo viditelný text.
Vlastní výběrový seznam bez ovládání klávesnicí: použijte nativní <select> nebo doplňte ARIA, roli listbox a ovládání klávesnicí.
Neviditelný fokus: přidejte styl s dostatečným kontrastem a tloušťkou.
Chyby označené „červeným textem“: doplňte ikonu, textové vysvětlení a programové oznámení.

Závěr: přístupnost jako součást kvality

Testování přístupnosti je opakující se disciplína, která patří do každé fáze životního cyklu produktu – od návrhu přes implementaci až po provoz a údržbu. Kombinací standardů WCAG, automatizace v CI, manuálních heuristik, testů s asistivními technologiemi a studií s uživateli se znevýhodněním získáte web, který je nejen právně a technicky v pořádku, ale také skutečně použitelný pro všechny.