Validátor přístupnosti WAVE

WAVE – Web Accessibility Evaluation Tool je online validátor přístupnosti. Validátor je k dispozici pouze v angličtině, jeho použití je však poměrně jednoduché

Na webové stránce validátoru https://wave.webaim.org/ zadejte do pole „Web page address“ adresu stránky, jejíž strukturu chcete zkontrolovat (viz obr. 1)

Obr. 1: Vstupní stránka validátoru přístupnosti WAVE
Obr. 1: Vstupní stránka validátoru přístupnosti WAVE

Validátor nabízí celou řadu funkcí a informací týkajících se stránky či potenciálních chyb přístupnosti, které se na stránce vyskytují. Jde zejména o informace o struktuře stránky (oblastech stránky, struktuře nadpisů) nebo informace o prvcích a jejich správnému použití z hlediska přístupnosti (např. upozornění na chybějící popisky obrázků, nebo formulářových polím informace o kontrastu prvků na stránce aj.).

Validátory jsou velmi užitečným nástrojem. Nesmíme však zapomínat, že žádný validátor sám o sobě pro kontrolu přístupnosti nestačí, protože odhalí jen některé problémy z oblasti spíše „technické“ přístupnosti stránek. Přístupnost se ale netýká jen technických záležitostí nebo správné syntaxe zdrojového kódu stránky, ale třeba také toho, jak jsou stránky strukturovány a jakou strukturu má celý web, jak je přehledná navigace, zda nadpisy na stránce nebo texty odkazů jsou výstižné, jestli se uživatel snadno dostane ke všem informacím, které potřebuje, jestli tyto informace jsou napsány srozumitelně atd. Naopak ne všechno, co validátor označí jako potenciální chybu, musí opravdu být chybou. Vždy je nutné, aby výsledky hodnocení provedl nejen „stroj“, ale i „člověk odborník“.

Zobrazení hodnocené stránky

Informace o hodnocené stránce jsou zobrazeny přímo na podkladě dané webové stránky formou ikon, které zastupují jednotlivé prvky nebo ikony kontrolované stránky. Pokud kliknete myší na konkrétní ikonu, je červenou tečkovanou čárou vyznačena oblast, ke které se daná ikona validátoru vztahuje.

Zároveň se rozbalí informace o daném prvku nebo chybě s možností zobrazení reference (informace o typu prvku nebo chyby s upozorněním na co si dát pozor, proč je daný prvek důležitý, co bývá častou chybou) nebo zobrazení zdrojového kódu, který se daného prvku či chyby týká.

Jak je patrné z konkrétního příkladu (viz obr. 2), na pravé straně je vidět rozbalená informace o navigačním menu rychlých odkazů 1) Skutečné hodnocení dané stránky je dostupné na adrese https://wave.webaim.org/report#/https://knihovna.jabok.cz/cs/e-zdroje-databaze/zdroje-dostupne-v-ramci-otevreneho-pristupu
Obr. 2: Rozhraní validátoru WAVE na příkladu webu Knihovny Jabok
Obr. 2: Rozhraní validátoru WAVE na příkladu webu Knihovny Jabok

Boční lišta s přehledy a nástroji

Na levé straně obrazovky se zobrazí šedomodrá lišta s přehledem jednotlivých prvků a případných chyb.2) Pro ilustrační obrázky byly použity výsledky validátoru pro stránku https://www.knihovny.cz/Record/vkol.SVK01-001292736, „výsledky skutečného hodnocení stránky jsou k dispozici na adrese https://wave.webaim.org/report#/https://www.knihovny.cz/Record/vkol.SVK01-001292736 Tato lišta obsahuje několik záložek:

Souhrn

Příklad souhrnu prvků a chyb, které jsou na stránce přítomné, a také jejich počtu je k dispozici na obr. 3. Přehled je výchozím zobrazením validátoru při načtení výsledků hodnocení přístupnosti stránky.

Obr. 3: Přehled výsledků hodnocení přístupnosti na boční liště validátoru WAVE
Obr. 3: Přehled výsledků hodnocení přístupnosti na boční liště validátoru WAVE

