Časté chyby přístupnosti, kterým se vyhnout

Proč se stále objevují stejné problémy přístupnosti

Většina překážek přístupnosti není nijak exotická. Rok co rok automatické i manuální audity odhalují stejný krátký seznam chyb: chybějící alternativní text, nízký kontrast, neoznačená formulářová pole, klávesnicové pasti a narušenou strukturu. Opakují se, protože vznikají potichu — vývojář nasadí novou komponentu, marketér nahraje obrázek, designér vybere značkovou barvu — a nic v běžném pracovním postupu na problém neupozorní. Vizuální výsledek vypadá pro někoho s myší a bystrýma očima v pořádku, takže překážka jde do produkce.

Tento katalog prochází nejčastější selhání WCAG 2.2, která vidíme ve skutečných auditech. U každého najdete, proč na něm záleží, koho se týká, příslušné kritérium úspěšnosti a konkrétní opravu před/po. Společně tyto problémy tvoří drtivou většinu překážek, které blokují uživatele se zdravotním postižením — a drtivou většinu právních stížností podaných podle Evropského aktu o přístupnosti, ADA a Section 508.

Než se pustíme do seznamu, je třeba ujasnit jednu věc: automatické nástroje nemohou najít všechny tyto problémy. Nezávislý výzkum soustavně ukazuje, že i ty nejlepší skenery spolehlivě detekují pouze 30–40 % problémů WCAG. Jsou vynikající v zachycení chybějících alternativních atributů, programových selhání kontrastu a chybějících popisků formulářů, ale nedokážou posoudit, zda je alternativní text přesný, zda je pořadí fokusu logické nebo zda vlastní widget skutečně funguje s čtečkou obrazovky. Proto každý důvěryhodný program kombinuje skenování s manuální kontrolou. Náš software pro skenování přístupnosti zvládá automatizovatelnou vrstvu; manuální audity a audity prováděné lidmi se zdravotním postižením pokrývají zbytek.

Rychlý způsob, jak najít svůj vlastní výchozí bod, než budete číst dál: prohlédněte si stránku s vypnutými obrázky, přečtěte si každé slovo jako jeden nestrukturovaný odstavec a zkuste dokončit každý úkol pouze pomocí klávesnice. Kdekoli se zážitek zhroutí, našli jste překážku.

Vnímatelné: obsah, který lidé nevidí nebo nepřečtou

Chybějící nebo nepřesný alternativní text obrázků

Koho se týká: lidé, kteří jsou nevidomí nebo slabozrací a používají čtečky obrazovky; kdokoli s pomalým připojením, kde se obrázky nenačtou.

Kritérium WCAG: 1.1.1 Netextový obsah (úroveň A).

Obrázky bez atributu alt jsou pro asistivní technologie neviditelné — uživatel nemusí ani vědět, že obrázek existuje. Horší než chybějící atribut je nepřesný: názvy souborů jako IMG_4821.jpg, obecná slova jako „obrázek“ nebo řetězce nacpané klíčovými slovy posluchače aktivně matou.

Pravidlo je jednoduché, ale závislé na situaci. Informativní obrázky potřebují stručný popis svého významu, nikoli vzhledu. Dekorativní obrázky, které nic nepřidávají, by měly mít prázdné alt="", aby je čtečky obrazovky přeskočily. Funkční obrázky — ikona fungující jako tlačítko — musí popisovat akci, ne obrázek. Složité vizuály jako grafy potřebují krátký alternativní text plus delší textový ekvivalent poblíž.

<!-- Before: useless, misleading -->
<img src="chart-final-v2.png">

<!-- After: meaningful for an informative image -->
<img src="chart-final-v2.png"
     alt="Revenue grew 24% between Q1 and Q4 2025">

<!-- After: decorative image, correctly hidden -->
<img src="divider-flourish.svg" alt="">

Automatické nástroje zachytí nepřítomnost alternativního textu okamžitě. Nemohou vám říci, zda je text správný — to vyžaduje člověka, který čte stránku v kontextu.

Nedostatečný barevný kontrast

Koho se týká: lidé se slabozrakostí, barvoslepostí nebo věkem podmíněnou ztrátou zraku; každý, kdo používá obrazovku na jasném slunci.

Kritérium WCAG: 1.4.3 Kontrast (minimum), úroveň AA; plus 1.4.11 Netextový kontrast pro komponenty uživatelského rozhraní.

WCAG 2.2 vyžaduje kontrastní poměr nejméně 4.5:1 pro běžný text a 3:1 pro velký text (přibližně 18pt nebo 14pt tučně). Komponenty rozhraní a smysluplná grafika — okraje vstupů, indikátory fokusu, ikony vyjadřující stav — musí dosáhnout 3:1 vůči svému okolí. Selhání kontrastu patří mezi nejčastější problémy nalezené v každém rozsáhlém auditu a téměř vždy vznikají ve fázi návrhu.

