Archiv rubriky: Příručka

Testování přístupnosti webu: jaké nástroje použít

V článku Jak na jednoduchý audit přístupnosti – otestujte si bezbariérovost svého webu jsem před dvěma lety publikoval návod, jak si jednoduše otestovat přístupnost webu a odhalit alespoň největší bariéry. Takto koncipovaný test samozřejmě nemůže nahradit profesionálně provedený audit přístupnosti, nicméně pro vytvoření si základní představy o tom, jak je na tom váš web s přístupností, je stále více než dostačující.

I v souvislosti s novým zákonem o přístupnosti ale roste potřeba a poptávka po testech přístupnosti webů na soulad s doporučením Web Content Accessibility Guidelines (WCAG 2.1).

Rád bych proto zájemce o testování postupně seznámil s tím, jak takový test udělat, co vše a jak je třeba testovat, upozornil na možná úskalí a doporučil další zdroje k jednotlivým oblastem testování, o které se mohou následně opřít.

Dnes si pro testování připravíme potřebné vybavení.

Nástroje pro testování přístupnosti webu

K testování používám primárně Windows 10 a Google Chrome, ale obdobně vybavené pracovní prostředí si lze připravit i na jiných operačních systémech.

Rozšíření pro Google Chrome

Základním testovacím nástrojem je pro mě aplikace Google Chrome, doplněná o několik rozšíření.

Color Contrast Analyzer

Color Contrast Analyzer Ideální nástroj pro otestování vzájemného kontrastu barev na webové stránce. Umí udělat analýzu celé stránky v jednom kroku a není tak třeba posuzovat každou použitou barevnou kombinaci samostatně.

headingsMap

headingsMap Rozšíření pro snadné vygenerování interaktivní nadpisové osnovy stránky.

Landmark Navigation via Keyboard or Pop-up

Landmark Navigation via Keyboard or Pop-up Rozšíření pro vygenerování interaktivního seznamu oblastí stránky (landmarků) na dané stránce.

Focus Indicator

Focus Indicator Protože ne na každém webu je vizuálně zvýrazněn prvek, který získá focus při ovládání z klávesnice, hodí se toto rozšíření zapnout ve chvíli, kdy kontrolujeme přístupnost webu z klávesnice a potřebujeme průchod webem vizuálně sledovat.

Web Developer Toolbar

Web Developer Toolbar Komplexní rozšíření, které je dle svého názvu určeno pro webovvé vývojáře, ale lze jej samozřejmě použít i k otestování přístupnosti webu.

Asistivní technologie

Přístupnost webu je také potřeba zkontrolovat i za použití některé z asistivních technhologií.

Odečítače obrazovky

V prostředí operačního systému Windows se nabízí použít odečítací programy NVDA nebo JAWS. NVDA je open-source odečítač, JAWS je placený program, který se dle licenčních podmínek nesmí používat ke komerčnímu testování.

Pokud s testováním pomocí odečítacích programů nemáte zkušenosti, průvodci by vám mohly být následující dva tutoriály:

Zvětšovací program

Pro otestování přístupnosti webu pro uživatele, kteří používají zvětšovací programy, je dnes naprosto dostačující Lupa ve Windows 10.

Klávesnice

Protože řada požadavků na přístupnost je spjata s přístupností z klávesnice, naprosto nezbytným nástrojem pro testování přístupnosti pak je běžná klávesnice.

Nástroje pro automatické testování

Ačkoliv neexistuje automatický nástroj, jehož výstupem by byla informace, že web je přístupný, je vhodné automatické nástroje do svého portfolia zařadit. Pokud jsme si vědomi limitů, které tyto nástroje mají (nelze pomocí nich otestovat vše, detaily viz například Web Accessibility Testing: What Can be Tested and How) a nespoléháme se při testování výhradně na ně, pak nám mohou při testování pomoci odhalit alespoň to, co lze automaticky otestovat.

WAVE Evaluation Tool

WAVE Evaluation Tool

Komplexní nástroj pro testování přístupnosti. Poskytuje vizuální zpětnou vazbu k testované webové stránce tím, že do ní vkládá grafické prvky, upozorňující na analyzovaném webu na chyby (Errors), varování (Alerts), funkce (Features), strukturální elementy (Structural Elements), HTML5 a ARIA prvky (HTML5 and ARIA) a chyby v kontrastu (Contrast Errors).

Ke každému zjištění WAVE také nabízí i doplňující informace a rady, jak při odstranění nalezených bariér postupovat.

Accessibility Insights for Web

Accessibility Insights for Web