Detailní přehled prvků a chyb

Chyby či prvky přítomné na stránce jsou v detailním přehledu uvedeny jednotlivě pomocí ikon. Po kliknutí na ikonu v přehledu se zobrazí část stránky, která daný prvek obsahuje. Prvek je zároveň dočasně zvýrazněn bliknutím na stránce, případně červeným přerušovaným orámováním.
Obr. 4 zachycuje detailní výpis prvků/chyb na stránce. V detailním výpisu byl vybrán prvek „Table header“ (záhlaví tabulky), který se zobrazil také ve výsledcích hodnocení stránky.
Obr. 4: Prvek "Table header" (záhlaví tabulky) v detailním výpis prvků a chyb na stránce
Obr. 4: Prvek „Table header“ (záhlaví tabulky) v detailním výpis prvků a chyb na stránce

U každého typu prvků/chyb se zobrazuje kulatá ikonka s „i“. Po kliknutí na ni se v liště zobrazí reference (obecné informace) k dané chybě nebo prvku.

Reference k prvkům a chybám na stránce

Na záložce „Reference“ se zobrazí informace o typu prvku nebo chyby s upozorněním na co si dát pozor, proč je daný prvek důležitý nebo co bývá častou chybou, viz obr. 5 . Tato záložka je kontextová, takže při načtení stránky do validátoru nabízí výpis referencí, jinak se ale na ní zobrazují kontextové informace k jednotlivým prvků buď po kliknutí na ikonu „i“ v detailním výpisu chyb na boční liště, nebo po kliknutí na odkaz „Reference“ u detailního popisu jednotlivého prvku přímo ve webové stránce.

Na obr. 5 vidíme napravo nadpis vybrat instituci. Na levém bočním panelu validátoru je vybrána karta „reference“, proto se zde zobrazují obecné informace ke struktuře nadpisů, konkrétně nadpisu úrovně 3 (<h3>).
Obr. 5: Ukázka reference k nadpisům webové stránky
Obr. 5: Ukázka reference k nadpisům webové stránky

Struktura stránky

Na záložce „Structure“ je zobrazena struktura nadpisů na stránce, která slouží ke kontrole správnosti hierarchie struktury a nadpisů na stránce (viz obr. 6). Na záložce je zobrazena hierarchická struktura stránky, upozornění na chybějící úroveň nadpisů apod.

Pokud kliknete na konkrétní prvek v zobrazené struktuře nadpisů na boční liště, daný prvek se zobrazí ve výsledcích validace stránky a zároveň se zvýrazní červeným tečkovaným rámečkem.

Na obr. 6 vidíme, že nadpis třetí úrovně „Vybrat instituci“, který byl vybrán kliknutím na boční liště, je ve výsledcích hodnocení stránky zvýrazněn červeným rámečkem.
Obr. 6: Zobrazení struktury nadpisů ve validátoru WAVE
Obr. 6: Zobrazení struktury nadpisů ve validátoru WAVE

Hodnocení kontrastu textu a pozadí

Na záložce Contrast na pravé boční liště validátoru WAVE je možné zobrazit informace o chybách kontrastu textu vůči pozadí na stránce.

V horní části boční lišty se zobrazuje validátor kontrastu a pod ním jsou ikony, které zastupují jednotlivá problematická místa. Validátor WAVE je propojen s nástrojem WebAIM Contrast Checker, takže po kliknutí na dílčí ikonu na liště se ve validátoru zobrazí informace o kontrastu daného prvku (viz obr. 7.) vůči pozadí. V případě potřeby je možné posuvníkem validátoru vybrat vhodnou kombinace barev popředí a pozadí. Podrobný návod k nástroji WebAIM Contrast Checker najdete na samostatné stránce.

Obr. 7: Kontrola kontrastu textu a pozadí ve validátoru WAVE
Obr. 7: Výsledky hodnocení kontrastu textu a pozadí ve validátoru WAVE