Archiv štítku: Webdesign

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 🙂

Soulad se standardy tvorby přístupného webu, nikoli widgety, je správná cesta k přístupnosti

Všichni uživatelé nejsou stejní. Každý z nich má různé potřeby, preference a schopnosti, jak může s webem pracovat. Neexistuje jediné univerzální řešení, které by vyhovovalo všem bez rozdílu. K přístupu k obsahu webu a jeho ovládání tak mohou dnes uživatelé využít několik možností:

  1. Pokud je web vytvořen v souladu s aktuálně platnými standardy a doporučeními tvorby přístupného webu, pak lze k němu bez obtíží přistupovat pomocí nejrůznějších asistivních technologií. Uživatelé se specifickými potřebami je běžně používají k práci s informačními a komunikačními technologiemi, a pokud chcete, aby s nimi mohli bez obtíží pracovat i s vaším webem, pak je jeho soulad s aktuálně platnými doporučeními naprosto nezbytný.
  2. S bodem prvním úzce souvisí i možnost přizpůsobit si obsah webu pomocí nástrojů, které nabízejí operační systémy či prohlížeče.
  3. Integrováním jednoúčelových nástrojů (widgetů), pomocí nichž si může uživatel obsah jednoho konkrétního webu zkusit více či méně uzpůsobit svým potřebám.

Jak už to tak bývá, první řešení – vytvoření webu v souladu s aktuálně platnými standardy a doporučeními – sice není na první pohled moc vidět, ale přináší skutečné výsledky a užitek co nejširší skupině uživatelů. S přístupným webem, vytvořeným dle aktuálně platných doporučení tvorby přístupného webu, si poradí asistivní technologie (například odečítací či zvětšovací programy) a jejich uživatelé tak mohou web bez obtíží používat.

Ne každý uživatel potřebuje robustní a funkcemi nabitou asistivní technologii. Řadě uživatelů stačí, když si mohou mírně zvětšit písmo či upravit barvy. V takovém případě mu mohou dobře posloužit nástroje, které mají v sobě integrovány operační systémy nebo prohlížeče. Zpravidla totiž platí, že takové nastavení bude potřebovat ne na jednom konkrétním webu, ale obecně.

Řada provozovatelů webů ale zvažuje vydat se cestou třetí, tj. soulad se standardy neřešit, ale nabízet na svých stránkách návštěvníkům jednoúčelové nástroje (widgety), sloužící například ke změně velikosti textu či pro přečtení části obsahu webové stránky. Takové nástroje jsou sice mnohem viditelnější a dají se i mediálně lépe “prodat”, její skutečný přínos pro uživatele je ale přinejmenším diskutabilní.

V čem vidím hlavní úskalí integrování nástrojů (widgetů) přímo do webových stránek?

Potřeba zvětšovat obsah na obrazovce či nechat si přečíst hlasem informace není vázána na jeden konkrétní web. Uživatel, který tímto způsobem kompenzuje svou zrakovou vadu, má tuto potřebu obecně. Proto je třeba toto řešit na straně uživatele poskytnutím vhodných asistivních technologií/ kompenzačních pomůcek a zaškolením v práci s nimi, ne nabídnutím jednoúčelového řešení na jednom webu.

Aby bylo možné asistivní technologie používat, provozovatel webu musí zajistit, aby web byl vytvořen v souladu s doporučením Web Content Accessibility Guidelines 2.1 (které je vyžadováno zákonem č. 99/2019 Sb.) a tím umožnil uživatelům bezproblémový přístup k obsahu webu a jeho ovládání prostřednictvím jimi používaných asistivních technologií.

Způsob, jakým tato rozšíření přistupují k řešení přístupnosti webu, proto považuji principiálně za (eufemicky řečeno) ne úplně šťastný, protože se snaží řešit to, co by mělo (musí) být řešeno na straně uživatele, a ne jednoho konkrétního webu, který tuto službu nasadí.

Je to podobné, jako kdybyste při zlomenině nohy chtěli vyřešit potřebu někam se dostat tím, že dotyčnému budete nabízet berle či invalidní vozík v každém potencionálním místě, na které se může vydat. Věřím, že se shodneme na tom, že takovýto přístup nedává z mnoha úhlů pohledu smysl. A že smysluplné je naopak to, co se dnes běžně děje, totiž že člověk si pořídí berle či vozík pro svou osobní potřebu a nespoléhá se na to, že mu v místě, na něž se vydá, budou při příchodu berle či vozík nabídnuty, a při odchodu je zase vrátí (už jen proto, že berle či vozík potřebuje i k tomu, aby se dostal na to místo).