Nástroj nabízí dva testovací scénáře:

  • FastPass nabízí dva testy, které umožňují za méně než 5 minut odhalit nejčastější bariéry na testované webové stránce.
    • Automated checks: nástroj nabízí automatickou kontrolu přibližně 50 požadavků na přístupnost.
    • Tab stops: podle instrukcí a vizuální nápovědy je možné otestovat web na přístupnost z klávesnice a najít případná kritická místa a bariéry, které souvisí s tímto aspektem přístupnosti.
  • Assessment: testerům s odpovídajícími znalostmi HTML a doporučení Web Content Accessibility Guidelines umožňuje ověřit, zda web je v souladu s WCAG 2.1 úrovně AA.
    • Automated checks: nástroj nabízí automatickou kontrolu přibližně 50 požadavků na přístupnost.
    • Manual tests: nástroj nabízí detailní instrukce, příklady a rady, jak odstranit nalezené bariéry.

Nástroje samy o sobě nám samozřejmě kvalitní výstupy z testování nezaručí, důležité jsou i know-how a kompetence testera. Jako výchozí materiál k prostudování doporučuji již několikrát zmíněné doporučení WCAG 2.1. Studium můžete začít například článkem Web Content Accessibility Guidelines (WCAG): seznamte se, prosím či na webu WUHCAG | Web accessibility for developers 🙂


V době psaní tohoto článku (leden 2020) ještě testuji axe Pro. Pokud se mi nástroj zalíbí a budu jej používat, určitě o tom napíšu 🙂

A11y Color Palette: nástroj pro měření kontrastu barev

Máte k dispozici paletu barev a potřebujete z ní vybrat takové kombinace, které jsou vzájemně dostatečně kontrastní? Šikovným nástrojem, který může tuto činnost usnadnit, během chvilky porovnat vzájemný kontrast zadaných barev a vyhodnotit jejich soulad s požadavky metodiky WCAG 2.1 na dostatečný barevný kontrast, je A11y Color Palette.

Požadavky na minimální kontrast

  • AA běžný / velký text: 4,5:1 / 3:1 – minimální kontrastní poměr pro běžné písmo do velikosti 18 bodů nebo tučné písmo do velikosti 14 bodů je 4,5:1. Pro běžné písmo nad 18 bodů nebo tučné písmo nad 14 bodů je minimální kontrastní poměr 3:1.
  • AA netextové objekty: 3:1 – pro prvky uživatelského rozhraní a grafické objekty je minimální kontrastní poměr 3:1
  • AAA běžný / velký text: 7:1 / 4,5:1 – minimální kontrastní poměr pro běžné písmo do velikosti 18 bodů nebo tučné písmo do velikosti 14 bodů je 7:1. Pro běžné písmo nad 18 bodů nebo tučné písmo nad 14 bodů je minimální kontrastní poměr 4,5:1.

Hodnoty AA a AAA vyjadřují míru důležitosti (hodnota AA v kontextu metodiky WCAG 2.1 odpovídá střední úrovni, hodnota AAA úrovni nejnižší).

Jak nástroj funguje?

Jeho použití je velmi jednoduché. Nástroj (nebo chcete-li jednoduchou webovou aplikaci) najdete na adrese a11yrocks.com/colorPalette/. Do editačního pole Colors (comma separated HEX) zadáte hexadecimální kód barev, jejichž vzájemný kontrast chcete porovnat (nástroj k nim automaticky přidá černou a bílou), potvrdíte tlačítko Create Palette a to je vše.

A11y Color Palette jako výsledek vrátí paletu dvojic barevných kombinací, které jsou seřazeny podle míry vzájemného kontrastu (čím jsou barvy vzájemně kontrastnější, tím jsou v tabulce výše). Kromě vizuální reprezentace obsahuje každá dvojice i informace textové:

  • 21:1 – hodnota kontrastního poměru
  • level of compliance – míra shody
    • AA normal / large – vyhovuje požadavku úrovně AA na minimální kontrast pro běžný text a velký text.
    • AA non-text – vyhovuje požadavku na minimální barevný kontrast pro prvky rozhraní a grafické objekty.
    • AAA normal / large – vyhovuje požadavku úrovně AAA na minimální kontrast pro běžný text a velký text.

Z takto nabídnutých výsledků je pak již poměrně snadné vybrat barevné kombinace, které jsou pro požadovaný účel (normální text, velký text, prvky rozhraní) dostatečně kontrastní.

Pokud bychom některou z barevných kombinací rádi použili, ale její vzájemný kontrast není dostatečný, můžeme k nalezení podobné, ale vyhovující kombinace, použít například tanaguru contrast finder.

Cesta k přístupnému webu: odevzdáním výsledků auditu přístupnosti práce nekončí, ale začíná

Změna legislativy a nový Zákon o přístupnosti s sebou přinesl i zvýšenou poptávku po auditech (testech) přístupnosti webů a aplikací. Což je na jednou stranu samozřejmě dobře, na druhou je třeba říci, že audit sám o sobě z hlediska přístupnosti web či aplikaci nikam neposune, pokud se s jeho výsledky dále nepracuje (ideálně ve spolupráci s autorem auditu).

