Archiv štítku: Testování přístupnosti

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 🙂

Praktické postřehy z testování přístupnosti webů v soutěži Biblioweb

Už řadu let hodnotím přístupnost webů v soutěži o nejlepší webovou prezentaci knihovny Biblioweb, do jejíhož jubilejního dvacátého ročníku přihlásilo své weby 41 veřejných knihoven. Jaká byla přístupnost soutěžních webů a jaké trendy lze na základě letošního hodnocení v této oblasti vypozorovat?

Jak a co jsem testoval

Podobně jako v jiných soutěžích, i testování v Bibliowebu je třeba přizpůsobit aktuálním podmínkám. Což znamená otestovat během relativně krátkého času (cca 10 dnů) relativně velké množství (zpravidla několik desítek) webů. Proto se při testování soustředím na zhodnocení míry naplnění stěžejních požadavků na technickou přístupnost na klíčových místech webu na vybraném vzorku stránek.

Které oblasti to jsou?

  • Strukturování webové stránky – nadpisy, oblasti stránky.
  • Přístupnost a ovladatelnost prvků webové stránky z klávesnice.
  • Dostatečný barevný kontrast a čitelnost textu.
  • Definování smysluplné textové alternativy u grafických prvků, nesoucích významovou informaci.
  • Přístupnost dokumentů.

Testování v zásadě probíhá způsobem popsaným v článku Jak na jednoduchý audit přístupnosti – otestujte si bezbariérovost svého webu, díky němuž lze poměrně snadno odhalit největší bariéry v přístupnosti.

Jak na jednoduchý audit přístupnosti – otestujte si bezbariérovost svého webu

Jak si s jednotlivými oblastmi knihovny poradily?

Strukturování webové stránky pomocí nadpisů a oblastí stránky

Obzvlášť u stránek informačně bohatých (a takových najdeme na webech knihoven většinu) je strukturování obsahu webové stránky naprosto zásadní. Nedostatečné či nevyhovující strukturování komplikuje přístup k informacím, naopak robustní nadpisová osnova a vyznačení alespoň stěžejních oblastí stránky orientaci významně usnadňuje.

Nadpisová osnova

Pouze u 8 webů z 41 jsem k nadpisové osnově neměl zásadní připomínky a ohodnotil ji plným počtem bodů, dalších 10 webů mělo v oblasti nadpisových osnov jen drobné chyby. Na druhém konci žebříčku se umístilo hned 16 webů, jejichž nadpisové osnovy neodpovídaly obsahu jednotlivých stránek a například uživatel čtečky obrazovky ji tak nemohl použít pro zorientování se v obsahu stránky a snadnému přístupu k požadované informaci.

Oblasti stránky

Oblasti stránky jsou vedle nadpisové osnovy dalším, již nějaký čas standardizovaným řešením, které může uživatelům usnadnit orientaci v obsahu webové stránky. I přes jeho velmi snadnou implementaci do kódu stránky bylo toto řešení v drtivé většině případů použito nedostatečně, či nebylo použito vůbec.

Na 12 webech bohužel nebyly oblasti stránky vůbec definovány a většina webů je měla definovány nevhodně (tzn. buď nepokrývaly celý obsah; chyběla definice hlavního obsahu; přiřazené role/oblasti neodpovídaly obsahu, kterému byly přiřazeny). Vhodnou implementaci oblastí stránek bylo možné najít jen na 5 soutěžních webech.

Přístupnost a ovladatelnost prvků webové stránky z klávesnice

Dostupnost a ovladatelnost prvků na webové stránce při ovládání pomocí klávesnice je i v době dotykových zařízení stále velmi potřebné. Řada uživatelů (zejména těch se zrakovým postižením) totiž preferuje klávesnici jako primární vstupní zařízení při práci s výpočetní technikou.

