WCAG 2.1 — Praktický začátek pro vývojáře

Zaměřujeme se na čtyři pilíře přístupnosti: vnímatelnost, ovladatelnost, srozumitelnost a robustnost. Praktické příklady na skutečných projektech.

12 min čtení Začátečník Březen 2026

Obrazovka s kódem HTML a atributy ARIA zvýrazněnými v editoru

Proč byste měli znát WCAG?

Webová přístupnost není pouze záležitostí etiky. V České republice je povinná — zejména pro státní instituce a větší společnosti. Zákon o přístupnosti webových stránek a mobilních aplikací stanovuje jasné požadavky, které se postupně rozšiřují na všechny segmenty trhu.

Pokud teď myslíte, že to bude složité a nákladné, máte pravdu v tom prvním — bude to vyžadovat změnu myšlení. Ale není to nákladné. Klíč spočívá v tom, začít správně od začátku. My vám ukážeme jak.

WCAG 2.1 není tajemství. Jsou to čtyři jednoduché principy, které když pochopíte, ostatní věci se vám začnou skládat samo od sebe.

Pracovní plocha s barevným designem přístupného rozhraní, kurzor na tlačítku

Čtyři pilíře přístupnosti

Všechno se točí kolem těchto čtyř principů. Zapamatujte si zkratku POUR — Perceivable, Operable, Understandable, Robust.

Vnímatelnost

Uživatelé musí vidět nebo slyšet obsah. To znamená alternativní text k obrázkům, titulky u videí a dostatečný kontrast textu. Bez toho jsou informace ztracené.

Ovladatelnost

Všechno musí fungovat bez myši. Navigace klávesnicí, pořádek prvků v tabulátoru, přeskakování na hlavní obsah. Lidem bez oka nebo s motorickými problémy to umožní efektivně pracovat.

Srozumitelnost

Obsah musí být jasný. Jednoduchý jazyk, logická struktura, konsistentní navigace. Pokud si uživatelé nebudou jistí, jak váš web funguje, odejdou.

Robustnost

Kód musí být čistý. Správné HTML, validní markup, kompatibilita s různými technologiemi. Čtečky obrazovky i budoucí zařízení se musí na vás moct spolehnout.

Kontrast — první věc, kterou musíte opravit

Začneme s nejjednoduššeím. Kontrast mezi textem a pozadím musí být minimálně 4,5:1 pro normální text. To znamená, že světlý text na tmavém pozadí nebo tmavý na světlém funguje. Ale světlá šedá na bílé? To neprochází.

Otestujte si to sami. Vezmete si tužku a papír — nebo lépe, použijete WebAIM Contrast Checker . Nalepte tam svou barvu textu a barvu pozadí. Hned vidíte, jestli jste na tom dobře nebo špatně.

Praktický tip: Skoro všechny weby mají slabý kontrast u sekundárního textu (odstavce pod nadpisy). To je nejčastější chyba. Opravte to a už jste na 50 %.

Kód HTML s atributy ARIA-label a ARIA-describedby zvýrazněnými v editoru

ARIA — řeč čtečky obrazovky

ARIA jsou speciální atributy, které říkají čtečkám obrazovky, co se na stránce děje. Když máte ikonu bez textu (třeba ikona tužky), říkáte: aria-label="Upravit" . Slepý uživatel tak ví, co ta ikona dělá.

Není to složité. Jsou tři základní atributy, které se používají 80 % času:

aria-label — popis prvku (na ikonách, tlačítkách)
aria-describedby — odkazuje na prvek s podrobným popisem
aria-hidden=”true” — skryje prvek před čtečkami (třeba dekorativní ikony)

Klíč je v tom, nesnažit se být chytřejší než HTML. Pokud máte správný HTML — nadpisy jako h1-h6, tlačítka jako <button>, odkazy jako <a> — ARIA není potřeba. Ale když musíte vytvořit něco speciálního, ARIA vám pomůže.

Navigace klávesnicí — bez myši to musí jít

Otestujte si sami. Vezměte si počítač a schováte myš. Použijte jenom Tab, Enter a šipky. Můžete se dostat na všechny tlačítka? Víte, které tlačítko máte zaostřené?

To je přesně to, co vidí lidé bez možnosti používat myš. A ne, nejde jen o slepé lidi. Lidé s parézou, s parkinsonem, nebo ti, co mají myš nefunkční — všichni se musí dostat přes váš web klávesnicí.

Správné HTML prvky

Používejte <button> na tlačítka, <a> na odkazy. Nevytvářejte <div> s onclick. To prostě nefunguje.

Viditelný focus stav

Když se prvek zaostří (Tab na něj), musí být vidět. Neodstraňujte outline CSS. Změňte si ho, aby se vám líbil.

Pořádek v tabulátoru

Tabkey by měl procházet prvky v logickém pořadí. Zleva doprava, shora dolů. Pokud není, použijete tabindex (ale jen když musíte).

Simulace klávesové navigace — Tab focus na tlačítko s viditelným outline

Jak testovat — nástoje a postupy

Nemusíte si koupit drahé software. Existují free nástroje, které vám řeknou 80 % problémů.

NVDA — čtečka obrazovky

Zdarma, open-source, běží na Windows. Nainstalujte si ji a poslechněte, jak čte váš web. Překvapí vás, co všechno jí chybí.

Axe DevTools

Rozšíření pro Chrome/Firefox. Otevřete DevTools a vidíte všechny chyby WCAG v sekundách. Skvělé pro začátečníky.

WebAIM Contrast Checker

Webtool na webaim.org. Vložíte barvu textu a pozadí — dostanete okamžitou odpověď. Projde WCAG AA nebo AAA?

Lighthouse (Google Chrome)

Je to už v DevTools. Spusťte Lighthouse report a vidíte skóre přístupnosti. Není to dokonalé, ale dobrý start.

Začít je snadné — pokračovat je umění

WCAG 2.1 není nějaký strašidelný standard. Je to praktický průvodce, který říká: “Aby váš web fungovalo pro všechny, udělejte tohle.” Nic víc.

Pokud jste vytvořili správný HTML, máte dobrý kontrast, navigujete bez myši a používáte ARIA kde je potřeba — jste v cíli. Zbytek je jen refinement.

Začněte tím, že si vezměte svůj web a testujete ho NVDA. Poslouchejte, jak ho čtečka čte. To vám otevře oči více než cokoliv jiného.

Chci se dozvědět víc

Poznámka k obsahu

Tento článek je vzdělávacím materiálem zaměřeným na základní pochopení WCAG 2.1 a principů webové přístupnosti. Příklady a postupy jsou zjednodušené pro začátečníky. Každý projekt má své specifické požadavky — pro detailní implementaci konzultujte oficiální WCAG 2.1 dokumentaci nebo se obraťte na specialisty na přístupnost. Právní povinnosti v České republice se mohou měnit, proto si vždy ověřte aktuální znění zákona o přístupnosti webových stránek a mobilních aplikací.