Na provozovatelích míst, na která se může člověk s berlemi/ na vozíku vydat pak je, aby zajistili jejich přístupnost tím, že odstraní potencionální bariéry třeba vybudováním rampy, výtahu, absencí prahů, atp. A ne tím, že mu tam nabídnou další berle či vozík.

Možnosti prispôsobenia webového obsahu so zameraním na slabozrakých používateľov

Tématice řešením přístupnosti prostřednictvím widgetů na webových stránkách se ve své bakalářské práci Možnosti prispôsobenia webového obsahu so zameraním na slabozrakých používateľov věnovala Terézie Fričová.

Jejím cílem bylo zmapovat aktuálně nabízená řešení (widgety; asistivní technologie; prostředky, nabízené operačními systémy či webovými prohlížeči), která umožňují pracovat s webovým obsahem slabozrakým uživatelům. V praktické části pak provést průzkum mezi slabozrakými uživateli a zjistit, jaká z výše uvedených řešení pro práci s webem preferují a proč.

Widgety nejsou správná cesta

Výsledky průzkumu jednoznačně ukázaly, že zpřístupnění webu pomocí widgetů není z několika důvodů vhodná cesta:

  • řada widgetů byla sama o sobě nefunkčních,
  • widgety uživatelům nenabízely tu funkcionalitu, kterou slibovaly, či která by jim dostatečně kompenzovala jejich zrakovou vadu,
  • některé widgety bylo obtížné na webové stránce najít (například kvůli nízkému kontrastu),
  • uživatelé nejsou na používání widgetů zvyklí,
  • uživatelé neví, že taková možnost vůbec existuje.

Navíc také platí, že widgety činí uživatelské rozhraní složitější (je to další prvek navíc), což může jeho používání spíše zkomplikovat, než usnadnit.

Pokud chcete návštěvníky svého webu navést k tomu, že si mohou v případě potřeby změnit velikost textu nebo barvy, udělejte to chytře. Šikovné řešení jsem našel na webu Web Accessibility Initiative. Odkaz Change Text Size or Colors zavede uživatele na stránku s instrukcemi, jak může tyto změny provést pomocí nástrojů svého prohlížeče.

Několik doporučení na závěr

Bakalářská práce ve svém závěru uvádí tři doporučení, s nimiž se plně ztotožňuji:

  • Nástroje integrované ve webových prohlížečích a operačních systémech neukrývat hluboko v nastaveních, ale nabízet je uživatelům na jednom místě a snadno dostupné tak, aby je uživatelé v případě potřeby mohli snadno použít.
  • Aktualizovat možnosti, které nabízí webové prohlížeče, operační systémy a asistivní technologie tak, aby odpovídaly aktuálním potřebám uživatelů.
  • Při tvorbě přístupného webového obsahu se nesoustředit na přidávání widgetů na webové stránky (ty se ukázaly jako nevyhovující nástroj pro zpřístupňování webového obsahu), ale jít cestou dodržování zásad tvorby přístupných webových stránek (ideálně doporučení WCAG 2.1).

Testování přístupnosti webu: doporučené kombinace screen readeru a prohlížeče

Testujete (či se chystáte testovat) přístupnost webových stránek s odečítači obrazovky a zajímá Vás, s jakými konkrétními kombinacemi odečítačů obrazovky a webových prohlížečů dává smysl takové testy dělat? Na základě svých zkušeností, potvrzených nedávnou diskusí na Twitteru, a také na základě výsledků 2016 GOV.UK assistive technology survey, doporučuji pro jednotlivé operační systémy používat následující kombinace.

MS Windows

Na Windows (stále nejpoužívanější platforma) jsou mezi nevidomými uživateli aktuálně nejpoužívanější následující dvě kombinace:

  • NVDA s Mozilla Firefox
  • JAWS s prohlížeči Google Chrome nebo Mozilla Firefox, které nahradily dlouhodobě používaný Internet Explorer.

Pokud zatím nejste s prací se screen readerem zcela obeznámeni (či si ji chcete připomenout), doporučuji k prostudování dva návody

