Na žádost redakce Ikara jsem do série článků o přístupnosti webových dokumentů zařadil díl věnovaný testu přístupnosti webové prezentace časopisu. Jak bylo popsáno v minulém dílu, existuje několik způsobů, jak přístupnost webových dokumentů testovat. Volba metodiky testu závisí na mnoha faktorech a proto je mnou zvolená metodika pouze jednou z variant, jak podobný test provést.

Cílem testu bylo ověřit splnění či nesplnění několika základních kritérií, která určují míru přístupnosti webového dokumentu.

Testována byla následující kritéria:

• Netextové prvky mají alternativní textový popis
• Informace jsou dostupné i bez použití aktivních prvků (např. JavaScript, Flash) a kaskádových stylů (CSS)
• Informace sdělované barvou jsou dostupné i bez barevného rozlišení, kontrast popředí a pozadí je dostatečný
• Uživatel může měnit velikost písma
• Formulářové prvky jsou výstižně popsány
• Titulek stránky informuje o jejím obsahu
• Odkazy jsou odlišeny od ostatního textu
• Nadpisy jsou ve zdrojovém kódu korektně vyznačeny
• Stránky jsou navigovatelné pomocí klávesnice

Vybraná testovací kritéria vycházejí z českých Pravidel pro tvorbu přístupného webu. Jednotlivá kritéria jsem hodnotil jako:

• Zcela splněno (známka 1)
• Spíše splněno (známka 2)
• Spíše nesplněno (známka 3)
• Zcela nesplněno (známka 4)

Cílem testu nebylo provést komplexní audit přístupnosti, ale pouze odhalit případné zásadní prohřešky proti přístupnosti. Výsledky testu také neobsahují konkrétní doporučení na to, jak případné prohřešky odstranit.

Metodika testu

Při testu jsem postupoval v následujících krocích:

1. Předběžná prohlídka stránek v různých prohlížečích a validace zdrojového kódu.
2. Provedení vybraných uživatelských testů a kontrola automatickým nástrojem WebXACT.
3. Manuální kontrola některých testovaných kritérií.

Prvním krokem byla předběžná prohlídka stránek, jejímž cílem bylo blíže se seznámit se stránkami a jejich chováním a zjistit, zda se vzhled a chování stránek v závislosti na použitém prohlížeči liší. Pod operačním systémem Windows XP jsem použil následující prohlížeče:

• Internet Explorer 6.0
• Mozilla Firefox 1.0.7
• Opera 7.54

V rámci předběžné prohlídky jsem také vybral následující stránky pro další testování:

• Domovská stránka časopisu Ikaros
• Pokročilé vyhledávání
• Příležitosti

Tyto stránky jsem vybral proto, že na vybraných stránkách se vyskytují prakticky všechny základní elementy značkovacího jazyka.

V rámci předběžné prohlídky byla provedena validace zdrojového kódu všech vybraných stránek. K validaci zdrojového kódu jsem použil služby Markup Validation Service na stránkách konsorcia W3C.

Druhým krokem bylo provedení vybraných uživatelských testů. Některé uživatelské testy jsem prováděl za použití toolbaru Web developer toolbar pro prohlížeč Mozilla Firefox, některé za použití standardních nástrojů prohlížeče nebo operačního systému. V průběhu testu jsem provedl následující dílčí uživatelské testy:

• Vypnutí grafiky v prohlížeči
• Vypnutí aktivních prvků (JavaScript)
• Vypnutí kaskádových stylů
• Ověření kontrastu popředí a pozadí za pomocí nástroje Kontrast barev, zapnutí funkce Vysoký kontrast
• Změna velikosti písma a velikosti okna prohlížeče
• Navigace pomocí klávesnice

Při testu jsem použil i výsledky kontroly stránek pomocí automatického nástroje WebXACT společnosti Watchfire. Tento nástroj automaticky ověřuje splnění kontrolních bodů metodiky WCAG 1.0 se zvolenou prioritou. Mnoho kontrolních bodů Pravidel pro tvorbu přístupného webu koresponduje s kontrolními body metodiky WCAG 1.0 a tak lze výsledky kontroly tímto nástroje využít jako užitečné vodítko.

