Představte si, že čtete kuchařku, ale recepty v ní jsou napsané jako jeden dlouhý blok textu. Žádné odrážky, žádné nadpisy, žádné oddělené části. Dokážete v takovém guláši najít seznam surovin nebo pochopit postup? Nebo zjistit, jak dlouho péct dort? Asi ne, že?
Podobné je to na webu, pokud informace a jejich vztahy nejsou jasně označené. Stránka pak působí zmateně a těžko se v ní orientuje. Hlavně když používáte čtečku obrazovky. Kritérium „Informace a vzájemné vztahy“ právě toto řeší. Požaduje, aby na webu každá informace měla jasnou strukturu a všechny vztahy mezi prvky byly jednoznačné.
Představte si klasický formulář na webu. Vidoucí uživatelé si díky hvězdičce u políček hned všimnou, která jsou povinná. Lidé se čtečkou obrazovky ale potřebují, aby jim web tuto informaci správně předal – čtečka sama nerozpozná, že hvězdička znamená povinné pole, pokud jí to neřekneme v kódu.
Když něco označíme jen vizuálně, spousta lidí tu informaci vůbec nezíská. Správné řešení je označit strukturu stránky a vztahy mezi prvky také v kódu. Typicky pomocí HTML prvků nebo ARIA atributů, ne jen vzhledem. Tak zajistíme, že obsah webu dává smysl všem, nejen těm, kdo ho „vidí“.
Komu tím pomůžeme
- Osoby se zrakovým postižením: Pokud jsou struktura a vztahy na webu správně označeny, čtečka obsah interpretuje správně a uživatelé se mohou snadno na stránce pohybovat a rozumí obsahu.
- Osoby s kognitivními postiženími: Jednoznačná struktura a vztahy pomáhají lépe porozumět informacím na webu.
- Všichni uživatelé: Jednoznačná a logicky uspořádaná struktura stránky pomáhá v orientaci a snižuje čas potřebný k nalezení informací.
- Hlasoví asistenti (Alexa, Siri apod.): Mohou poskytovat přesnější informace a umožní správně ovládat webovou aplikaci hlasem.
Detailní popis
Kritérium požaduje, aby informace, struktura a vztahy na webu byly vyjádřeny správnými HTML prvky tak, aby i asistivní technologie dokázaly správně pochopit hierarchii a vztahy na stránce. Správné použití nadpisů, seznamů, tabulkových záhlaví nebo prvků formulářů zajistí, že se v obsahu mohou dobře orientovat i uživatelé používající čtečky obrazovky.
Příklady
Nadpisy
Špatný příklad: Například na stránce je text „Detailní popis“ vizuálně větší a tučnější, aby vypadal jako hlavní nadpis. V kódu je ale tento text vložen do elementu <div> nebo <span>. Uživatelé čteček obrazovky tak nepoznají, že se jedná o nadpis, a nemohou mezi nadpisy snadno přeskakovat.
Správné řešení: Použijte HTML značku pro nadpis, podle konkrétní úrovně zanoření: <h1>, <h2>,…
Seznamy
Špatný příklad: Na stránce jsou výhody produktu vypsané jako:
– snadná obsluha
– nízká cena
– dlouhá životnost
Jednotlivé body jsou napsané pouze jako pomlčky v prostém textu. Čtečka obrazovky pak nepřečte seznam, neví počet položek seznamu. Text čte jako souvislý text.
Správné řešení: Použijte značky pro seznam <ul> a <li>
<ul>
<li>snadná obsluha</li>
<li>nízká cena</li>
<li>dlouhá životnost</li>
</ul>Tabulky
Špatný příklad: Na stránce je uveden přehled velikostí oblečení. Informace jsou vloženy jako několik řádků v <div> prvcích, které jsou naformátované pomocí stylů CSS, aby vypadaly jako tabulka. Čtečka obrazovky pak nedokáže rozpoznat strukturu tabulky. Uživatel se nedozví, ke které velikosti nebo údaji se konkrétní číslo vztahuje. Pohyb po velikostech a porozumění údajům je tak pro uživatele s asistivní technologií velmi obtížné.
Správné řešení: Použijte HTML značky pro tabulky: <table>, <tr>, <th>, <td>.
Použití tagu <th> pro záhlaví tabulky zajistí, že čtečka obrazovky umí správně říct, k jakému záhlaví daná buňka patří.
<table>
<caption>Jak označit struktury v HTML kódu</caption>
<tbody>
<tr>
<th>Prvek webu</th>
<th>HTML prvek</th>
</tr>
<tr>
<td>Nadpis</td>
<td><h1>, <h2>,... </td>
</tr>
<tr>
<td>Seznam</td>
<td><ul>/<ol> a <li></td>
</tr>
<tr>
<td>Tabulka</td>
<td><table>, <tr>, <th>, <td></td>
</tr>
</tbody>
</table>Formulářové prvky
Špatný příklad: Pole pro zadání e-mailu má vedle sebe napsáno „Email: *“. Popisek není v kódu svázán z políčkem formuláře. Uživatel čtečky se v tu chvíli může ztratit. Neví totiž, jaký údaj má do pole zadat, protože políčko nemá jasně přiřazený popisek.
Popisek „E-mail: *“ je označen *, aby bylo jasné, že je pole povinné. Pro čtečku obrazovky to ale jasné není.
Správné řešení: Propojte text „Email:“ s políčkem formuláře pomocí značky <label for="...">.
Povinná pole v kódu označte aria-required="true".
Pro důležité typy polí používejte atribut autocomplete. Díky němu může prohlížeč uživateli automaticky doplnit údaje, které už dříve zadal. Výsledkem je rychlejší a pohodlnější vyplňování. Není třeba znovu a znovu psát ty stejné informace. Tahle maličkost přitom pomáhá všem, nejen lidem s asistivními technologiemi. Více o HTML attribute autocomplete (W3Schools).
<label for="email">E-mail: *</label>
<input id="email" type="text" aria-required="true" autocomplete="email">Navigace
Špatný příklad: Hlavní menu je na stránce vytvořeno hezky vizuálně, ale v kódu chybí označení pro navigaci. Čtečka obrazovky neví, že se jedná o navigační oblast stránky a uživatelé ji nemohou jednoduše najít nebo přeskočit.
Správné řešení: Použijte buď značku <nav> nebo <div role="navigation">.
<nav aria-label="Primární">Oblasti stránky
Špatný příklad: Na stránce chybí sémantické HTML prvky, které označují oblasti stránky.
Správné řešení: Nahraďte obecné značky <div> sémantickými tagy:
<div id="header">nahraďte<header><div id="main">nahraďte<main><div id="sidebar">nahraďte<aside><div id="footer">nahraďte<footer>
Pokud nemůžete změnit HTML prvky, přidejte prvku odpovídající atribut role="...":
<div id="header">doplňte<div id="header" role="banner"><div id="main">doplňte<div id="main" role="main"><div id="sidebar">doplňte<div id="sidebar" role="complementary"><div id="footer">doplňte<div id="footer" role="contentinfo">
Pro detailnější informace doporučuji článek Martina Michálka: Jak definovat strukturu v HTML a proč jsem začal mít rád HTML5 tagy. Je sice staršího data, ale stále aktuální.