Vzorový audit podle WCAG 1.0

Víte, jak se dělá skutečný audit? Chcete ho zkusit i na svých stránkách? Pak si určitě nenechte ujít tento výjimečný příspěvek Marka Prokopa. Svým rozsahem a obsahem patří mezi ty, které obohatí každou „knihovnu“ tvůrce webu. Celý audit je skutečný a byl proveden na stránkách obce Lužná.

Webové místo, které podrobím vzorové kontrole, se nachází na adrese www.obec-luzna.cz a jedná se o oficiální stránky obce Lužná. Tento web byl vybrán z toho důvodu, že svým účelem dobře reprezentuje typické stránky malé obce, je přiměřeného rozsahu a jeho autor již od začátku tvorby kladl na dobrou přístupnost nemalý důraz.

Předběžná prohlídka

Při první zběžné kontrole se snažím správně identifikovat účel stránek, seznámit se s jejich obsahem a celkovým rozsahem a odhalit případné nejzjevnější problémy s přístupností. Výsledkem předběžné prohlídky by mj. měl být i plán detailní kontroly.

Prohlídku jsem zahájil prohlížečem Internet Explorer 6 pod operačním systémem Windows 98, což je pravděpodobně nejtypičtější vybavení běžného uživatele. Zároveň jsem různě měnil nastavení prohlížeče tak, abych si prohlédl stránky i s vypnutými obrázky a skripty, při různé velikosti obrazovky a barevné hloubce. Výsledky předběžné prohlídky bych shrnul takto:

1. Celé webové místo je logicky strukturováno, prakticky všechny odkazy jsou kdykoli dostupné z přehledného menu v levém sloupci. Vzhled jednotlivých stránek dodržuje jednotnou úpravu, čímž přispívá k celkové dobré přehlednosti obsahu a usnadňuje orientaci uživatele.
2. Obsah stránek je za běžných podmínek dobře čitelný. Písmo sice nejde příslušným příkazem prohlížeče zvětšovat, neboť je jeho velikost deklarovaná v pixelech, avšak autor nabízí alternativní verzi s větším písmem. Kontrast textu a pozadí se zdá být dostatečný i při monochromatickém zobrazení (256 stupňů šedi), v případě menu v levém sloupci je však kontrast spíše na hranici čitelnosti.
3. Stránky mají pevnou šířku a v okně maximalizovaném na obrazovce o rozměrech 640×480 pixelů je třeba horizontálně rolovat. Jednotlivé sloupce, včetně hlavního textu, se však do takto vymezené šířky okna vejdou celé a horizontální rolování tedy není nutné během čtení souvislých úseků textu.
4. Stránky jsou plně použitelné i bez myši. Rolovat lze směrovými klávesami a na kterýkoli odkaz se lze dostat klávesou TAB. Žádný skript nebrání ani použití klávesnice, ani pravého tlačítka myši.
5. Stránky jsem prohlédl též tak, že jsem v prohlížeči nastavil maximální usnadnění přístupnosti, tj. se zapnutými volbami Ignorovat barvy definované na webových stránkách, Ignorovat styly písem definované na webových stránkách a Ignorovat velikosti písem definované na webových stránkách. I s tímto nastavením byly stránky přehledné a bez problémů čitelné.
6. Poměrně zásadní problém spočívá v tom, že obecní vyhlášky jsou k dispozici pouze ve formátu MS Word, jehož přístupnost je nízká. Nezbývá než konstatovat, že tato část obsahu není uživatelům adekvátně zpřístupněna a z dalšího testování bude vyloučena.

Z důvodu omezeného rozsahu tohoto příkladu jsem si pro další testy vybral pouze 2 stránky: stránku titulní a stránku Vyhlášky. Tyto dvě stránky jsem pak podrobil následujícím zkouškám:

1. Obě stránky jsem zkontroloval validátorem (X)HTML od W3C a shledal je validními podle normy XHTML 1.0 Strict.
2. Stránky jsem dále zběžně prošel v textovém prohlížeči Lynx. I zde byly dostatečně přehledné a čitelné.
3. Obě stránky jsem též otestoval on-line nástroji Bobby a WAVE. Výsledky získané těmito nástroji nenaznačovaly větší počet závažnějších problémů priority 1 a 2 dle WCAG 1.0, a proto jsem se rozhodl detailní testy zaměřit na soulad na úrovni AA.