Třetím a posledním krokem testu bylo ověření kritérií, která nelze kontrolovat pomocí automatických nástrojů, nebo je u nich žádoucí i manuální kontrola.

Výsledky testu

Při předběžné prohlídce v různých prohlížečích jsem nezaznamenal žádné velké rozdíly ve vzhledu a chování stránek.

Udivilo mne však fakt, že stránka Kurzy, na níž je odkazováno z hlavního menu, není součástí prezentace Ikara, ale nachází se na jiném serveru. Na tento fakt však uživatel není nijak upozorněn. Při zběžné prohlídce zdrojového kódu jsem také zjistil, že hlavnímu sdělení na stránce (např. seznamu článků aktuálního čísla nebo vyhledávacímu formuláři) předchází navigace. Podle Pravidel pro tvorbu přístupného webu by hlavní sdělení mělo být na začátku stránky, navigační a méně důležité informace by měly být uvedeny až dále ve zdrojovém kódu. To lze zajistit např. pomocí kaskádových stylů, nebo je vhodné poskytnout uživatelům odkaz umožňující přeskočit přes navigační informace rovnou k hlavnímu sdělení stránky. Při prohlídce zdrojového kódu jsem také zjistil, že stránky částečně využívají tabulkový layout pro rozdělení do tří sloupců. Z hlediska přístupnosti nepovažuji využití jednoduché tabulky pro layout za zásadní problém, protože logika informací zůstává zachována, za „čistší“ řešení bych však považoval využití kaskádových stylů. Poslední věc, kterou považuji za problematickou, je přítomnost některých stylových předpisů přímo ve zdrojovém kódu stránky. Tyto informace určené pro formátování stránky by měly být od struktury samotných informací odděleny (např. jejich umístěním v externím souboru).

Součástí předběžné prohlídky byla také validace zdrojového kódu vybraných stránek. Validátor konsorcia W3C nalezl průměrně 8 chyb na každé z testovaných stránek (v některých případech se jednalo o opakovaný výskyt stejné chyby). Byly nalezeny tyto chyby: nepřítomnost atributu alt u obrázku, chybějící uvozovky u hodnoty atributu, neuzavřené elementy, výskyt nepárových značek, použití nepovolených znaků v hodnotách atributů, opakovaný výskyt stejné hodnoty atributu id apod. Většinu těchto chyb by mělo být vcelku jednoduché odstranit.

V dalším kroku jsem přistoupil ke kontrole míry splnění stanovených testovacích kritérií. Výsledky kontroly pro jednotlivá testovaná kritéria jsou uvedeny dále.

Netextové prvky mají alternativní textový popis

Absenci textového popisu u obrázku odhalil jak validátor konsorcia W3C, tak i uživatelský test spočívající ve vypnutí grafiky. Alternativní textový popisek zcela chybí u loga International Visegrad Fund a u obrázků kalendáře na stránce pro pokročilé vyhledávání. V případě doplňování netextových prvků alternativními popisky je také třeba dbát na dostatečnou výstižnost a informační hodnotu alternativních popisků. Alternativní popisek u loga časopisu Ikaros je pouze „Logo“, což nepovažuji za dostatečně výstižnou alternativu. Jako optimální bych považoval následující text: „Logo Ikara, elektronického časopisu o informační společnosti“. Alternativní popisek u loga časopisu ITlib je jen „ITlib“, což také nepovažuji za dostatečný ekvivalent informací obsažených v obrázku. Obrázky, jenž nemají informační hodnotu, by měly mít atribut alt prázdný, vždy by ale měl být přítomen.

Hodnocení kritéria: spíše nesplněno (3)

Informace jsou dostupné i bez použití aktivních prvků (např. JavaScript, Flash) a kaskádových stylů (CSS)

