14. Struktura webu

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 i 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ý, pracují s ním však 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.

Správná struktura webové stránky a informací, které stránka obsahuje, má nezanedbatelný vliv na optimalizaci webu pro webové vyhledávače.

Funkční oblasti webové stránky

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 aj.

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.

Vymezení funkčních oblastí ve zdrojovém kódu

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 strukturálními značkami poskytujícími informace o oblasti stránky, např.:

<header> pro záhlaví,

<nav> pro navigaci,

<main> pro hlavní obsah apod.).

Definice oblastí stránky jsou součástí jazyka HTML a používají se optimálně v kombinaci s nástrojem WAI-ARIA1) Co je to WAI-ARIA a k čemu slouží viz např. https://poslepu.cz/wai-aria-1-0-byla-vydana-jako-doporuceni-w3c/ , 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 strukturální značky jednotlivých bloků či oblastí stránky, nadpisů, seznamů, tabulek apod.

Z hlediska přístupnosti webu je velmi důležité, aby stránky měly: správně definovány jednotlivé funkční oblasti, správnou strukturu, zejména strukturu nadpisů, validní zdrojový kód bez sémantických chyb.
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

Název stránky a nadpisy

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é.

Název stránky

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
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
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)

Proč je důležité uvádět název stránky Název se zobrazí v prohlížeči v záhlaví okna, případně panelu. Nevidomému uživateli přečte odečítač obrazovky název stránky. Název stránky je důležitý pro webové vyhledávače a může příznivě ovlivnit výsledky vyhledávání.

Nadpisy

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:

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é.

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).

Snažte se, aby na všech stránkách webu byl jednotný způsob používání nadpisů.

Nadpisy uvádějte v logickém pořadí a ve srozumitelné hierarchické struktuře. Obvykle se používá níže uvedena 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 atd. 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
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)

Existuje také řada speciálních nástrojů na kontrolu struktury nadpisů na stránce, např. doplněk prohlížeče HeadingsMap, validátor přístupnosti WAVE a jiné.
Na obr. 4 je pomocí značek H1 až H3 2) H1, H2, H3 atd. je značka používaná v HTML kódu pro sémantické označení prvku „heading“ neboli „nadpis“. 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
Obr. 4: Hierarchická struktura nadpisů na stránce (zdroj: Knihovna Jabok, získáno 2020-05-13)

Proč je důležité vkládat nadpisy ve správné struktuře pomocí stylů Používaní správné struktury pomocí nadpisů nejen ušetří práci (není nutné starat se o formátování), ale především pomůže uživatelům správně se zorientovat v informacích na stránce. Obzvláště důležité je to pro nevidomé návštěvníky webu, pro které jsou nadpisy způsobem, jak se efektivně dostat právě k těm informacím, které potřebují, aniž by jim hlasový odečítač obrazovky musel předčítat obsah celé stránky (odečítač umožňuje procházení nadpisů na stránce s možností volby úrovně nadpisu). Nadpisy jsou důležité také pro stroje. Správná struktura nadpisů je např. jedním z nástrojů optimalizace pro vyhledávače (tzv. SEO) a může výrazně zvýšit umístění stránky ve výsledcích vyhledávání.