U pěti webů byla přístupnost z klávesnice bohužel velmi problematická. kvůli nepřístupnosti položek 2. úrovně menu z klávesnice. U drtivé většiny webů také chyběly přeskakovací odkazy na důležité části webu (hlavní obsah, navigace) a vizuální zvýraznění prvku, který získá focus při ovládání webu z klávesnice. Zcela bezproblémovou měly ovladatelnost z klávesnice pouze 4 soutěžní weby.

Dostatečný barevný kontrast a čitelnost textu

Mnohem lepší byla situace v oblasti čitelnosti a kontrastu. Za opravdu problematické z tohoto úhlu pohledu se dalo považovat pouze 6 webů, u ostatních, což byla opět většina, byla čitelnost a kontrast na bezproblémové až vyhovující úrovni.

Dílčí problémy se pak objevily u odlišování odkazů od okolního textu: na několika webech byly odlišeny pouze barvou, v jednom případě pak dokonce nebyly odlišeny vůbec.

Definování smysluplné textové alternativy u grafických prvků, nesoucích významovou informaci

Přiřazovat grafickým prvkům textové popisky je dovednost, kterou už se tvůrci webů poměrně spolehlivě naučili. Se splněním tohoto bodu tedy nebyly žádné zásadní problémy a drtivá většina webů měla stěžejní grafické prvky korektně popsány. Pouze u několika málo webů byly pozvánky na akce zveřejňovány pouze v grafické podobě, což znemožňovalo jejich snadné přečtení či další zpracování (například zkopírování části textu).

Přístupnost dokumentů

Stále více informací je na webu publikováno prostřednictvím dokumentů. Proto je důležité, aby i tyto dokumenty splňovaly alespoň minimální požadavky na přístupnost, tj. alespoň obsahovaly textovou vrstvu.

U 13 webů jsem během testování narazil na dokumenty, které byly bez textové vrstvy, a k jejich přečtení tak bylo třeba vynaložit zvláštní úsilí (například si nechat obsah dokumentu rozpoznat pomocí OCR). Na zbývajících 28 webech byly dokumenty publikovány s textovou vrstvou.

Shrnutí

Jak je z řádků výše patrné, z obecného úhlu pohledu se stav přístupnosti knihovních webů pomalu lepší, nicméně stále je tady prostor ke zlepšení. Za pozornost stojí zejména zlepšení strukturování stránky pomocí nadpisů a oblastí a ovladatelnost rozhraní z klávesnice.

Cena za nejpřístupnější web

Součástí hodnocení je i nominování jednoho ze soutěžních webů na cenu za nejlepší bezbariérový web, který může posloužit jako zdroj inspirace pro ty, kdo chtějí svůj web lépe zpřístupnit. S požadavky na přístupnost se v letošním ročníku nejlépe vypořádali tvůrci webu Knihovny Jabok, kterým tímto ještě jednou srdečně blahopřeji 🙂


Pokud je pro Vás přístupnost nové téma a chtěli byste se s ní seznámit detailněji, doporučuji kurz Digitální design bez bariér pro začátečníky v Akademii CZ.NIC.

Digitální design bez bariér pro začátečníky v Akademii CZ.NIC

Pozvánka na školení zrakově postižených auditorů přístupnosti webu

Zájemcům z řad lidí s těžkým postižením zraku, kteří by se testování přístupnosti chtěli věnovat profesně a poskytovat zpětnou vazbu nad rámec subjektivního/uživatelského pohledu na web, je určeno Školení auditorů přístupnosti webu, která organizuje společnost Master Internet pod záštitou Světlušky – projektu Nadačního fondu Českého rozhlasu. A protože s Masterem i Světluškou spolupracuji, tak u toho samozřejmě nesmím chybět 🙂

Školení proběhne v úterý 2. října 2018 v prostorách společnosti Master Internet v Praze. Bližší informace najdete na stránce Školení auditorů přístupnosti webu nebo na stránce události Školení auditorů přístupnosti webu na Facebooku.

Těšíme se na vás 🙂

Školení přístupnosti v Moneta Money Bank