Přístupnost webu (a11y) pro vývojáře: co opravit jako první

Přístupný web je použitelný pro lidi se zrakovým, motorickým nebo kognitivním omezením – ale i pro někoho s rozbitou myší, na slunci s telefonem nebo s dočasně zlomenou rukou. Navíc zákonné požadavky rostou: evropský Akt o přístupnosti (European Accessibility Act) se od června 2025 vztahuje i na řadu soukromých služeb, například e-shopy. Dobrá zpráva: většinu problémů vyřeší správné HTML.

Referenčním standardem jsou pravidla WCAG 2.2, úroveň AA je obvyklý cíl.

1. Sémantické HTML místo divů

<!-- ❌ -->
<div class="btn" onclick="save()">Uložit</div>

<!-- ✅ -->
<button type="button" onclick="save()">Uložit</button>

<button> je zaměřitelný tabulátorem, aktivuje se Enterem i mezerníkem a čtečka ho ohlásí jako tlačítko. Div nic z toho neumí a dohnat to přes tabindex, role a obsluhu kláves je zbytečná práce.

Pravidlo: odkaz vede jinam (<a href>), tlačítko něco dělá (<button>).

Strukturu stránky tvořte orientačními prvky:

<header>…</header>
<nav aria-label="Hlavní menu">…</nav>
<main>…</main>
<footer>…</footer>

Uživatelé čteček mezi nimi přeskakují klávesovými zkratkami. Stejně tak navigují podle nadpisů – držte logickou hierarchii h1 → h2 → h3 bez přeskakování úrovní a nevolte úroveň nadpisu podle velikosti písma.

2. Ovládání klávesnicí

Odpojte myš a projděte web klávesou Tab. Kontrolujte:

• Dostanu se ke všem odkazům, tlačítkům a polím?
• Je pořadí logické (shodné s vizuálním)?
• Vidím, kde je fokus?
• Dostanu se z modálního okna ven (Escape) a nezůstanu za ním „uvězněný” na stránce v pozadí?

Nejčastější chyba je outline: none bez náhrady. Místo toho:

:focus-visible {
  outline: 3px solid #1a73e8;
  outline-offset: 2px;
}

:focus-visible zobrazí obrys při ovládání klávesnicí, ale ne po kliknutí myší – takže designér i uživatelé jsou spokojení.

Na začátek stránky přidejte odkaz pro přeskočení navigace:

<a class="skip-link" href="#obsah">Přejít na obsah</a>
…
<main id="obsah">

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 1rem; top: 1rem; }

Pro modální okna použijte nativní <dialog> a otevírejte ho přes showModal(). Prohlížeč pak sám zařídí uzamčení fokusu uvnitř, zavírání Escapem i neaktivní pozadí.

3. Obrázky a alternativní text

<img src="graf-trzby.png" alt="Tržby rostly z 1,2 mil. Kč v lednu na 2 mil. Kč v červnu">
<img src="dekorace.svg" alt="">

• Informativní obrázek: alt popisuje sdělení, ne vzhled. Nezačínejte „Obrázek…”.
• Dekorativní obrázek: prázdné alt="" – čtečka ho přeskočí. Chybějící alt je chyba, čtečka pak může přečíst název souboru.
• Ikonové tlačítko potřebuje textový název:

<button aria-label="Zavřít">
  <svg aria-hidden="true">…</svg>
</button>

4. Kontrast a barvy

WCAG AA vyžaduje kontrast textu vůči pozadí aspoň 4,5 : 1 (velký text 3 : 1) a u ovládacích prvků a důležité grafiky 3 : 1. Světle šedý text na bílé je nejčastější prohřešek.

Barva také nesmí být jediným nositelem informace. Chybové pole jen s červeným rámečkem nestačí – přidejte text chyby nebo ikonu.

5. Formuláře

• Každé pole má <label> (ne jen placeholder).
• Chyby jsou textem u pole a propojené přes aria-describedby, pole má aria-invalid="true".
• Skupiny přepínačů zabalte do <fieldset> s <legend>.
• Používejte autocomplete – pomáhá lidem s motorickým i kognitivním omezením.

6. ARIA: až když HTML nestačí

První pravidlo ARIA zní: pokud existuje nativní prvek, použijte ho. Špatně použitá ARIA škodí víc než žádná. Užitečné případy:

<!-- rozbalovací menu -->
<button aria-expanded="false" aria-controls="menu">Menu</button>
<ul id="menu" hidden>…</ul>

<!-- oznámení změny bez přesunu fokusu -->
<div role="status">Položka byla přidána do košíku.</div>

<!-- aktuální stránka v navigaci -->
<a href="/blog" aria-current="page">Blog</a>

Atribut aria-expanded musíte při otevření a zavření aktualizovat JavaScriptem. Oblast role="status" musí v DOM existovat předem; čtečka ohlásí změnu jejího obsahu.

7. Pohyb a animace

Někomu animace způsobují nevolnost. Respektujte systémové nastavení:

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

8. Jazyk stránky a zoom

<html lang="cs"> – bez něj čtečka čte český text anglickou výslovností. A nikdy neblokujte zoom v meta viewport (user-scalable=no). Stránka musí být použitelná při zvětšení na 200 %.

Jak testovat

Nástroj	Co odhalí
Lighthouse (DevTools)	základní automatický audit
axe DevTools (rozšíření)	podrobnější automatické kontroly
Panel Accessibility v DevTools	přístupné jméno a role prvku
Klávesnice	fokus, pořadí, pasti
NVDA (Windows), VoiceOver (macOS/iOS), TalkBack (Android)	skutečný zážitek uživatele čtečky

Automatické nástroje najdou jen část problémů. Pět minut s klávesnicí a čtečkou obrazovky odhalí věci, které žádný audit nezachytí.

Kontrolní seznam na první den

• [ ] lang="cs" a smysluplný <title>
• [ ] tlačítka jsou <button>, odkazy <a href>
• [ ] viditelný fokus, žádné outline: none bez náhrady
• [ ] všechny obrázky mají alt (případně prázdný)
• [ ] pole formulářů mají <label>
• [ ] kontrast textu aspoň 4,5 : 1
• [ ] celý web ovladatelný klávesnicí
• [ ] respektované prefers-reduced-motion