Pokud to s přístupností svého webu (či aplikace) myslíte opravdu vážně, je potřeba audit přístupnosti doplnit i dalšími navazujícími kroky.

Optimální postup

Auditů přístupnosti většího či menšího rozsahu už jsem vypracoval stovky a postupně dospěl k následujícímu postupu, který mám z hlediska výsledku a praktického přínosu pro uživatele za optimální.

1. Audit přístupnosti

Výsledky auditu slouží jako podkladový materiál k dalším krokům, které jsou pro dosažení cíle (tj. přístupnějšího webu) naprosto nezbytné. Může se samozřejmě stát, že výsledky budou uspokojivé a další kroky nebudou třeba, ale přiznejme si na rovinu, že takový stav je spíše výjimkou, než pravidlem.

2. Navazující konzultace

Ty mohou být jak osobní, tak na dálku. Dnešní technologie už naštěstí umožňují eliminovat cestování (a pošetřit čas na obou stranách), takže konzultaci je možné snadno provést přes některý z online komunikačních nástrojů, aniž by to mělo vliv na její kvalitu a názornost.

Proč jsou tyto konzultace důležité? S výsledky auditů často pracují lidé, kteří se s tématikou přístupnosti setkávají poprvé. Velmi se mi proto osvědčilo se zadavatelem auditu výsledky projít, okomentovat je, zodopovědět případné dotazy a přesvědčit se, zda je všechno pochopeno tak, jak by pochopeno být mělo.

3. Workshop(y) o přístupnosti

Přístupnost se na straně zadavatele zpravidla netýká jen jednoho člověka, ale má na ni vliv celá řada lidí různých profesí: namátkou UX designer, grafik, kodér či redaktor. Proto je vhodné se s týmem na straně zadavatele auditu (ideálně osobně) sejít, s tématikou přístupnosti jej seznámit a při té příležitosti s ním výsledky auditu projít.

Workshop také může sloužit jako platforma pro stanovení nejbližších dalších kroků a domluvě na tom, co, kdy a jak se bude upravovat. Ne vždy je možné (z mnoha důvodů – zvolená technologie, časové či finanční možnosti) implementovat okamžitě všechny požadované změny. Ideální je proto domluvit se na prioritách a opravách největších bariér co nejdříve (nepopsané obrázky ve fotogalerii jsou sice problém, ale nepřístupnost položek menu z klávesnice či absence nadpisové osnovy jsou pro uživatele překážky mnohem závažnější).

4. Zmírnění či odstranění nalezených bariér

Na základě stanovení priorit proběhne zmírnění (či odstranění) bariér, které provede zadavatel auditu. Tato činnost může trvat dny, týdny i měsíce v závislosti na jejich složitosti, volných vývojových kapacitách, rozpočtu, či dalších okolnostech – pokud je například třeba některé komponenty nově naprogramovat a otestovat jejich funkčnost, či je přístupnost součástí vývojového cyklu a opravy se tak do produkční verze dostanou až s další verzí webu či aplikace.

5. Kontrola

Po provedení úprav je vhodné zkontrolovat, zda jsou úpravy dostačující, jejich výsledkem je odstranění (či zmírnění) nalezené bariéry a v důsledku toho přístupnější web či aplikace.

Body 2 až 5 pak lze po první úspěšné iteraci samozřejmě libovolně opakovat a kombinovat 🙂

Zpřístupnění webu je proces, ne jednorázová aktivita

Už na začátku spolupráce je vhodné upozornit zájemce o zpřístupnění webu či aplikace na to, že zpřístupnění webu či aplikace je proces, který mnohdy trvá i několik měsíců. A pokud se má jednat o změnu dlouhodobou a trvalou, je potřeba proškolit i zaměstance a začlenit tak přístupnost do “DNA” týmu, který web či aplikaci vyvíjí a průběžně aktualizuje.

A není to pak celé (mnohonásobně) dražší?

Může, ale nutně nemusí. Výslednou cenu ovlivňuje celá řada faktorů a řada věcí se dá díky možnostem dnešních technologií udělat jednodušeji (a v důsledku toho levněji). Například výsledky auditu je možné nabídnout prostřednictvím sdíleného dokumentu, který může následně posloužit jako podklad ke konzultacím (či konzultace mohou probíhat přímo v něm) a jako osnova workshopu. A finance, ušetřené za mnohdy desítky hodin věnovaných zpracování detailní formální zprávy, mohou být investovány třeba do workshopu a zvýšení kompetencí členů pracovního týmu v oblasti přístupnosti.

Příklady dobré praxe

Nejlepším důkazem toho, že výše nastíněný postup funguje, jsou jeho praktické výsledky. Za všechny zmíním alespoň dlouhodobou spolupráci na zpřístupňování webu s výsledky voleb, webu a online bankovnictví jedné velké banky či přístupnější online supermarket Rohlík.cz 🙂