V našem předchozím článku jsme se zabývali základy testování přístupnosti, čímž jsme položili základy pro pochopení, proč je důležité zajistit, aby vaše webové aplikace byly přístupné všem uživatelům, včetně těch se zdravotním postižením. Na tomto základu nyní stavíme a podrobně se zaměřujeme na konkrétní techniky používané při testování přístupnosti.

Pro dosažení komplexní přístupnosti a dodržení standardů, jako jsou Web Content Accessibility Guidelines (WCAG), je nezbytné používat kombinaci různých metod testování. Tento vícevrstvý přístup zajišťuje, že vaše aplikace je robustní a že všichni uživatelé, bez ohledu na to, jaké asistivní technologie používají, mohou bez problémů přistupovat k vašemu obsahu a funkcím.

Typy technik AT

Existuje několik strategií pro hodnocení přístupnosti webové aplikace. Pro dosažení nejlepších výsledků a zajištění souladu se standardy přístupnosti se doporučuje využívat kombinaci testovacích metod. Tento přístup zajišťuje robustnost systému a zaručuje, že všichni uživatelé, bez ohledu na jejich potřeby asistivní technologie, mají přístup ke všem funkcím a obsahu.

Existují dva typy technik AT:

• Automatizované testování přístupnosti
• Manuální testování s asistivní technologii

Automatizované testování přístupnosti

Testování pomocí automatizovaného nástroje je nejrozšířenější a nejsnazší metodou. Tyto nástroje zkoumají Document Object Model (DOM) webové stránky a upozorňují na nedostatky v přístupnosti a potenciální problémy, které vyžadují manuální kontrolu. Během testování software provádí sérii testů na DOM, včetně kontrol, zda každý prvek formuláře má popisek, všechny odkazy jsou rozpoznatelné, každá obrázek má alternativní text a mnoho dalšího.

Mnoho nástrojů pro testování přístupnosti provádí tyto testy na stránkách. Několik známých příkladů jsou:

• axe DevTools (Deque) 
• WAVE (WebAIM) 
• ANDI (US Social Security Administrati)

Manuální testování s asistivními technologiemi

I když jsou automatizované nástroje pro testování přístupnosti užitečné pro ověření, zda základní kód splňuje standardy pro přístupnou webovou aplikaci, často identifikují pouze část problémů potřebných k dosažení souladu a vytvoření přístupného řešení pro uživatele s postižením. Tyto testy jsou programové a zkoumají pouze základní kód. Mnoho odborníků odhaduje, že automatizované testování pokrývá jen asi 30 % požadavků podle směrnic Web Content Accessibility Guidelines (WCAG). Proto je zásadní zahrnout do své testovací metodiky manuální testování s asistivními technologiemi.

Manuální testování zahrnuje používání stejných asistivních technologií, které mohou používat uživatelé s postižením pro přístup k webovému obsahu. Existuje široká škála asistivních technologií, které umožňují uživatelům s postižením mít zážitek srovnatelný s jejich vrstevníky.

Běžně používané a testované technologie zahrnují:

• Čtečky obrazovky

Jedná se o komplexní nástroje speciálně navržené pro uživatele se zrakovým postižením. Nejenže nahlas čtou text na obrazovce, ale také poskytují zvukovou odezvu pro všechny interaktivní prvky, jako jsou tlačítka, odkazy a nabídky. Čtečky obrazovky umožňují uživatelům plně navigovat a interagovat s webovými stránkami a aplikacemi prostřednictvím zvukového výstupu a příkazů na klávesnici.

• Převod textu na řeč (TTS)

Tato technologie se primárně zaměřuje na převod psaného textu do mluveného slova. Obvykle se používá k hlasitému čtení obsahu, jako jsou články, knihy nebo jakýkoli psaný materiál. TTS je užitečný pro uživatele se zrakovým postižením, obtížemi při čtení nebo pro kohokoli, kdo dává přednost poslechu před čtením, ale neposkytuje navigační pomoc jako čtečky obrazovky.

• Rozpoznávání hlasu
• Umožňuje uživatelům ovládat zařízení a zadávat text pomocí hlasových příkazů, což poskytuje alternativu k zadávání pomocí klávesnice nebo myši pro osoby s fyzickým postižením.

Testování s použitím stejných nástrojů jako uživatelé s postižením nabízí následující výhody:

• Můžete zažít svůj produkt podobně jako uživatel s postižením.
• Získáte lepší pochopení toho, jak vaše aplikace interaguje s různými technologiemi.
• Můžete určit, zda splňujete směrnice pro dodržování předpisů na základě akcí uživatele.
• Můžete identifikovat způsoby, jak zlepšit uživatelský zážitek.

Praktický příklad

Rozšíření WAVE

Pojďme si ukázat, jak používat rozšíření prohlížeče WAVE k ověření přístupnosti hlavní stránky udemy.com. WAVE je nástroj pro hodnocení přístupnosti webu vyvinutý organizací WebAIM.org. Poskytuje vizuální zpětnou vazbu o přístupnosti webového obsahu tím, že do stránky vkládá ikony a indikátory.