Splnění tohoto testovacího kritéria jsem prověřoval uživatelskými testy (vypnutí JavaScriptu, vypnutí CSS). Z aktivních prvků se na stránkách Ikara vyskytuje pouze JavaScript, a to např. na stránce pro pokročilé vyhledávání. Zde umožňuje zadat data omezující vyhledávání z JavaScriptového kalendáře namísto jejich zápisu uživatelem. Stránky jsou plně funkční (datum lze do příslušných polí formuláře zapsat) i pokud je podpora JavaScriptu vypnutá. Veškeré informace jsou na stránkách dostupné i při vypnutých kaskádových stylech (CSS).

Hodnocení kritéria: zcela splněno (1)

Informace sdělované barvou jsou dostupné i bez barevného rozlišení, kontrast popředí a pozadí je dostatečný

Toto testovací kritérium jsem ověřoval uživatelskými testy (zapnutí funkce Vysoký kontrast) a za pomocí nástroje Kontrast barev, který je k dispozici na serveru Sova v síti. Barvy popředí (textu) a pozadí se jeví jako dostatečně kontrastní. Nedostatečný kontrast vykazují názvy jednotlivých rubrik Ikara vůči pozadí (oranžové texty Editorial, Informační gramotnost, atd. na bílém pozadí). Nižší kontrast jsem zaznamenal také v ohraničení některých formulářových polí. Stránky jsou dobře čitelné i při zapnuté funkci Vysoký kontrast.

Hodnocení kritéria: spíše splněno (2)

Uživatel může měnit velikost písma

Toto testovací kritérium jsem ověřoval uživatelský testem (změna velikosti textu pomocí nástrojů prohlížeče). V prohlížeči Mozilla Firefox však při zvětšení dojde k rozpadu layoutu stránky. V kombinaci se zmenšením okna prohlížeče na velikost 800 x 600 bodů dojde k tomu, že stránka není ani za použití posuvníků k dispozici celá.

Hodnocení kritéria: spíše splněno (2)

Formulářové prvky jsou výstižně popsány

Toto testovací kritérium vyžadovalo manuální kontrolu. Využil jsem u něj také výsledky kontroly nástrojem WebXACT. Na stránkách Ikara se nachází několik formulářů: formulář pro přihlášení uživatele, jednoduché vyhledávání a formulář s anketou na domovské stránce a rozsáhlý formulář na stránce pro pokročilé vyhledávání. Většina formulářových prvků (element INPUT) má správně přiřazen popisek (element LABEL), což umožňuje asociovat prvky formuláře s jejich popisky např. i hlasovým čtečkám. U některých formulářových prvků však popisek chybí, nebo je přiřazen nesprávně. Nesprávné přiřazení popisků se týká hlavně rozbalovacích seznamů (element SELECT) ve formuláři pro pokročilé vyhledávání. Je zde porušeno pravidlo, že hodnota atributu for elementu LABEL musí být v rámci stránky jedinečná. Toto zjištění koresponduje s výsledky validace stránek, při které bylo zjištěno opakované použití stejné hodnoty atributu id. Pozitivně lze hodnotit seskupování příbuzných prvků formuláře pomocí elementu FIELDSET.

Hodnocení kritéria: spíše splněno (2)

Titulek stránky informuje o jejím obsahu

Toto testovací kritérium vyžadovalo manuální kontrolu. Všechny vybrané stránky mají smysluplný titulek (element TITLE), který informuje o jejich obsahu.

Hodnocení kritéria: zcela splněno (1)

Odkazy jsou odlišeny od ostatního textu

Toto testovací kritérium vyžadovalo manuální kontrolu. Na stránkách Ikara je porušeno pravidlo o tom, že odkazy (element A) by měly být od okolního textu odlišeny nejen barvou. Pomocí kaskádních stylů je u odkazů odstraněno podtržení, které odkazy typicky odlišuje od okolního textu. Nejproblematičtější odkazy jsou odkazy přímo v odstavcích textu, kde je pro osobu s jen trochu horším zrakem velmi těžké odlišit je od okolního textu. Způsob odlišení odkazů od okolního textu se navíc v různých částech stránek liší, což může některé uživatele mást.