Dlužno dodat, že na tomto místě by měla následovat i kontrola stránek osobou, či osobami se skutečnými zdravotními hendikepy a s použitím příslušných pomůcek, např. čtecích programů pro nevidomé apod. Z důvodů omezeného rozsahu článku byly však tyto kontroly vynechány.

Podrobné testování

Podrobné testování má za úkol prověřit přístupnost celého webového místa a určit úroveň přístupnosti, kterou stránky splňují, či kterou by po menších úpravách splňovat mohly. Jak již víte z článku Martina Snížka, norma WCAG 1.0 rozlišuje tři úrovně přístupnosti a jim odpovídající tři priority kontrolních bodů:

1. Kontrolní body s prioritou 1 musí být splněny a jejich splněním dosahuje dokument úrovně přístupnosti A.
2. Kontrolní body s prioritou 2 by měly být splněny a jejich splněním dosahuje dokument úrovně přístupnosti AA (Double A).
3. Kontrolní body s prioritou 3 mohou být splněny a jejich splněním dosahuje dokument úrovně přístupnosti AAA (Triple A).

Jak jsem již uvedl výše, pro testované webové místo se jako optimální cíl jeví úroveň AA, která jednak představuje velmi dobrou míru přístupnosti a jednak je i u stránek tohoto typu snadno dosažitelná.

Následující testy jsem tedy zaměřil na kontrolní body priority 1 a 2, jak je vyjmenovává Checklist of Checkpoints for Web Content Accessibility Guidelines 1.0, který doplňuje základní normu WCAG 1.0. Při testování jsem využil automatizované nástroje Bobby, WAVE a A-Prompt, které sice nejsou sami o sobě schopny kontrolované stránky jednoznačně vyhodnotit, ale pomohou nalézt potenciální problémy.

Před tím, než se pustíte do studia výsledků, ještě upozorním, že z citovaného znění kontrolních bodů někdy nelze zcela jednoznačně dovodit konkrétní obsah testu. Tester proto musí dobře znát všechny související dokumenty WAI a případné nejasnosti konzultovat jednak se zdravotně postiženými a jednak v odborných fórech.

Kontrolní body s prioritou 1

1.1 Pro každý netextový prvek poskytněte textovou alternativu.

Na titulní stránce obce jsou pouze dva netextové prvky – obrázek tvořící záhlaví každé stránky a obrázek obce zasazený do hlavního textu stránky. U každého obrázku se musí prověřit, zda:

1. obsahuje alternativní text (atribut alt),
2. alternativní text poskytuje adekvátní textovou náhradu,
3. je třeba poskytnout podrobnější popis obrázku (atribut longdesc, případně tzv. d-link),

První bod je splněn, neboť oba obrázky obsahují alternativní text v atributu alt. Co se týče druhého a třetího bodu, musíme nejprve prozkoumat, co obrázky zobrazují a posoudit jejich význam.

Obrázek v záhlaví stránky obsahuje erb obce, vedle něj nápis LUŽNÁ vyvedený větším dekorativním písmem a pod ním menším písmem nápis Zlínský kraj – okres Vsetín – Valašsko. Alternativní text však říká jen Znak obce Lužná, což zjevně neodpovídá celému obsahu obrázku a tedy neposkytuje dostatečnou náhradu pro uživatele, kteří obrázek nevidí.

Ideálním řešením by bylo rozdělit tento obrázek na dva: erb se současným alternativním textem a nápis, jehož alternativní text by zněl např. LUŽNÁ; Zlínský kraj – okres Vsetín – Valašsko. Delší popis by v takovém případě nebyl třeba, neboť nápisy by byly nahrazeny dostatečně a obrázek erbu zde má spíše dekorativní charakter.

2.1 Zajistěte, aby všechny informace nesené barvou, byly dostupné i bez barevného rozlišení.

