Strukturu nadpisů webové stránky je možné kontrolovat ve zdrojovém kódu. Zdrojový kód však může být dlouhý a nepřehledný. Ne každý také ovládá jazyk HTML. Při kontrole správné struktury webové stránky v takovém případě pomohou různé online nástroje nebo doplňky prohlížeče, kterých existuje celá řada - zde uvádíme dva z nich.

WAVE je online validátor, do něhož stačí zadat adresu stránky. WAVE má celou řadu funkcí, kromě struktury nadpisů webové stránky zobrazuje i celou řadu dalších informací o struktuře stránky, o prvcích, které jsou na stránce použity, o potenciálních chybách, problémech s kontrastem apod.

Použití validátoru je velmi jednoduché: Na webové stránce validátoru https://wave.webaim.org/ zadejte do pole „Web page address“ adresu stránky, jejíž strukturu chcete zkontrolovat.

Validátor detekuje jednotlivé prvky a výsledkem je zobrazení stránky, v níž jsou pomocí ikon zobrazeny oblasti stránky, její struktura, potenciální chyby přístupnosti apod.

Pokud kliknete myší na konkrétní ikonu, rozbalí se informace o daném prvku nebo chybě s možností zobrazení refreence (v angličtině) nebo zdrojového kódu, který se daného prvku či chyby týká. Nadpisy a jejich úrovně jsou označeny značkami H1 - H6 (tj. Header 1 - Header 6).

Na levé straně obrazovky se zobrazí šedomodrá lišta s přehledem jednotlivých prvků a případných chyb. Tato lišta obsahuje několik záložek. Jednou z nich je také informace o struktuře dokumentu.

Na obrázku č. 1 vidíte ukázku části výstupu hodnocení stránky Knihovny Jabok pomocí validátoru Wave. Nadpisy jsou přímo ve stránce vyznačeny modrými kolečky, na levé straně stránky vidíte informační lištu s rozbaleným panelem zobrazujícím strukturu stránky.

HeadingsMap je doplněk prohlížeče, který vytvoří strukturu nadpisů stránky a upozorní na případné chyby. Doplněk je dostupný pro prohlížeč Chrome a pro prohlížeč Firefox.

Po instalaci rozšíření HeadingsMap do prohlížeče se na horní liště vpravo vedle vyhledávacího řádku zobrazí ikona rozšíření .

Po kliknutí na ikonu HeadingsMapse na pravé straně otevře lišta, ve které je zobrazena struktura nadpisů stránky. Jsou zde také vyznačeny případné chyby.

Na obrázku 2 vidíte příklad zobrazení struktury stránky o registraci do knihovny Jabok pomocí doplňku HeadingsMap.