/* Before: light gray on white = 2.8:1, fails AA */
.helper-text { color: #9a9a9a; background: #ffffff; }

/* After: 4.6:1, passes AA */
.helper-text { color: #717171; background: #ffffff; }

Otestujte celou paletu, nejen základní text: zástupný text, deaktivované stavy, které je přesto třeba přečíst, chybové zprávy a text umístěný přes fotografie jsou častými hříšníky. Nikdy se nespoléhejte pouze na barvu při sdělování významu (1.4.1) — červený okraj neplatného pole musí být doplněn textem nebo ikonou.

Automaticky přehrávaná média a pohyb

Koho se týká: lidé s vestibulárními poruchami, poruchami pozornosti nebo kognitivními postiženími, uživatelé čteček obrazovky, jejichž zvukový výstup je přehlušen, a kdokoli v tichém sdíleném prostoru.

Kritéria WCAG: 1.4.2 Ovládání zvuku (úroveň A), 2.2.2 Pozastavit, zastavit, skrýt (úroveň A), 2.3.1 Tři záblesky (úroveň A) a 2.3.3 Animace z interakcí (úroveň AAA).

Zvuk nebo video, které se automaticky přehrává déle než tři sekundy, musí nabízet zřejmý způsob pozastavení nebo ztlumení. Pohybující se, blikající nebo automaticky aktualizovaný obsah, který trvá déle než pět sekund — karusely, animované bannery, běžící texty — potřebuje přístupné tlačítko pro pozastavení. Obsahu, který bliká více než třikrát za sekundu, je třeba se zcela vyhnout, protože může vyvolat záchvaty. Respektujte nastavení prefers-reduced-motion uživatele a omezte nepodstatné animace.

/* After: honour the user's OS-level motion preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

Ovladatelné: věci, které lidé nemohou používat

Nepřístupnost klávesnicí a klávesnicové pasti

Koho se týká: lidé s motorickým postižením, kteří nemohou používat myš, uživatelé čteček obrazovky (kteří navigují klávesnicí) a lidé používající přepínací zařízení nebo hlasové ovládání.

Kritéria WCAG: 2.1.1 Klávesnice (úroveň A) a 2.1.2 Žádná klávesnicová past (úroveň A).

Každá interakce — odkazy, tlačítka, formulářová pole, nabídky, modální okna, výběry data, přetahování — musí být plně ovladatelná pouze klávesnicí. Nejškodlivější variantou je klávesnicová past: fokus vstoupí do komponenty (často modálního okna nebo vloženého widgetu) a nemůže ven, čímž uvízne uživatel na stránce. Obvyklými viníky jsou vlastní widgety, protože nativní prvky jako <button> a <a> jsou ve výchozím nastavení ovladatelné klávesnicí, zatímco napodobeniny založené na <div> nikoli.

<!-- Before: not focusable, not operable by keyboard -->
<div class="btn" onclick="submit()">Submit</div>

<!-- After: native element, free keyboard support -->
<button type="submit">Submit</button>

Projděte své klíčové cesty pouze pomocí Tab, Shift+Tab, šipek, Enter, mezerníku a Escape. Ověřte, že se fokus může vždy pohybovat vpřed i zpět ven z každé komponenty, že Escape zavírá překryvy a že nic nevyžaduje ukazatel. Naše služba hodnocení čtečkou obrazovky testuje přesně tyto toky tak, jak je zažívají skuteční uživatelé asistivních technologií.

Chybějící nebo neviditelné indikátory fokusu a nelogické pořadí fokusu

Koho se týká: vidící uživatelé klávesnice, slabozrací uživatelé a kdokoli, kdo ztratil přehled o tom, kde se na stránce nachází.

Kritéria WCAG: 2.4.7 Viditelný fokus (úroveň A) a 2.4.3 Pořadí fokusu (úroveň A); 2.4.11 Fokus není zakryt (úroveň AA) ve WCAG 2.2.

Častou „úhlednou“ chybou je odstranění výchozího prstence fokusu prohlížeče pomocí outline: none a jeho nahrazení nikdy. Uživatelé klávesnice pak nemají tušení, který prvek je aktivní. Stejně škodlivé je pořadí fokusu, které nesleduje vizuální a logické pořadí čtení — typicky způsobené kladnými hodnotami tabindex nebo pořadím DOM, které se liší od vykresleného rozvržení.

/* Before: focus ring deleted, keyboard users lost */
:focus { outline: none; }

/* After: a clear, high-contrast indicator */
:focus-visible {
  outline: 3px solid #0b5cff;
  outline-offset: 2px;
}

WCAG 2.2 přidává 2.4.11: když prvek získá fokus, nesmí být zcela skryt za lepivými hlavičkami, cookie bannery nebo chatovacími widgety. Otevřete modální okno, projděte jím tabulátorem a ověřte, že zaměřený prvek není nikdy zakryt.

Nepopisné odkazy a tlačítka

Koho se týká: uživatelé čteček obrazovky, kteří si vyvolají seznam všech odkazů k procházení stránky, a lidé s kognitivním postižením.

Kritéria WCAG: 2.4.4 Účel odkazu (v kontextu), úroveň A; 2.5.3 Popisek v názvu, úroveň A.

Uživatelé čteček obrazovky často navigují přeskakováním mezi odkazy mimo kontext. Stránka plná odkazů „klikněte zde“, „číst více“ a „zjistit více“ se stává nesmyslnou, když je čtena jako seznam. Text odkazu by měl sám o sobě popisovat svůj cíl. Totéž platí pro tlačítka pouze s ikonou, která potřebují přístupný název.

<!-- Before: ambiguous out of context -->
<a href="/resources/wcag">Read more</a>

<!-- After: self-describing -->
<a href="/resources/wcag">Read our WCAG 2.2 compliance guide</a>

<!-- Icon button with an accessible name -->
<button aria-label="Close dialog">
  <svg aria-hidden="true">…</svg>
</button>

Přetížená navigace a žádný způsob, jak ji přeskočit

Koho se týká: uživatelé čteček obrazovky, uživatelé klávesnice a lidé s kognitivním postižením.

Kritérium WCAG: 2.4.1 Přeskočení bloků (úroveň A).

Mega nabídka s desítkami odkazů nutí uživatele čteček obrazovky a klávesnice prodírat se celým seznamem na každé stránce, než se dostanou k obsahu. Odkaz „Přejít na hlavní obsah“ jako první zaměřitelný prvek jim umožní přeskočit rovnou opakované bloky. Seskupte související položky, udržujte nabídky štíhlé a zajistěte, aby se odkaz pro přeskočení při zaměření zviditelnil.

<!-- After: first focusable element on the page -->
<a class="skip-link" href="#main">Skip to main content</a>
…
<main id="main">…</main>

Srozumitelné: obsah, který mate

Neoznačená nebo nesprávně přiřazená formulářová pole

Koho se týká: uživatelé čteček obrazovky, lidé s kognitivním postižením a uživatelé hlasového ovládání, kteří oslovují pole názvem.

Kritéria WCAG: 1.3.1 Informace a vztahy, 3.3.2 Popisky nebo pokyny a 4.1.2 Název, role, hodnota (vše úroveň A).

Vstupy bez programově přiřazeného <label> jsou oznamovány jako „upravit text, prázdné“ — uživatel nemá tušení, co napsat. Zástupný text není náhradou: při zadávání mizí a obvykle selhává v kontrastu. Povinná pole, pravidla formátování a chyby ověření musí být také vyjádřeny textem, nejen barvou nebo polohou.

<!-- Before: placeholder masquerading as a label -->
<input type="email" placeholder="Email">

<!-- After: explicit, associated label + described error -->
<label for="email">Email address</label>
<input type="email" id="email"
       aria-describedby="email-err" aria-invalid="true">
<p id="email-err">Enter a valid email, e.g. name@example.com</p>

Svažte chybové zprávy s jejich polem pomocí aria-describedby, označte neplatná pole pomocí aria-invalid a zajistěte, aby odeslání neúplného formuláře přesunulo fokus na první chybu.

Chybějící jazyk stránky

Koho se týká: uživatele čteček obrazovky — nesprávný jazyk způsobí, že syntetizátor vše špatně vyslovuje.

Kritéria WCAG: 3.1.1 Jazyk stránky (úroveň A) a 3.1.2 Jazyk částí (úroveň AA).

Jediný chybějící atribut naruší výslovnost celé stránky. Deklarujte primární jazyk na kořenovém prvku a označte vložené pasáže v jiném jazyce vlastním lang.

<!-- Before -->
<html>

<!-- After -->
<html lang="en">
  …
  <blockquote lang="fr">Le client a raison.</blockquote>

Nesprávná hierarchie nadpisů a chybějící orientační body

Koho se týká: uživatele čteček obrazovky, kteří navigují podle nadpisů a oblastí, a kohokoli, kdo se spoléhá na strukturu dokumentu.

Kritérium WCAG: 1.3.1 Informace a vztahy (úroveň A).

Nadpisy tvoří osnovu stránky. Uživatelé čteček obrazovky skáčou od nadpisu k nadpisu, aby rychle našli obsah; když jsou úrovně přeskakovány, používány čistě pro velikost písma nebo chybí, tato navigace se zhroutí. Každá stránka by měla mít jeden <h1> a logickou, nepřerušenou posloupnost <h2>, <h3> a tak dále. Stejně důležité jsou orientační oblasti — <header>, <nav>, <main>, <footer> — které uživatelům umožňují přeskakovat mezi hlavními oblastmi. Stránka postavená výhradně z prvků <div> žádnou takovou mapu nenabízí.

<!-- After: semantic landmarks + ordered headings -->
<header>…</header>
<nav aria-label="Primary">…</nav>
<main>
  <h1>Common accessibility issues</h1>
  <h2>Perceivable</h2>
    <h3>Missing alt text</h3>
</main>
<footer>…</footer>

Robustní: kód, který asistivní technologie nedokáže interpretovat

Nepřístupné vlastní widgety a zneužití ARIA

Koho se týká: především uživatele čteček obrazovky a jakoukoli asistivní technologii, která se spoléhá na správný strom přístupnosti.

Kritérium WCAG: 4.1.2 Název, role, hodnota (úroveň A).

Vlastní rozevírací seznamy, karty, akordeony, kombinovaná pole, modální okna a popisky vytvořené z <div> a <span> nemají žádnou vlastní roli, stav ani chování klávesnice. Vývojáři sahají po ARIA, aby to záplatovali, ale ARIA pouze popisuje — nepřidává žádné chování a nesprávná ARIA je horší než žádná. Prvním pravidlem ARIA je upřednostnit nativní prvek HTML, kdykoli nějaký existuje. Když musíte vytvořit vlastní widget, implementujte úplnou interakci klávesnicí, kterou specifikují autorské vzory ARIA, a udržujte aria-expanded, aria-selected a podobné stavy synchronizované s realitou.

<!-- Before: a div pretending to be a control, no role or state -->
<div class="dropdown" onclick="toggle()">Choose plan ▾</div>

<!-- After: correct role, name, and state -->
<button aria-expanded="false" aria-controls="plan-list">
  Choose plan
</button>
<ul id="plan-list" role="listbox" hidden>…</ul>

To jsou přesně ty problémy, které automatické skenery nejčastěji přehlédnou. Skener vidí atribut aria-expanded a schválí jej; pouze člověk (nebo tester používající čtečku obrazovky) může potvrdit, že se hodnota při otevření nabídky skutečně přepne. Podívejte se do našeho průvodce testováním čtečkou obrazovky, jak ověřit chování widgetu od začátku do konce.

Je lákavé nainstalovat jednořádkový „widget přístupnosti“ nebo překryv, který slibuje okamžitou shodu. Tyto nástroje výše uvedené problémy neřeší — alternativní text ve zdroji stále chybí, kontrast stále selhává, vlastní widget je stále rozbitý. Překryvy nemohou napravit kód, který způsobuje překážky, často narušují vlastní asistivní technologii uživatelů a figurovaly v rostoucím počtu soudních sporů o přístupnost. Skutečná digitální přístupnost pochází z opravy základního HTML, CSS a chování, nikoli z jeho maskování.

Zabraňte návratu těchto problémů

Opravit seznam chyb jednou je nutné, ale nestačí to; stejné problémy se znovu objeví s dalším vydáním, pokud nezměníte způsob, jakým věci nasazujete. Trvalou opravou je zabudovat přístupnost do pracovního postupu:

Zachyťte automatizovatelných 30–40 % včas zapojením skenů do vašeho kanálu. Integrace přístupnosti do CI/CD nechá build selhat, když vznikne regrese, dříve než se dostane do produkce.
Zbytek pokryjte lidmi. Naplánujte manuální audity přístupnosti a audity lidmi se zdravotním postižením, které odhalí překážky, jež žádný nástroj nedokáže detekovat.
Dejte týmům správné nástroje. Sada nástrojů přístupnosti QualiBooth a Agora pomáhají designérům a vývojářům testovat za chodu.
Udělejte z toho proces, ne projekt. Průběžné konzultace přístupnosti a zlepšování procesu přístupnosti zakořeňují návyky tak, aby kvalita vydržela v čase.

Pro postupný plán nápravy začněte naším průvodcem, jak učinit váš web v souladu s WCAG.

Kde začít ještě dnes

Když více než 1,3 miliardy lidí na celém světě žije s nějakou formou postižení, obchodní důvody pro přístupnost jsou jasné — a od června 2025 platí také právní důvody podle Evropského aktu o přístupnosti. Problémy v tomto katalogu jsou ty, které se zkoumají jako první v jakékoli stížnosti nebo auditu.

Nejrychlejší způsob, jak zjistit, kde stojíte, je spustit bezplatné skenování URL — bez nastavování, bez závazků. Až budete připraveni jít za hranice toho, čeho automatizace dosáhne, vyžádejte si ukázku a my vám ukážeme, jak kombinovaný automatický plus manuální program uzavře zbývající mezeru.