UX a přístupnost

Přístupnost

Přístupnost (accessibility) znamená, že web dokáže použít každý: i ten, kdo nevidí, neovládá myš nebo zrovna stojí s telefonem na slunci. Kontrast textu jsme probrali minule. Teď se podíváme, na čem přístupnost stojí a co se dá pokazit už v HTML.

Komu slouží

Omezení může být trvalé, dočasné i situační. Trvalé má člověk, který nevidí nebo nemůže hýbat rukama. Dočasné má ten, kdo má ruku v sádře. Situační má každý z nás: displej na přímém slunci, hlučná tramvaj bez sluchátek, dítě v jedné ruce a telefon ve druhé. Titulky k videu proto nepomáhají jen neslyšícím.

Lidé, kteří nevidí, používají odečítač obrazovky (screen reader). Je to program, který obsah stránky čte nahlas a ovládá se z klávesnice. Kdo nemůže používat myš, ovládá web jen klávesnicí nebo zařízením, které ji napodobuje. Obojí funguje jen tehdy, když je stránka postavená ze správných prvků.

WCAG

Pravidla přístupnosti shrnuje standard WCAG (Web Content Accessibility Guidelines), dnes ve verzi 2.2. Stojí na čtyřech principech:

• vnímatelnost – obsah jde vnímat aspoň jedním smyslem, obrázek má třeba textový popis,
• ovladatelnost – všechno jde ovládat, i bez myši,
• srozumitelnost – texty i chování jsou předvídatelné a chyba ve formuláři je vysvětlená,
• robustnost – stránka funguje i v odečítači a dalších pomůckách, protože je napsaná podle standardu.

Každé pravidlo má úroveň A, AA nebo AAA. A je naprosté minimum, AAA je tak přísná, že ji celý web obvykle nesplní. Cílem je AA, kam patří i kontrast 4,5:1 z minulé lekce.

Od 28. června 2025 platí Evropský akt o přístupnosti (European Accessibility Act). Weby úřadů musí být přístupné už několik let, teď se povinnost týká i e-shopů, bankovnictví, prodeje jízdenek a dalších služeb, výjimku mají jen nejmenší firmy. V praxi se tak přístupnost objevuje v zadáních zakázek a kontroluje se při předání webu.

Sémantika

Sémantika znamená, že každý prvek HTML říká, co je. Odečítač nevidí, že je text velký a tučný, ví jen, že je to h1. A oblast stránky nepozná podle barvy pozadí. Uživatel odečítače si nechává vypsat oblasti a nadpisy a skáče mezi nimi, podobně jako my stránku přelétneme očima.

Oblasti stránky mají vlastní prvky:

<!-- chyba, odečítač vidí jen obecné bloky -->
<div class="header">
  <div class="nav">...</div>
</div>
<div class="main">...</div>

<!-- správně, každá oblast říká, co je -->
<header>
  <nav>...</nav>
</header>
<main>...</main>
<footer>...</footer>

Nadpisy tvoří osnovu stránky a úroveň se volí podle místa v ní, ne podle velikosti. Když se nám h3 zdá velký, zmenšíme ho v CSS. Skočit z h2 rovnou na h4 je jako vynechat v obsahu knihy celou úroveň kapitol.

<h1>Poslední vlak do Ostravy</h1>
<h2>Objednávka vstupenek</h2>
<h3>Vyberte představení</h3>
<h3>Vaše údaje</h3>

Tlačítko a odkaz

<!-- chyba, myší to jde, klávesnicí ne -->
<div class="button" onclick="submitOrder()">Objednat</div>

<!-- správně -->
<button class="button" type="button" onclick="submitOrder()">Objednat</button>

Prvek button umí zadarmo spoustu věcí: dostane fokus z klávesnice, spustí se Enterem i mezerníkem a odečítač ho ohlásí jako tlačítko. div neumí nic z toho a dohánět to atributy a obsluhou kláves dá víc práce než napsat button.

Mezi tlačítkem a odkazem rozhoduje, co prvek dělá. Odkaz <a href> vede jinam, na jinou stránku nebo jiné místo stránky. Tlačítko <button> něco udělá: odešle formulář, přidá vstupenku, otevře nabídku. Odkaz bez href není odkaz a tabulátor ho přeskočí.

Text odkazu má dávat smysl i vytržený ze stránky. Uživatel odečítače si často nechá vypsat všechny odkazy a seznam pěti „klikněte zde“ mu neřekne nic:

<!-- chyba -->
Program najdete <a href="/program">zde</a>.

<!-- správně -->
<a href="/program">Program na tento týden</a>

Pro případy, kdy HTML nestačí, existují atributy ARIA. Jejich první pravidlo zní: nepoužívejte ARIA, když existuje nativní prvek. Má smysl tam, kde HTML nic vhodného nenabízí, třeba aria-current="page" u odkazu na stránku, na které právě jsme – podle něj tenhle web zvýrazňuje otevřenou kapitolu v navigaci. Tlačítku, které má místo textu jen symbol +, dá název aria-label="Přidat vstupenku".

Formuláře a jazyk

<!-- chyba, nápověda zmizí s prvním napsaným písmenem -->
<input type="email" placeholder="E-mail">

<!-- správně, popisek je s políčkem propojený -->
<label for="email">E-mail</label>
<input id="email" type="email">

Atribut for u popisku odkazuje na id políčka. Odečítač pak u políčka přečte jeho popisek a klik na popisek přesune fokus do políčka, což ocení každý, kdo se špatně trefuje do malého zaškrtávacího políčka.

Jazyk stránky patří do atributu lang na prvku html. Bez něj čte odečítač český text výslovností podle nastavení systému, často anglickou:

<html lang="cs">

Alt texty

Atribut alt je textová náhrada obrázku. Odečítač ho přečte místo obrázku a prohlížeč ho ukáže, když se obrázek nenačte. Píše se do něj, co obrázek sděluje, ne že je to obrázek:

<!-- chyba, že jde o obrázek, ohlásí odečítač sám -->
<img src="poster.svg" alt="obrázek">

<!-- správně, obsah obrázku -->
<img src="poster.svg" alt="Plakát filmu: lokomotiva projíždí v noci krajinou pod úplňkem.">

Obrázek, který je jen ozdoba, dostane prázdný alt="" a odečítač ho přeskočí. Prázdný není totéž co chybějící: bez atributu přečte odečítač místo popisu název souboru.

Když je obrázek jediným obsahem odkazu, popisuje alt cíl odkazu, ne vzhled obrázku:

<a href="/"><img src="logo.svg" alt="Kino Sever – úvodní stránka"></a>

Alt není titulek. Titulek pod obrázkem v figcaption vidí všichni a obrázek doplňuje, alt ho nahrazuje pro toho, kdo ho nevidí. Atribut title zase ukáže bublinu po najetí myší, kterou na dotykovém displeji nikdo neuvidí, a odečítače ho nečtou spolehlivě. Popis obrázku proto patří vždy do alt.