Jedinými barevně odlišenými prvky na stránkách jsou hypertextové odkazy, které jsou jednotně vyznačeny modrou barvou. Odkazy hlavního menu další odlišení nepotřebují, neboť z jejich umístění a formulace je patrné, že se jedná o odkazy. Odkazy v textu (stránka Vyhlášky) jsou navíc označeny podtržením.

4.1 Zřetelně označte změny jazyka textu dokumentu i alternativních textových ekvivalentů.

Stránky jsou psány pouze česky a při testování nebyly nalezeny odborné termíny či citace v jiném jazyce. Tento kontrolní bod je tedy splněn.

6.1 Zajistěte, aby byl dokument čitelný i bez stylových předpisů (style sheets).

Stránky používají kaskádové styly. Stylový předpis je uložen v externím souboru a k dokumentům je připojen pravidlem @import. Vřazené styly (atributem style) v dokumentech nejsou. Testování je v takovém případě snadné – ze zdrojového kódu odstraníme prvek <style>, nebo externí soubor stylového předpisu přejmenujeme. I po této úpravě jsou stránky bez problémů čitelné a přehledné a tento kontrolní bod je tedy splněn.

6.2 Zajistěte, aby se ekvivalenty dynamického obsahu při změně tohoto obsahu aktualizovaly.

Stránky neobsahují žádný dynamický obsah a tento kontrolní bod je tedy splněn.

7.1 Zabraňte tomu, aby obrazovka kmitala.

Na stránkách nejsou animované obrázky či jiné prvky způsobující kmitání obrazu o vysoké frekvenci a tento kontrolní bod je tedy splněn.

14.1 Používejte co nejjasnější a nejjednodušší jazyk, adekvátní obsahu stránek.

Tento kontrolní bod vyžaduje pečlivé pročtení stránek, nejlépe několika různými čtenáři a i tak zůstává hodnocení poněkud subjektivní. V tomto případě je však text na testovaných stránkách nesporně formulován srozumitelně, dostatečně jasně a adekvátně účelu.

Následující kontrolní body nebyly testovány:

• 1.2 a 9.1 – stránky neobsahují obrázkové mapy (image maps)
• 5.1 a 5.2 – stránky neobsahují tabulky pro tabelovaná data
• 12.1 – stránky nepoužívají rámce (frames)
• 6.3 – na stránkách nejsou applety a skripty
• 1.3 a 1.4 – na stránkách nejsou použity multimediální prvky
• 11.4 – bezpředmětný, neboť stránky lze dostatečně zpřístupnit a alternativní verze je tedy zbytečná

Kontrolní body s prioritou 2

2.2 Zajistěte, aby barevné kombinace popředí a pozadí byly dostatečně kontrastní i pro osoby s vadami zraku.

Tento kontrolní bod se s prioritou 2 vztahuje pouze na obrázky, nikoli text. Na stránkách nejsou obrázky, jejichž informační hodnota by utrpěla nízkým kontrastem barev.

Ačkoli se tento kontrolní bod vztahuje na text až u priority 3, v praxi je to kritérium poměrně významné a podrobil jsem ho testování také. Na stránkách jsou použity tyto barevné kombinace písma a pozadí:

1. černé písmo na bílém pozadí v hlavním textu
2. modré písmo (#0000FF) na bílém pozadí pro odkazy v hlavním textu
3. modré písmo (#0000FF) na zeleném (#BFE3D1) podkladu pro menu
4. zelené písmo (#7EC6A1) s černými konturami na bílém podkladu v obrázku v záhlaví

Všechny barevné kombinace byly převedeny na stupnici 16 odstínů šedi a shledány dostatečně kontrastní. Taktéž test zobrazení pro barvoslepé nástrojem Vischeck dopadl dobře. Menší výhradu mám jen k barvě pozadí menu (#BFE3D1), která může být na některých zařízeních (256 barev) rastrována natolik, že ztíží čitelnost písma.

3.1 Existuje-li adekvátní značkovací jazyk, použijte k předání informace značkování místo obrázků.

Na stránkách je použit značkovací jazyk XHTML 1.0 v plné míře, značky nejsou neadekvátně nahrazeny obrázky.

3.2 Vytvářejte dokumenty splňující zveřejněnou formální gramatiku.

Dokumenty jsou validní podle normy XHTML 1.0. Výjimku ovšem představují již dříve zmíněné obecní vyhlášky, které jsou k dispozici pouze ve formátu MS Word a byly proto z testování vyloučeny.

3.3 Pro řízení layoutu a zobrazení použijte stylové předpisy (style sheets).

Layout stránek je rozvržen jednou jednoduchou tabulkou, ostatní zobrazení je řízeno kaskádovými styly (CSS).

3.4 Pro hodnoty atributů značkovacího jazyka a vlastností stylových předpisů používejte relativní jednotky místo absolutních.

Na stránkách jsou jako jednotky velikosti písma a rozměrů prvků použity pixely (px), což je jednotka relativní vzhledem k rozlišení média. Vzhledem k tomu, že chybí alternativní stylový předpis pro tisk, může použití pixelů spolu s pevnou šířkou stránky způsobovat problémy při tisku. Základní přístupnost tím sice snížena není, přesto však stojí za úvahu změna jednotek velikosti písma a šířky stránky z pixelů na procenta.

3.5 Ke strukturování dokumentů používejte prvky nadpisů, a to v souladu se specifikací.

Dokumenty jsou správně strukturovány prvky <h1> (hlavní nadpis stránky) a <h2> (podnadpisy). Nadpisy nejsou nesprávně použity bez strukturálního významu pouze k formátovacím účelům

3.6 Označujte správně seznamy a položky seznamů.

Jediným logickým seznamem na testovaných stránkách je hlavní menu vlevo a to je v HTML správně vyznačeno jako neuspořádaný seznam značkami <ul> a <li>.

3.7 Vyznačujte citování. Nepoužívejte značky pro citování k dosažení formátovacích efektů.

Stránky neobsahují citáty a značky pro citování (<q> a <blockquote>) nejsou nesprávně použity pro formátovací účely.

6.5 Zajistěte přístupnost dynamického obsahu, nebo poskytněte alternativní zobrazení, či stránku.

Stránky neobsahují dynamický obsah.

7.2 Vyhněte se blikajícímu obsahu.

Stránky neobsahují blikající obsah.

7.4 Nevytvářejte stránky, které se automaticky pravidelně znovu načítají.

Stránky se automaticky opakovaně nenačítají.

7.5 Nepoužívejte značky způsobující automatické přesměrování stránky. Je-li třeba, nastavte přesměrování na straně serveru.

Stránky neprovádějí automatické přesměrování.

10.1 Neotevírejte pop-up či jiná nová okna a neměňte aktuální okno bez předchozího upozornění uživatele.

Na stránkách nedochází k automatickému otevírání nových oken a všechny odkazy na titulní stránce jsou směrovány do stejného okna. Jinak je tomu ale na stránce Vyhlášky. Tři v textu umístěné odkazy na plné znění vyhlášek zde používají atribut target s hodnotou _blank a cílový dokument odkazu se tedy otevře v novém okně. Uživatel na to není v textu nijak jinak upozorněn, což je v rozporu s kontrolním bodem 10.1.

11.1 Používejte technologie W3C, jsou-li k dispozici a vhodné pro požadovaný účel a používejte nejnovější verze, jsou-li podporovány.

Stránky využívají specifikace XHTML 1.0 Strict a CSS2 s výjimkou uvedenou u kontrolního bodu 3.2.

11.2 Vyhněte se překonaným (deprecated) rysům technologií W3C.

Jak již vyplývá ze zvolené normy XHTML a z toho, že jsou dokumenty podle této normy validní, překonané prvky jazyka HTML nejsou použity.

12.3 Kde je to možné, rozdělte velké bloky informací vhodným a přirozeným způsobem na menší.

Obsah stránek je vhodně a logicky rozčleněn. Pouze doporučuji používat kratší odstavce, tj. dodržovat pravidlo 1 myšlenka, jeden odstavec.

13.1 Jasně identifikujte cíl každého odkazu.

Na titulní stránce se nalézají tyto odkazy:

1. O obci
2. Zastupitelstvo
3. Vyhlášky
4. Zpravodaj
5. Aktivity v obci
6. Společenský život
7. Historie obce
8. Fotogalerie
9. Mapa okolí
10. Kontakty
11. Užitečné odkazy
12. Změnit písmo

Všechny odkazy, až na poslední, poměrně jasně identifikují svůj cíl. Odkaz Změnit písmo slouží ke změně velikosti písma a jeho formulace je tedy nejednoznačná. Doporučuji nahradit odkazem Zvětšit písmo (pro volbu verze s větším písmem), resp. Zmenšit písmo (pro volbu verze s menším písmem).

Na stránce Vyhlášky se navíc vyskytují přímo v textu tyto odkazy:

1. ozv_c20.doc
2. ozv_c21.doc
3. ozv_c4.doc

Všechny tři nedávají smysl, jsou-li vyňaty z kontextu a neidentifikují dostatečně svůj cíl. Navíc míří na soubory ve formátu MS Word, který obecně nesplňuje požadované nároky na přístupnost a nemusí být pro mnoho uživatelů vůbec čitelný.

13.2 Prostřednictvím metadat doplňte ke stránkám sémantické informace.

Testované stránky používají prvek <title> a meta značky author, copyright, keywords a description. Prvek <title> však není použit optimálně, neboť má stejnou hodnotu (text Lužná – oficiální stránky obce) na všech stránkách webového místa. Mimo vlastní testovánípřístupnosti lze vyjádřit pochybnost, zda obsah meta značek author a copyright odpovídá skutečnosti (uveden je zřejmě jen autor designu a webdesignérská firma).

13.3 Poskytněte informace o celkové struktuře webového místa (např. formou mapy webu, či obsahu).

Na každé stránce se v levém sloupci nachází seznam všech hlavních stránek webového místa, který umožňuje uživateli dostatečnou orientaci v jeho struktuře.

13.4 Používejte navigační prostředky konzistentně.

Navigace je řešena pomocí menu hlavních odkazů v levém sloupci každé stránky a odkazy přímo v textu. Všechny odkazy mají jednotný styl.

5.3 Nepoužívejte tabulky pro layout, nedávají-li smysl i linearizované.

Testované stránky sice používají tabulky pro layout, avšak jedná se jen o jedinou tabulku s dvěma buňkami a po linearizaci je tedy zachována logická posloupnost informací.

5.4 U tabulek pro layout nepoužívejte žádné strukturální značky k formátovacím účelům.

V tabulkách pro layout jsou použity pouze základní značky <tr> a <td>.

Následující kontrolní body nebyly testovány:

• 12.2 – stránky nepoužívají rámce (frames)
• 10.2, 12.4 – stránky nepoužívají formuláře (forms)
• 6.4, 7.3, 8.1. 9.2, 9.3 – na stránkách nejsou skripty a applety

Výsledky testování

Provedenou kontrolou webového místa wwww.obec-luzna.cz byly zjištěny tyto nedostatky zásadně bránící požadované úrovni přístupnosti:

1. Obrázek v záhlaví každé stránky nenabízí dostatečnou textovou alternativu (kontrolní bod 1.1, priorita 1).
2. Na stránce Vyhlášky jsou tři odkazy otevírány do nového okna, aniž by o tom byl uživatel vyrozuměn (kontrolní bod 10.1, priorita 2).
3. Odkaz Změnit písmo v menu na všech stránkách nevystihuje dostatečně svůj cíl, resp. účel (kontrolní bod 13.1, priorita 2).
4. Tři odkazy na plný text vyhlášek na stránce Vyhlášky nedávají smysl mimo kontext a neinformují dostatečně o obsahu a formátu cílových dokumentů (kontrolní bod 10.1, priorita 2).
5. Obsah prvku <title> je na všech stránkách shodný a neposkytuje tak uživateli vodítko k snadnému rozlišení jednotlivých stránek (kontrolní bod 13.2, priorita 2).

Doporučené úpravy

Testované stránky budou splňovat úroveň přístupnosti A dle normy WCAG 1.0 po provedení následující úpravy:

• U obrázku v záhlaví každé stránky se opraví alternativní text (obsah atributu alt) na LUŽNÁ; Zlínský kraj – okres Vsetín – Valašsko, případně se jiným způsobem uvede do souladu alternativní text s významem tohoto obrázku.

Po provedení následujících úprav budou testované stránky navíc splňovat úroveň přístupnosti AA dle normy WCAG 1.0:

• Odkazy ozv_c20.doc, ozv_c21.doc a ozv_c4.doc na stránce Vyhlášky se nebudou otevírat do nového okna, tj. nebude u nich použit atribut target s hodnout _blank, nebo se do textu doplní zřetelné upozornění, že následováním těchto odkazů dojde k otevření nového okna.
• Text odkazu Změnit písmo v hlavním menu se upraví tak, aby lépe vystihoval funkci odkazu. Např. lze použít text Zvětšit písmo ve verzi stránek s menším písmem a Zmenšit písmo ve verzi stránek s větším písmem.
• Texty odkazů ozv_c20.doc, ozv_c21.doc a ozv_c4.doc na stránce Vyhlášky se upraví tak, abyi mimo kontext stránky výstižně charakterizovaly cíle odkazů. Zároveň doporučuji v textu upozornit na skutečnost, že se jedná o dokumenty ve formátu MS Word a případně též uvést jejich velikost.
• Obsah prvku <title> se na všech stránkách upraví tak, aby jednoznačně identifikoval každou jednotlivou stránku, tj. aby se tentýž text neopakoval na více stránkách webového místa.

Další doporučení

Výše uvedené úpravy jsou nezbytné k dosažení požadované úrovně přístupnosti dle normy WCAG 1.0. Kromě nich však doporučuji ještě tyto další úpravy, které s minimálními náklady dále výrazně zvýší přístupnost testovaného webového místa:

• Obecní vyhlášky, nyní dostupné jen v proprietárním formátu MS Word by měly být zpřístupněny i v (X)HTML. Pokud to z nějakého důvodu není možné, bylo by vhodné nabídnout tyto dokumenty paralelně v několika formátech, kromě MS Word např. též ve formátu PDF či jako prostý text.
• Jako vhodnější alternativu různým verzím stránek s různě velikým písmem doporučuji nedefinovat ve stylovém předpisu základní velikost písma vůbec a případné odstupňování velikosti písma určitých částí textu (nadpisy, menu) deklarovat v procentech.
• Doporučuji nahradit pevnou šířku stránky určenou v pixelech šířkou plovoucí, odvozenou z aktuální šířky okna prohlížeče. Nebude-li tato úprava provedena v HTML kódu dokumentu a v základním stylovém předpise, měl by se alespoň vytvořit alternativní stylový předpis, nebo alternativní verze stránek pro tisk, kde by velikosti písma a stránky nebyly určeny v pixelech.
• Pro hlavní menu v levém sloupci doporučuji zvolit kontrastnější kombinaci pozadí a písma a barvu pozadí nahradit tzv.bezpečnou barvou, nebo barvou, u které nedochází k hrubému rastrování při zobrazení na monitoru s osmibitovou barevnou hloubkou (256 barev). Alternativně lze tento nedostatek napravit použitím tučného písma pro text odkazů.

Závěr

Při posuzovaní výsledků tohoto testování je třeba vzít v úvahu, že se jednalo o příklad limitovaný rozsahem článku. Přístupnost a základní použitelnost stránek nebyly testovány osobami se skutečným zdravotním postižením. Vypovídací schopnost výsledků je dále omezena pouze na ty stránky, které byly detailně prověřeny a závěr se tedy nevztahuje na celé webové místo.

Na závěr je třeba zdůraznit, že stejný význam, jako tato kontrola a provedení z ní vyplývajících oprav, má i trvalá údržba webového místa v dobře přístupném stavu. Součástí testovací zprávy tedy obvykle bývá i metodické doporučení pro další správu stránek, jehož dodržování garantuje dlouhodobou přístupnost publikovaného obsahu. Z důvodu omezeného rozsahu článku je toto doporučení vynecháno.

Starší komentáře ke článku

Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.