V prvním díle seriálu jsem se snažil vysvětlit, co je to přístupnost webových stránek a z jakých důvodů by měla být dodržovaná. Ve druhém díle jsem se pak pokusil vybrat z metodiky WCAG některé důležité zásady, které se dají bez větších obtíží otestovat. Zvolil jsem jich nakonec čtrnáct. Ačkoliv se mě někteří čtenáři snažili přesvědčit, ať svůj výběr mírně upravím, zůstanu u něj.
A nyní už k samotnému testu. Pro tento díl jsem si vybral weby tří ministerstev. Protože nemám ve svých testovacích kritériích ani jedno, které se týká použití rámců ( frame), zvolil jsem takové weby, které rámce nepoužívají. Testovat tedy budeme web Ministerstva financí (http://www.mfcr.cz), Ministerstva zdravotnictví (http://www.mzcr.cz) a Ministerstva informatiky (http:/www.micr.cz).
Před samotnými výsledky testu bych rád zdůraznil jeden důležitý fakt. Můj článek rozhodně nemůže být považován za audit přístupnosti. Za prvé jsem zvolil jen několik málo kritérií a za druhé testuji jen titulní stránku. Pro skutečné zjištění toho, jak je na tom web s přístupností, je třeba realizovat skutečný audit přístupnosti.
A jak tedy testované weby dopadly? Vezměme to postupně.
Ministerstvo financí
Stránky Ministerstva financí doznaly v poslední době velkých změn. Oproti předchozí verzi vypadají mnohem profesionálněji. Jsou tvořeny klasickým šibenicovým layoutem s využitím rozbalovacího horizontálního i vertikálního menu. Podle automatického auditu nevykazuje titulní stránka žádné chyby proti specifikaci. Její velikost je však s 92 kB na hranici, protože to odpovídá cca 13 sekundám stahování přes dial-up modem. Většinu datového přenosu zabere samotné HTML (39 kB) a obrázky (37 kB). Všechny odkazy jsou funkční. Kompletní výsledky automatického auditu.
V oblasti testovaných kritérií přístupnosti pak titulní stránka dopadla následovně:
| Pro každý netextový prvek poskytněte textovou alternativu | |
 |
Na webu je minimum obrázků. Na titulní stránce jsou významové obrázky dva. Obrázkově řešený hlavní nadpis, který má atribut alt v pořádku (Ministerstvo financí), a anglická vlaječka, která má atribut alt se zněním „EN“. Toto však rozhodně nelze považovat za plnohodnotnou alternativu. |
| Zajistěte, aby všechny informace nesené barvou byly dostupné i bez barevného rozlišení | |
 |
Stránky jsou bez problémů použitelné při vypnuté barvě i při různých barevných nastaveních ve Windows (funkce usnadnění). |
| Zajistěte, aby byl dokument čitelný i bez stylových předpisů (style sheets) | |
|
Vzhledem k tomu, že barva odkazů v rámci horizontálního menu je řešena přes kaskádové styly, ale pozadí tohoto menu nikoliv, nejsou při vypnutém CSS tmavě modré odkazy na tmavě červeném pozadí čitelné. |
| Zabraňte tomu, aby obrazovka kmitala | |
|
V tomto ohledu funguje stránka bezvadně. Nic se nehýbe, neskáče, nekmitá. |
| Ujistěte se, že jsou stránky použitelné bez funkčního skriptování či appletů, a pokud to není možné, zajistěte adekvátní alternativní informace na přístupné stránce | |
|
Stránky fungují správně i bez funkčního JavaScriptu. Menu se pochopitelně nerozbaluje, ale po kliku na první úroveň se uživatel dostane na výběr dalších možností. |
| Zajistěte, aby barevné kombinace popředí a pozadí byly dostatečně kontrastní i pro osoby s vadami zraku | |
|
Kontrast všech kombinací barev popředí a pozadí, které jsou na stránce použity, je dostatečný. |
| Existuje-li adekvátní značkovací jazyk, použijte k předání informace značkování místo obrázků | |
|
Obrázek, který nese informaci, je na stránce jen jeden, a sice hlavní nadpis. Je však použit správně a nesnižuje přístupnost stránky. |
| Vytvářejte dokumenty splňující zveřejněnou formální gramatiku | |
|
Kód stránky je naprosto validní podle specifikace HTML 4.01 Transitional. |
| Pro řízení layoutu a zobrazení použijte stylové předpisy (style sheets) | |
|
Kaskádové styly jsou použity jen pro některé designové charakteristiky. Znatelně chybí např. u pozadí horizontálního menu nebo pozadí hlavičky, kde je použita vlastnost přímo v HTML kódu. |
| Nepoužívejte tabulky pro layout, nedávají-li smysl i linearizované | |
|
Stránka používá tabulkový layout, ale tabulka dává smysl i linearizovaně. |
| Pro hodnoty atributů značkovacího jazyka a vlastností stylových předpisů používejte relativní jednotky místo absolutních | |
|
Velikost odkazů v horizontálním i vertikálním menu je nevhodně nadefinována. V MS Internet Expoloreru nejdou zvětšovat. |
| Ke strukturování dokumentů používejte prvky nadpisů, a to v souladu se specifikací | |
|
Například u nadpisu „Novinky“ je nevhodně použita konstrukce <p class="nadpis"> místo správné značky pro nadpis (např. h2) |
| Jasně identifikujte cíl každého odkazu | |
|
Odkazy jsou na stránce dostatečně přesné a vyjadřují svůj cíl. |
| Prostřednictvím metadat doplňte ke stránkám sémantické informace | |
|
Obsah značky title je v pořádku (Ministerstvo financí). Totéž platí o metaznačce content-type a keywords. Metaznačka description však zůstala nenaplněna. |
Ze čtrnácti kritérií tak titulní stránka Ministerstva financí uspěla v osmi.
Ministerstvo zdravotnictví
Na titulní stránce Ministerstva zdravotnictví dominuje „lékařská“ zelená. Layout je trojsloupcový, ale ovládaný kaskádovými styly. Podle automatického auditu dosahuje velikosti 78 kB, což přes dial-up odpovídá 11 sekundám stahování. Největší podíl na velikosti mají obrázky (57 kB). Co ale nelze přehlédnout, je fakt, že některé obrázky jsou zmenšovány až v samotném browseru, takže na velikosti by se dalo určitě ještě něco ušetřit. Stránka vykazuje několik chyb proti specifikaci HTML 4.01 Transitional. Kompletní výsledky automatického auditu.
V oblasti testovaných kritérií přístupnosti pak titulní stránka dopadla následovně:
| Pro každý netextový prvek poskytněte textovou alternativu | |
|
Všechny významové obrázky mají vhodně použitý atribut alt. |
| Zajistěte, aby všechny informace nesené barvou byly dostupné i bez barevného rozlišení | |
|
Stránky jsou čitelné i s vypnutými barvami nebo s jinou barevnou kombinací MS Windows. |
| Zajistěte, aby byl dokument čitelný i bez stylových předpisů (style sheets) | |
|
I přes fakt, že je celý layout řízen kaskádovými styly, je stránka použitelná i bez nich. Malou výtku bych měl k absenci oddělovačů jednotlivých obsahových bloků a mezinadpisům. |
| Zabraňte tomu, aby obrazovka kmitala | |
|
Na stránce se nic nehýbe. |
| Ujistěte se, že jsou stránky použitelné bez funkčního skriptování či appletů, a pokud to není možné, zajistěte adekvátní alternativní informace na přístupné stránce | |
|
Stránka je plně funkční i bez JavaScriptu. |
| Zajistěte, aby barevné kombinace popředí a pozadí byly dostatečně kontrastní i pro osoby s vadami zraku | |
|
Nedostatečný kontrast byl shledán u světle zeleného pozadí s tmavě zeleným písmem a světle zeleného pozadí s bílým písmem. |
| Existuje-li adekvátní značkovací jazyk, použijte k předání informace značkování místo obrázků | |
|
Mírnou výhradu mám k obrázku „České zdravotnictví a Evropská unie“, který je významovým nadpisem a přesto je řešen obrázkem, aniž by byl významově označen jako nadpis. |
| Vytvářejte dokumenty splňující zveřejněnou formální gramatiku | |
|
Stránka není validní proti specifikaci HTML 4.01 Transitional. |
| Pro řízení layoutu a zobrazení použijte stylové předpisy (style sheets) | |
|
Pro řízení layoutu byly využity kaskádové styly. |
| Nepoužívejte tabulky pro layout, nedávají-li smysl i linearizované | |
|
Tabulkový layout není použitý. |
| Pro hodnoty atributů značkovacího jazyka a vlastností stylových předpisů používejte relativní jednotky místo absolutních | |
|
Velikost písma i layoutu je nevhodně nadefinovaná. V MSIE nelze zvětšovat vůbec nic. |
| Ke strukturování dokumentů používejte prvky nadpisů, a to v souladu se specifikací | |
|
Použitý je jen jeden nadpis <h3>. Ostatní významové nadpisy nejsou jako nadpisy označeny. |
| Jasně identifikujte cíl každého odkazu | |
|
Všechny odkazy jsou srozumitelné a vyjadřují svůj cíl. |
| Prostřednictvím metadat doplňte ke stránkám sémantické informace | |
|
Použita je jen značka title. Ostatní metaznačky úplně chybí. |
Ze čtrnácti kritérií tak titulní stránka Ministerstva zdravotnictví uspěla v devíti.
Ministerstvo informatiky
Stránky Ministerstva jsou vytvořeny klasickým šibenicovým tabulkovým layoutem, na kterém dominuje šedá a bílá. Podle automatického auditu dosahuje titulní stránka velikosti 54 kB (~ 7 sekund na dial-upu). Největší podíl na velikosti má HTML kód (29 kB) a obrázky (16 kB). Stránka bohužel není validní podle zvolené specifikace HTML 4.01 Transitional. Kompletní výsledek automatického auditu.
V oblasti testovaných kritérií přístupnosti pak titulní stránka dopadla následovně:
| Pro každý netextový prvek poskytněte textovou alternativu | |
|
Na stránce chybí alt (resp. je prázdný) téměř u všech obrázků. |
| Zajistěte, aby všechny informace nesené barvou byly dostupné i bez barevného rozlišení | |
|
Stránka je použitelná i bez barev nebo jiného barevného schématu Windows. |
| Zajistěte, aby byl dokument čitelný i bez stylových předpisů (style sheets) | |
|
Stránka je bez stylů čitelná bez problémů. |
| Zabraňte tomu, aby obrazovka kmitala | |
|
Na obrazovce se nic nehýbe. |
| Ujistěte se, že jsou stránky použitelné bez funkčního skriptování či appletů, a pokud to není možné, zajistěte adekvátní alternativní informace na přístupné stránce | |
|
Stránky jsou plně fuknční i bez funkčního skriptování. |
| Zajistěte, aby barevné kombinace popředí a pozadí byly dostatečně kontrastní i pro osoby s vadami zraku | |
|
Kontrast je ve všech kombinacích pozadí a popředí dostatečný. |
| Existuje-li adekvátní značkovací jazyk, použijte k předání informace značkování místo obrázků | |
|
Všechny významové prvky jsou řešeny textově. |
| Vytvářejte dokumenty splňující zveřejněnou formální gramatiku | |
|
Stránka není validní proti specifikaci HTML 4.01 Transitional. |
| Pro řízení layoutu a zobrazení použijte stylové předpisy (style sheets) | |
|
Kaskádové styly se používají jen pro definici vzhledu písma. Layout zajišťuje pomerně komplikovaná tabulka. |
| Nepoužívejte tabulky pro layout, nedávají-li smysl i linearizované | |
|
Tabulka použitá pro layout dává smysl i linearizovaná. |
| Pro hodnoty atributů značkovacího jazyka a vlastností stylových předpisů používejte relativní jednotky místo absolutních | |
|
Velikost písma i layoutu je nevhodně nadefinovaná. V MSIE nelze zvětšovat vůbec nic. |
| Ke strukturování dokumentů používejte prvky nadpisů, a to v souladu se specifikací | |
|
Ačkoliv je na stránce několik významových nadpisů, žádný tak není v kódu označen. |
| Jasně identifikujte cíl každého odkazu | |
|
Příkladem špatného použití je odkaz „více“, který je na stránce použit několikrát, aniž by byl doplněn vhodným atributem title. |
| Prostřednictvím metadat doplňte ke stránkám sémantické informace | |
|
Chybí metaznačka description. |
Ze čtrnácti kritérií tak titulní stránka Ministerstva informatiky uspěla v sedmi.
Závěr
Podle počtu splněných kritérií nejlépe dopadlo Ministerstvo zdravotnictví. Nejhůře je na tom paradoxně Ministerstvo informatiky, které by IMHO mělo jít příkladem. Ani jeden web však nedosáhl plného počtu bodů.
Celkem se dalo očekávat, že testované weby dopadnou v testu špatně. Čekal jsem tabulkové layouty, minimální použití kaskádových stylů, nevalidní kód apod. Co mě ale velmi nepříjemně překvapilo, byla skutečnost, že ani jeden web nepoužívá správné relativní jednotky pro definici velikostí. Uživatel, který potřebuje či chce text zvětšit, pak vůbec nemá šanci. Další nepochopitelnou věcí je absence všech či některých metaznaček.
Abych však nebyl nespravedlivý: příjemně mě překvapilo, že se stránky nespoléhají na JavaScript, což je v poslední době velmi moderní. I bez funkčního JavaScriptu jsou stránky naprosto použitelné.
Jak budeme pokračovat
V příštím díle seriálu se zaměříme opět na tři weby. Tentokráte však zacílíme na krajské úřady. Uvidíme, jestli jejich weby budou lepší než weby testovaných ministerstev.
ČLÁNKY DO MAILU