Je také dobré vědět, že:

  • i přes 100 % získaných na www.html5accessibility.com, MS Edge bohužel zatím neposkytuje dostatečnou podporu jak pro JAWS, tak NVDA, a ani není rozšířen mezi uživateli, takže testovat s ním moc nedává smysl.
  • JAWS i NVDA nejsou standardní součástí systému, je potřeba je nejprve nainstalovat. U NVDA je případně možné použít i portable verzi.
  • JAWS nabízí 40 minutovou demoverzi, kterou ale dle licenčních podmínek nelze používat ke (komerčnímu) testování. NVDA je open source odečítač, který žádné takové omezení nemá.
  • JAWS spustíte poklepáním na jeho zástupce na Ploše, ukončíte jej pomocí klávesové kombinace Insert + F4.
  • NVDA spustíte poklepáním na jeho zástupce na Ploše, ukončíte jej pomocí pomocí klávesové kombinace CapsLock + Q.

OS X a iOS

Na zařízeních od Applu, které běží na operačních systémech OS X či iOS, je nejlepší testovat s kombinací VoiceOver a Safari. VoiceOver je nedílnou součástí systému a stačí jej spustit

  • na OS X pomocí Command+F5 (stejnou klávesovou kombinací jej pak lze i ukončit).
  • Na iOS buď přes Nastavení – Obecné – Zpřístupnění, vhodnější je ale nadefinovat si spuštění/ukončení VoiceOveru na trojí stisknutí tlačítka Plochy (více informací viz VoiceOver na iOS (příručka).

Stručný návod v angličtině, jak testovat přístupnost webu s VoiceOverem, je pak k dispozici v článku Using VoiceOver to Evaluate Web Accessibility.

Android

Na zařízeních s Androidem je k testování možné použít screen reader TalkBack s prohlížečem Google Chrome (nebo nejnovějším Firefoxem). TalkBack je – stejně jako VoiceOver – nabízen jako součást operačního systému, takže jej opět stačí jen spustit přes Nastavení – Přístupnost. Bližší informace k různým možnostem spouštění viz Zapnutí aplikace TalkBack, vypnutí TalkBacku se dělá přes Nastavení > Usnadnění > TalkBack.

Při testování na iOS nebo Androidu se vám může hodit Přehled gest pro ovládání mobilních zařízení s odečítači VoiceOver a TalkBack.

Roman Kabelka, lektor workshopu Úvod do tvorby webu v redakčním systému WordPress

Co je třeba umět

Pokud jste dočetli až sem, nejspíš to s testováním přístupnosti pomocí screen readeru myslíte opravdu vážně. Což je z obecného úhlu pohledu dobře, protože seznámení se s potřebami a způsobem práce jedné z cílových skupin určitě není na škodu. Ale pozor, není to tak snadné, jak se může na první pohled zdát. Rozhodně neplatí to, že si vezmete do ruky mobil, spustíte odečítač a začnete testovat – tak jednoduché to bohužel není, viz můj starší článek Má smysl testovat svépomocí přístupnost webu pomocí screen readeru?).

Jestliže chcete, aby takové testování za něco stálo a obdrželi jste na základě něj relevantní výsledky, je třeba se dobře seznámit s tím, jak screen readery fungují, porozumět principům, na kterých pracují, a naučit se je obsluhovat. Pomoci vám v tom mohou například tutoriály, odkazované na konci tohoto článku. Bez těchto znalostí nedává moc smysl testovat přístupnost webu tímto způsobem, protože můžete

  • za problém v přístupnosti mylně považovat chyby, které ale budou způsobeny vaší neznalosti obsluhy screen readeru,
  • to, že “screen reader něco čte”, vyhodnotit jako potvrzení toho, že kontrolovaný prvek je přístupný (přestože tomu tak v reálu vůbec být nemusí).

Než se tedy do testování přístupnosti pustíte, zkuste si nejprve projít výše odkazované tutoriály a pokud na to máte prostor, tak není ani věci získat širší znalosti o přístupnosti například prostřednictvím některého z MOOCů o přístupnosti, které jsou aktuálně či v dohledné době nabízeny.

Pokud byste měli k testování přístupnosti se screen readery nějaký dotaz, zkuste na něj buď najít odpověď na Testing with Screen Readers – Questions and Answers, nebo jej napište sem do komentářů.

Přehled doporučených kombinací čtečky obrazovky a prohlížeče

  • MS Windows: JAWS + Google Chrome nebo Mozilla Firefox; NVDA + Mozilla Firefox
  • OS X a iOS: VoiceOver + Safari
  • Android: TalkBack + Google Chrome (eventuálně Mozilla Firefox)

Přehled doporučených studijních materiálů


Původní verze článku vyšla 24. listopadu 2016.