1. Instalace

Začněme instalaci rozšíření WAVE. Je dostupné pro prohlížeče Chrome, Edge a Firefox.
Rozšíření najdete na webu WebAIM. Stáhneme si ho a povolíme v prohlížeči.

2. Spuštění testu

Po instalaci přejdeme na hlavní stránku udemy.com.

Klikněme na ikonu WAVE v liště prohlížeče pro spuštění testu přístupnosti a uvidíme výsledek.

3. Porozumění výsledkům

Rozšíření WAVE zobrazí postranní panel s výsledky. Kategorizuje problémy na chyby (červeně), upozornění (žlutě), funkce (zeleně), strukturální prvky (modře) a ARIA atributy (fialově).

Kliknutím na prvek uvidíme jeho umístění na stránce.

Chyby jsou problémy s přístupností, které vyžadují okamžitou opravu, zatímco upozornění jsou potenciální problémy, které nemusí platit vždy, ale stojí za zkontrolování.

4. Kontrola chyb a upozornění

Klikněme na každou chybu nebo upozornění v postranním panelu pro podrobnosti. WAVE zvýrazní problematický prvek na stránce a nabídne návrhy na zlepšení.

5. Kontrola chyb kontrastu

WAVE také kontroluje chyby kontrastu, což je důležité pro uživatele se zrakovým postižením. Ujistíme se, že veškerý text má dostatečný kontrast vůči pozadí.

6. Kontrola struktury stránky

WAVE poskytuje osnovu stránky založenou na nadpisech a oblastech (landmarks), která pomáhá pochopit strukturu stránky a zajistit její logičnost a přehlednost.

WCAG Color Contrast Checker

Podívejme se blíže, jak používat WCAG Color Contrast Checker k hodnocení kontrastu barev mezi textem a jeho pozadím opět na hlavní stránce udemy.com. WCAG Color Contrast Checker je bezplatné rozšíření/nástroj pro kontrolu barevných kombinací podle požadavků WCAG 2.1 pro úrovně AA nebo AAA.

1. Instalace

Projdeme na web Accessible web a stáhněme si rozšíření. Přidáme si ho do prohlížeče stejně jako WAVE.

2. Spuštění testu

Po instalaci přejdeme na hlavní stránku udemy.com.

Klikněme na ikonu WCAG Color Contrast Checker v listě prohlížeče pro spuštění testu a uvidíme výsledek:

3. Porozumění výsledkům

Nástroj nám ukáže v boční liště, zda každá barevná kombinace textu a pozadí na stránce vyhovuje požadavkům na kontrast podle WCAG 2.1. Procházející výsledek znamená, že text je čitelný i pro uživatele se zrakovým postižením. Nedostatečné kontrasty by měli být upraveny.

4. Kontrola chyb a upozornění

Nástroj zvýrazní oblasti, kde kontrast nesplňuje standardy, což je priorita pro úpravu. Prioritně chceme opravit chyby kontrastu u důležitého textu, zejména u navigace a klíčových informací, aby obsah byl přístupný všem uživatelům.

Čtečka obrazovky NVDA pro manuální testování přístupnosti.

Seznamme se s NVDA, jednou z nejpoužívanějších čteček obrazovky. NVDA je bezplatný open-source nástroj, který umožňuje nevidomým a zrakově postiženým uživatelům přístup k digitálnímu obsahu.

1. Instalace

Navštívíme web NV Access a stáhneme si NVDA.

2. Používání čtečky

Navigace webem pouze pomocí klávesnice může být zpočátku náročná, ale časem se stává efektivnější a rychlejší.

Základní navigace:

V tabulce níže je přehled specifických kláves pro čtečku NVDA. Všechny klávesové příkazy je možné dohledat na oficiálních stránkach NVDA.

3. Porozumění výsledkům

NVDA nahlas čte texty, odkazy, tlačítka a oznamuje obrázky s alternativním textem. Při navigaci poskytuje informace o nadpisech, odkazech a formulářích a tým můžeme odhalit možné chyby přístupnosti, jako chybějící alternativní text nebo špatně označené formuláře.

Závěr

Automatizované nástroje jako WAVE nebo WCAG Color Contrast Checker jsou velmi užitečné, ale nezachytí všechny problémy s přístupností. Proto je vhodné aplikace manuálně zkontrolovat, používat čtečky obrazovky a další praktické testovací metody. Komplexní kontroly přístupnosti jsou důležité pro zlepšení použitelnosti webu pro všechny uživatele, včetně osob se zdravotním postižením.

Podrobnější informace o těchto nástrojích a vyzkoušení si testování přístupnosti získáte na našem workshopu: Úvod do testování přístupnosti. Základní znalosti o digitální přístupnosti a jejím významu se můžete také zdarma dozvědět v kurzu na Tesena Academy.