Struktura webové stránky zahrnuje více aspektů, které jsou navzájem propojené. Jde jednak hierarchickou strukturu stránky vyjádřenou hierarchií nadpisů, jednak o strukturu informační, do které patří jednotlivé funkční oblasti webové stránky, obvykle vyjádřené pomocí bloků.

Jak struktura nadpisů, tak jednotlivé funkční oblasti stránky v sobě zahrnují dva navzájem propojené prvky:

• strukturu vyjádřenou v grafickém rozhraní stránky, kterou vnímá běžný uživatel webu;
• zdrojový kód, který je pro běžného návštěvníka webu neviditelný, ale pracují s ním technologie, které obsah webu zprostředkovávají uživatelům (jde nejen o asistivní technologie, jako jsou odečítače obrazovky, braillské řádky apod., ale také o webové vyhledávače).

Funkční oblasti stránky zahrnují oblasti / informační bloky stránek, které se na stránkách obvykle vyskytují. Jsou to např. tyto oblasti:

• záhlaví;
• vyhledávací lišta;
• navigační prvky (např. hlavní menu, menu druhé úrovně, rychlá navigace);
• hlavní obsah;
• zápatí stránky.

Běžný uživatel se v této struktuře může orientovat vizuálně, protože jednotlivé části webu jsou prezentovány ve formě bloků, mají své specifické umístění, odlišují se také pomocí grafiky např. odsazením, ohraničením, barvou, velikostí a stylem písma apod.

Uživatel, který nemůže využít vizuální orientaci na stránce (např. nevidomý člověk, který používá odečítač obrazovky případně i webový vyhledávač) se musí na stránce orientovat jinak. Využívá k tomu značek ve zdrojovém kódu stránky.

Aby byla stránka dobře přístupná zejména pro odečítač obrazovky nebo jiná alternativní zařízení, musí v ní být vymezeny tzv. funkční oblasti. Funkční oblasti jsou definovány strukturními značkami poskytujícími informace o oblasti stránky, např.:

• <header> pro záhlaví;
• <nav> pro navigaci;
• <main> pro hlavní obsah.

Definice oblastí stránky jsou součástí jazyka HTML a používají se optimálně v kombinaci s nástrojem WAI-ARIA¹⁾, který zlepšuje využívání o ovládání webu pomocí asistivních technologií. Strukturu obsahu stránky pak určuje struktura nadpisů, seznamy a další prvky. Např. nevidomý uživatel, který používá odečítač obrazovky se na stránce pohybuje pomocí příkazů využívajících strukturní značky jednotlivých bloků či oblastí stránky, nadpisů, seznamů, tabulek apod.

Definice oblastí stránek, nastavení chování stránek při práci s nadpisy seznamy aj. je záležitostí zejména vývojářů redakčního systému či webu. Výsledná struktura nadpisů nebo používání seznamů jsou však ve značné míře především záležitostí vkládání informací do redakčního systému

Pro přístupnost webu je důležité, aby stránka měla správnou strukturu. Ta je tvořena zejména názvem stránky a nadpisy v hierarchickém uspořádání. Nadpisy by měly být logicky uspořádané a výstižné.

Na každé webové stránce je nutné uvést název stránky. Název stránky je pak většinou zobrazen ve webovém prohlížeči jako název záložky nebo okna, většinou se také použije jako nadpis první úrovně, viz obr. 1. V redakčních systémech bývá název stránky vyžadován jako povinné pole při vytváření není úpravě stránky, viz obr. 2. Název stránky je na ukázkových obrázcích pro přehlednost zvýrazněn červeným rámečkem.

Obr. 1: Zobrazení názvu stránky v nadpisu stránky a v názvu karty prohlížeče (zdroj: Knihovna Jabok, získáno 2020-05-11)

Obr. 2: Příklad zadání názvu stránky v editačním poli formuláře pro tvorbu stránky (zdroj: Knihovna Jabok, získáno 2020-05-13)

Nadpisy jsou důležitým prvkem, který pomáhá uživatelům zorientovat se na stránce, bez ohledu na to, zda jde o uživatele s postižením nebo o tzv. běžného uživatele. Při tvorbě nadpisů je nutné dodržovat několik základních pravidel:

1. Používejte nadpisy, které vystihují, co daná stránka nebo její část obsahuje. Při tvorbě nadpisů je užitečné se zamyslet nad tím, jestli nadpisu rozumí vaši uživatelé.
2. Nadpisy nikdy nezvýrazňujte pomocí prvků pro změnu velikosti, řezu nebo barvy písma. Pro formátování nadpisů vždycky používejte předdefinované styly, které označují úroveň daného nadpisu. Styly obvykle vyberete pomocí rozbalovacího menu přímo v editoru redakčního systému (viz obr. 3).
3. Snažte se, aby na všech stránkách webu byly nadpisy používány jednotně.
4. Nadpisy uvádějte v logickém pořadí a ve srozumitelné hierarchické struktuře. Obvykle se používá níže uvedená hierarchie nadpisů (někdy mohou být úrovně nadpisů použity jinak, ale v každém případě by logicky nadřazený celek měl být označen nadpisem vyšší úrovně a logicky podřízený celek nadpisem nižší úrovně):
   • nadpis 1 pro název stránky (viz výše; na každé stránce by se měl vyskytovat pouze jednou);
   • nadpis 2 pro názvy jednotlivých sekcí;
   • nadpis 3 pro názvy článků;
   • nadpisy 4, 5 a 6 pro nadpisy nižší úrovně v rámci článků.

Pokud chcete v redakčním systému zkontrolovat úroveň nadpisu, stačí nastavit kurzor na požadovaný nadpis. V nástroji pro výběr stylu se zobrazí použitý styl (úroveň) nadpisu (viz obr. 3).

Obr. 3: Výběr úrovně nadpisu v editoru redakčního systému pomocí rozbalovacího menu; šipkami je označeno rozbalovací menu, zvolená úroveň nadpisu a nadpis, se kterým se pracuje (zdroj: Knihovna Jabok, získáno 2020-05-11)

Na obr. 4 je pomocí značek H1 až H3 ²⁾ označena hierarchická struktura na stránce s kontakty. Na skutečnou stránku se můžete podívat na adrese https://knihovna.jabok.cz/cs/kontakt.

Obr. 4: Hierarchická struktura nadpisů na stránce (zdroj: Knihovna Jabok, získáno 2020-05-13)