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 může být na webu, pokud informace a vztahy mezi nimi 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 vztahy“ právě toto řeší. Zajišťuje, že na webu má každá informace jasnou strukturu a všechny vztahy mezi prvky jsou 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 se zajistí, že obsah webu dává smysl všem, nejen těm, kdo ho „vidí“.
Komu tím pomůžete
- Osoby se zrakovým postižením: Používají čtečky obrazovky, které nahlas předčítají obsah webu. 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 jim 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í.
- Elektroničtí 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 prezentované tak, aby je mohly správně interpretovat i asistivní technologie jako jsou čtečky obrazovky. To zahrnuje například použití správných HTML tagů pro nadpisy, seznamy, tabulky a formuláře. Umožňuje to lidem s různými druhy postižení lépe se orientovat na stránce. Třeba použití tagu <th> pro záhlaví tabulky umožňuje čtečce obrazovky, aby uživatelům poskytla informaci o vztahu mezi konkrétní buňkou a záhlavím.
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>.
<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">