Čtečky obrazovky — design pro nevidomé uživatele

Jak vytvořit web, který funguje s NVDA, JAWS a VoiceOver. Praktický průvodce testováním a sémantickým HTML.

14 min čtení Střední úroveň Březen 2026

Mikrofonová sluchátka připojená k mobilnímu telefonu, symbolizující čtečky obrazovky a hlasový přístup

Co jsou čtečky obrazovky a proč jsou důležité?

Čtečka obrazovky je software, který převádí obsah na obrazovce na zvuk nebo braillský zápis. Není to jen funkce pro přístupnost — je to essential nástroj pro miliony lidí po celém světě. V Česku se odhaduje, že přibližně 80 000 lidí žije se zrakovým postižením a mnozí z nich využívají čtečky obrazovky každý den.

Když navrhujete web bez ohledu na čtečky obrazovky, znemožňujete této skupině přístup. Nejde jen o etiku — jde o zákon. Česká republika má Zákon o přístupnosti webových stránek a mobilních aplikací , který vyžaduje, aby všechny veřejné a státní weby splňovaly standard WCAG 2.1 úrovně AA.

Žena s bílou holí u počítače, používající čtečku obrazovky k procházení webové stránky

Tři nejčastěji používané čtečky obrazovky

Vaši uživatelé nejspíš používají jednu z těchto aplikací. Pojďme se podívat, jak fungují a co od webu očekávají.

NVDA (NonVisual Desktop Access)

Zdarma a open-source. Funguje na Windows a Linux. Je to nejpopulárnější volba v Česku a zbytku Evropy, zejména proto, že je zcela bezplatná.

Zdarma — bez licencí nebo předplatného
Česky přeložená
Funguje s Firefoxem, Chrome, Edge
Aktivní komunita vývojářů

JAWS (Job Access With Speech)

Premium software od společnosti Freedom Scientific. Nejstarší čtečka na trhu (od 1995). Používají ji zejména profesionálové a ve státních institucích.

Placená licence (přibližně 90 000 Kč za rok)
Nejpokročilejší funkce
Skvělá podpora českého jazyka
Testovací mód zdarma (40 minut bez limitu spuštění)

VoiceOver (macOS, iOS, iPadOS)

Vestavěná čtečka od Applu. Pokud váš web používají lidé s iPhonem nebo MacBookem, je to jejich nástroj. Velmi integrovaná s ekosystémem Apple.

Součást všech Apple zařízení
Intuitivní gesta a příkazy
Funguje i offline
Bezplatné — není třeba instalace

Jak začít s testováním?

Nemusíte být zrakově postižení, abyste testovali vaši stránku s čtečkou obrazovky. Můžete ji jednoduše stáhnout a vyzkoušet sami. Tady je nejrychlejší cesta:

Stáhněte NVDA (doporučeno pro začátek)

Jděte na www.nvaccess.org , stáhněte si program a nainstalujte. Celý proces trvá 2-3 minuty. Spusťte program a NVDA začne číst obsah vaší obrazovky.

Procházejte svůj web bez myši

Vypněte si monitor (nebo zavřete oči). Používejte jen klávesnici — Tab pro pohyb, Enter pro kliknutí. Pokud se nedokážete navigovat bez vidění, váš web není dostatečně přístupný.

Poslouchejte, jak NVDA popisuje vašeho obsah

Jsou tlačítka správně pojmenovaná? Jsou nadpisy strukturované logicky? Když NVDA čte váš web, zní to přirozeně, nebo je to zmatené? To vám řekne všechno.

Laptop s NVDA rozhraním na obrazovce a sluchátky vedle něj, symbolizující testování přístupnosti

HTML kód zobrazující sémantické elementy jako article, nav, main a section

Sémantický HTML — základ přístupnosti

Čtečky obrazovky se nespoléhají na CSS nebo barevné designové prvky. Spoléhají se na strukturu vašeho HTML kódu . Když použijete správné HTML elementy, čtečky budou vědět, co je nadpis, odkaz, tlačítko nebo seznam.

Správné HTML elementy:

<header> , <nav> , <main> , <footer> — pro strukturu stránky
<h1>...<h6> — pro nadpisy (v logickém pořadí!)
<article> , <section> — pro obsah
<button> , <a> — pro interakci
<label> — pro označení formulářových polí

Když používáte <div> a CSS na všechno, čtečka neví, co dělat. Uživatel slyší jen “klikatelný prvek” bez kontextu. To je špatná přístupnost.

Klávesnicová navigace — to, co chybí mnoha webům

Čtečky obrazovky fungují přes klávesnici. Uživatelé nikdy nepoužívají myš. To znamená, že musíte zajistit, aby všechny interaktivní prvky byly dosažitelné pomocí Tab klávesy a Enter či Space pro aktivaci.

Ověřte Tab pořadí

Stiskněte Tab a sledujte pořadí fokusovaných prvků. Mělo by to být logické — zleva doprava, shora dolů. Nikdy zpátky.

Viditelný focus indikátor

Když uživatel stiskne Tab, musí vidět (nebo slyšet), který prvek je fokusován. Neodstraňujte výchozí focus ring CSS — outline: none je zločin na přístupnosti.

Odkryjte skryté prvky

Pokud máte prvky skryté pomocí display: none , uživatelé s klávesnicí je nemohou aktivovat. Používejte aria-hidden="true" jen když je to opravdu potřeba.

Mechanická klávesnice s zvýrazněným Tab a Enter klávesami, připravená na testování navigace

ARIA — kdy a jak ji správně používat

ARIA (Accessible Rich Internet Applications) vám pomůže v pokročilejších situacích. Ale pozor — špatně použitá ARIA je horší než žádná ARIA.

Sémantický HTML je priorita

Nepoužívejte ARIA jako náhradu za správný HTML. Když můžete použít <button> , nepoužívejte <div role="button"> .

Používejte aria-label pro ikony

Ikony bez textu? Přidejte aria-label="Zavřít" nebo aria-label="Vyhledávat" . Bez toho čtečka neví, co ikonka dělá.

aria-hidden pro dekoraci

Máte decorativní prvky? Skryjte je čtečkám pomocí aria-hidden="true" . Čtečka tak nebude číst zbytečný obsah.

Připravte svůj web pro čtečky obrazovky dnes

Přístupnost není “nice to have” — je to povinnost a správná věc. Začněte malými kroky. Stáhněte si NVDA, testujte svůj web bez myši a fixujte chyby jednu po druhé.

Přečtěte si WCAG průvodce Klávesnicová navigace

Poznámka k článku

Tento článek poskytuje vzdělávací informace o přístupnosti webu a čtečkách obrazovky. Nejde o právní poradenství. Pokud máte specifické právní otázky týkající se zákona o přístupnosti webových stránek v České republice, obraťte se na právníka specialisty. Informace v tomto textu se mohou lišit v závislosti na verzi čtečky obrazovky, prohlížeče a operačního systému. Vždy testujte s reálnými uživateli, pokud je to možné.