Standardy WCAG 2.1 jednoduše vysvětleny
Jak porozumět čtyřem pilířům dostupnosti — vnímatelnosti, ovladatelnosti, srozumitelnosti a robustnosti. Praktické příklady a požadavky.
Číst článekInkluzivní design — od konceptu k realitě
Jak tvořit weby, které fungují pro všechny. Principy dostupnosti, barevné kontrasty a navigace bez myši — praktický průvodce pro začátečníky.
Proč na dostupnosti záleží
Když tvoříte web, předpokládáte že ho budou používat všichni — ale realita je trochu jiná. Někdo má slabší zrak, někdo nemůže používat myš, někdo čte text přes čtečku obrazovky. A co je zajímavé? Když děláte web dostupný pro ně, funguje lépe i pro ostatní.
Inkluzivní design není extra věc, kterou přidáte nakonec. Je to myšlení od začátku — v každé rozhodnutí, které uděláte. Barvy, písmo, tlačítka, formuláře. Všechno.
15%
Obyvatel ČR má nějakou formu postižení
WCAG 2.1
Mezinárodní standard dostupnosti
5+
Návratnost investice v SEO a UX
Čtyři pilíře dostupnosti
WCAG 2.1 se skládá ze čtyř základních principů. Nejsou to složité věci — jsou to jen zdravý rozum aplikovaný na design webu.
1
Vnímatelnost
Obsah musí být viditelný a slyšitelný. Dostatek kontrastu mezi textem a pozadím, titulky u videí, alternativní popis obrázků. Pokud máte obsah, musí ho všichni vidět.
2
Ovladatelnost
Web se musí dát ovládat bez myši — klávesnicí, hlasem, pomocí asistivních technologií. Tlačítka musí být velká, formuláře srozumitelné, a vždycky musí být jasné, kde se uživatel na webu nachází.
3
Srozumitelnost
Text, navigace, všechno musí být jasné. Nepoužívejte slova, která nikoho nenapadnou, struktura obsahu by měla být logická a předvídatelná. Uživatel by měl vědět, jak web funguje.
4
Robustnost
Web by měl fungovat s různými technologiemi — staršími prohlížeči, čtečkami obrazovky, zvětšením textu. Nepsaná pravidla HTML a CSS se dodržují, aby všechny technologie věděly, jak web číst.
Barvy a kontrast — nejčastěji ignorovaná věc
Chcete víte, co je nejčastěji špatně na českých webech? Kontrast. Světle šedý text na světle šedém pozadí? Běžné. Tmavě modrý text na modrém pozadí? Vidíme to neustále. A pak se všichni diví, proč se web špatně čte.
WCAG má jasné čísla. Pro běžný text potřebujete alespoň 4,5:1 poměr kontrastu. Pro větší text (18pt+) stačí 3:1. Zní to složitě, ale je to jednoduché — použijte online nástroj, zkontrolujte, máte hotovo. Není to složitější než to.
A ne, nováčci to často podcení. Myslí si, že bude stačit “tak trochu tmavší” nebo “dost se to bude číst”. Není to tak. Pokud máte pochybnosti, měřte.
Jak na to — praktické kroky
Teorie je pěkná, ale jak se to skutečně dělá? Tady je seznam věcí, kterými začít — a nejsou to věci, které by vás zdržely.
01
Zkontrolujte barvy
Vezměte si Contrast Checker od WebAIM. Zkontrolujte barvu textu a pozadí. Cíl: alespoň 4,5:1. Trvá to 5 minut.
02
Přidejte alternativní popis
Každý obrázek na webu by měl mít atribut alt=”…”. Popis co nejkonkrétnější. Ne “obrázek” nebo “fotografie” — řekněte co vidíte.
03
Testujte bez myši
Položte myš stranou. Procházejte web jen klávesnicí. Tab, Enter, šipky. Funguje to? Vidíte fokus? Jste schopní dělat všechno, co jste mohli udělat s myší?
04
Titulky u videí
Pokud máte video, přidejte titulky. Nejenom pro hluchošilné — mnoho lidí v autobuse nebo v kavárně chtějí video bez zvuku. A SEO vám za to bude vděčné.
05
Struktura obsahu
Používejte správné HTML. H1, H2, H3 v logickém pořadí. Ne jen pro styl. Čtečka obrazovky a uživatelé se orientují podle nadpisů. Když je strká do všech pozic, je to zmateníc.
06
Formuláře se štítky
Každé pole musí mít
“Když děláte web dostupný pro lidi se zdravotním postižením, děláte ho lepším pro všechny. Starší uživatelé, lidi na pomalém internetu, v hlučném prostředí — všichni profitují. Dostupnost není speciální věc. Je to jen dobrý design.”
— Principy dostupnosti v praxi
Nástroje, které vám pomohou
Nemusíte všechno dělat ručně. Existují bezplatné nástroje, které vám ušetří čas a pomohou vám najít problémy. Tady je pár, kterých používáme my:
WAVE
Rozšíření do prohlížeče. Otevřete web a WAVE vám ukáže všechny problémy s dostupností — chybějící alt texty, špatný kontrast, chybné struktury.
Lighthouse
Je součástí Chrome DevTools. Spusťte audit a dostanete skóre z 0-100. Nejen pro dostupnost, ale i pro výkon a SEO.
WebAIM Contrast Checker
Jednoduchý nástroj. Zadáte barvu textu a pozadí, a vám řekne, jestli máte správný kontrast. Online, nic nemusíte instalovat.
Screen Reader (NVDA)
Zdarma a open-source. Instalujete si čtečku obrazovky a vyzkoušíte si, jak se váš web čte. Je to trochu zvláštní na začátku, ale je to nejlepší způsob, jak pochopit, co cítí uživatelé.
Axe DevTools
Profesionální nástroj, kterou používají velké týmy. Bezplatná verze je dost dobrá. Vyhledá problémy, které WAVE propáskuje.
Hemingway Editor
Není to nástoj na dostupnost, ale pomůže vám psát jasně a jednoduše. Každá věta je zkontrolovaná na srozumitelnost.
Začněte dnes — je to snažší než myslíte
Inkluzivní design není velký projekt, který vás bude zdržovat. Je to série malých rozhodnutí, která děláte každý den. Jakou barvu vyberu? Dám tady obrázek — jaký napíšu popis? Bude se to dát ovládat bez myši?
Kdybyste si pamatovali jen tři věci z tohoto článku, bylo by to: Zkontrolujte kontrast. Napište alt texty. Testujte bez myši. Tím už uděláte věc lépe než 80 procent webů na internetu.
A víte co? Dostupnost se časem stává zvykem. Nebudete na ni myslet — budete to dělat automaticky. A vaši uživatelé (všichni) vám budou vděční.
Čtěte také
Poznámka redakce
Tento článek poskytuje informace o principech a best practices inkluzivního designu a webové dostupnosti. Je určen jako vzdělávací zdroj pro pochopeníWCAG 2.1 standardů. Konkrétní implementace se může lišit v závislosti na vašem projektu, technologickém stacku a specifických potřebách uživatelů. Pro složitější projekty doporučujeme konzultaci s odborníky na dostupnost nebo auditory certifikovanými v WCAG 2.1. Informace jsou aktuální k únoru 2026, ale webové technologie se vyvíjejí — vždy si ověřte nejnovější doporučení na webech W3C a WCAG.