Hodnocení kritéria: zcela nesplněno (4)

Nadpisy jsou ve zdrojovém kódu korektně vyznačeny

Toto testovací kritérium vyžadovalo manuální kontrolu. Na stránkách se nenachází nadpis nejvyšší úrovně (H1), který je nahrazen obrázkem s logem časopisu (s nevhodným alternativním textovým popiskem). Nadpisy druhé úrovně (H2) jsou využity pro názvy jednotlivých částí stránek (Přihlášení, Vyhledávání, Citát půlměsíce, atd.). Na úvodní stránce jako nadpis vypadají i názvy jednotlivých rubrik (Editorial, Informační gramotnost, atd.), ve zdrojovém kódu však jako nadpisy vyznačeny nejsou. Vyznačování nadpisů pouze pomocí vizuálního formátování bez jejich korektního vyznačení ve zdrojovém kódu jsem zaznamenal např. i v některých článcích publikovaných v časopisu. Splnění tohoto kritéria je velmi důležité, protože korektní vyznačování jednotlivých prvků (nejen nadpisů, ale i seznamů, apod.) je klíčové pro udržení správné struktury informací obsažených v dokumentu.

Hodnocení kritéria: spíše nesplněno (3)

Stránky jsou navigovatelné pomocí klávesnice

Stránky jsou v prohlížečích Internet Explorer a Mozilla Firefox bez problémů navigovatelné pouze z klávesnice. Navigace pomocí klávesnice byla problematická v prohlížeči Opera, kde jsou za pomoci klávesnice dostupné pouze formulářové prvky, nikoliv odkazy na stránce.

Hodnocení kritéria: spíše splněno (2)

Závěr

V testu dosáhla nejlepšího hodnocení kritéria o výstižnosti titulku stránky a dostupnosti informací i bez podpory aktivních prvků (např. JavaScriptu) a kaskádových stylů (CSS). Nejhůře naopak dopadlo kritérium o odlišení odkazů od okolního textu (známka 4) a korektním vyznačování nadpisů ve zdrojovém kódu stránky (známka 3). Průměrná zaokrouhlená známka ze všech hodnocených kritérií byla 2 (spíše splněno).

Přestože by po doplnění alternativních textových popisků u obrázků, u kterých zcela chybí, testované stránky zřejmě dosáhly při automatické kontrole nástrojem WebXACT základní úrovně přístupnosti (WCAG-A) dle metodiky WCAG 1.0, některé prohřešky proti přístupnosti, které jsem v testu odhalil, jsou poměrně závažné. Patří sem například porušení pravidla o odlišování odkazů od okolního textu. Odkazy slouží jako jeden ze základních prvků navigace mezi stránkami a jejich špatná odlišitelnost od okolního textu je prohřeškem nejen proti přístupnosti, ale i proti použitelnosti stránek. Podobně závažným prohřeškem je i nedůsledné vyznačování nadpisů ve zdrojovém kódu stránky, popř. vytváření vizuálního dojmu nadpisů pomocí nevhodných elementů značkovacího jazyka.

Odstraněním nalezených nedostatků by se dle mého názoru přístupnost stránek nezanedbatelně zvýšila.

Pokud by si vydavatelé Ikara chtěli být opravdu jisti tím, že jeho stránky jsou přístupné co nejširšímu okruhu uživatelů, bylo by potřeba provést komplexní audit přístupnosti, který by odhalil další případné nedostatky, které já jsem svým testem neodhalil.

Použité zdroje

• Česko. Ministerstvo informatiky. Best practice Pravidla pro tvorbu přístupného webu verze 1.0. [online]. Praha : Ministerstvo informatiky, 2004 [cit. 2006-05-25]. Dostupné také na World Wide Web: <http://www.micr.cz/files/1588/BP_web.htm>.
• Web Content Accessibility Gudelines 1.0 [online]. Cambridge (MA, USA) : W3C, c1999 [cit. 2006-05-25]. Dostupné na World Wide Web: <http://www.w3.org/TR/WCAG10/>.