Standardy WCAG 2.1 jednoduše vysvětleny

Jak porozumět čtyřem pilířům dostupnosti — vnímatelnosti, ovladatelnosti, srozumitelnosti a robustnosti. Praktický přehled pro vývojáře.

10 min čtení Začátečník březen 2026

Sada pokynů WCAG na papíru s poznámkami a tužkou vedle notebooku

Co je WCAG 2.1 a proč na tom záleží

Webová dostupnost není jen něco, co by měli dělat velké korporace. Je to pro všechny. WCAG 2.1 jsou mezinárodní pokyny, které vám pomohou vytvářet weby, které fungují pro každého — bez ohledu na jejich schopnosti.

Není to těžké ani drahé. Jde jen o chytré rozhodování na začátku projektu. Když budete vědet, jak na to, můžete postupovat bez větších problémů. Tady vám ukážeme, jak na to funguje.

Přátelský webový vývojář sedící u stolu s více monitory, jeden ukazuje webové rozhraní s jasnou typografií a barevnými prvky

Čtyři pilíře dostupnosti

WCAG 2.1 je postaven na těchto základních principech, které zajišťují, že web funguje pro všechny.

Vnímatelné (Perceivable)

Uživatelé musí být schopni vnímat obsah. To znamená dostatečný kontrast, alternativní texty k obrázkům a titulky k videím. Pokud to nemohou vidět nebo slyšet, potřebují jinou cestu.

Ovladatelné (Operable)

Každý musí být schopen interagovat s webem. To znamená, že všechno musí fungovat s klávesnicí, ne jen s myší. Nic se nesmí zamrzlout nebo se chovat nepředvídatelně.

Srozumitelné (Understandable)

Obsah musí být jasný a logický. Nepoužívejte cizí slova bez vysvětlení. Labely by měly být zřejmé. Chyby musí být jasně identifikovány a uživatelům musíte říci, jak je opravit.

Robustní (Robust)

Web musí fungovat s nejrůznějšími technologiemi. Správný HTML kód, čisté CSS a podpora pro asistivní technologie. Nezáleží na tom, jaký prohlížeč nebo nástroj někdo používá.

Praktické příklady z reálného světa

Řekněme, že máte tlačítko na vašem webu. Prosté tlačítko. Vyzkoušejte to — klikněte na něj myší. Funguje? Samozřejmě. Teď zkuste to samé pouze s klávesnicí. Stiskněte Tab. Vidíte focus? Pokud ne, máte problém.

To je přesně to, co WCAG kontroluje. Nejde jen o slepce nebo lidi s poruchami sluchu. Jde o matku, která má zlomené zápěstí a nemůže používat myš. Jde o seniora s špatným zrakem, který potřebuje zvětšit písmo na 200 procent. Jde o osobu, která používá jen klávesnici, protože má motorické postižení.

Klíč k úspěchu: Testujte váš web tak, jak ho budou používat různí lidé. Keyboard navigation, čtečka obrazovky, zvětšení textu. Pak víte, co opravit.

Přibližný pohled na barevné pixely monitoru, které ukazují kontrast a čitelnost textu v různých barvách

Tři úrovně schodů znázorňující postupné zvyšování dostupnosti od základní po optimální úroveň

Tři úrovně souladu — A, AA, AAA

WCAG 2.1 má tři úrovně. Nemusíte hned dosáhnout nejčastější, ale měli byste mít cíl.

Úroveň A — Základní

Nejzákladnější požadavky. Všechny obrázky musí mít alt text. Navigace musí fungovat s klávesnicí. Titulky k videům. Není to dokonalé, ale je to začátek.

Úroveň AA — Doporučená

To je to, na co byste se měli zaměřit. Kontrast alespoň 4,5:1 pro normální text. Fokus indikátor viditelný. Formuláře jasně označeny. To je standard pro veřejné webové stránky a to, co většina lidí očekává.

Úroveň AAA — Optimální

Highest standard. Kontrast 7:1. Alternativy pro video bez zvuku. Rozšířená podpora asistivních technologií. Toto je ideální cíl, ale ne všechny webové stránky to potřebují.

Nástroje pro testování dostupnosti

Nemusíte být expert, aby jste otestovali svůj web. Tady jsou jednoduché nástroje, které můžete použít hned dnes.

WAVE

Zdarma online nástroj. Zkopírujte URL, stiskněte Enter. Vidíte problémy s chybějícími alt texty, kontrastem a strukturou stránky. Dává vám konkrétní tipy na opravu.

Lighthouse

Vestavěno v Chrome DevTools. Klikněte pravým tlačítkem, Inspect, Lighthouse. Testuje dostupnost, výkon a SEO zároveň. Dostanete skóre a konkrétní návrhy.

Testování klávesnicí

Nejjednoduší test. Schujte myš. Stiskněte Tab a navigujte po webu. Vidíte focus indikátor? Můžete dosáhnout všech funkcí? Pokud ne, máte práci.

NVDA — Čtečka obrazovky

Zdarma program pro Windows. Spusťte ho a poslouchejte, jak váš web zní. Jsou popis obrázků jasné? Jsou headingy strukturovány správně? To vám řekne.

Pět rychlých tipů, které můžete implementovat hned

Nemusíte přestavovat celý web. Začněte s těmito jednoduchými kroky:

Alt text k obrázkům: Pište krátký, jasný popis. Není to “obrázek1.jpg”, je to “Muž se psem v parku v létě”. Stručné, ale popisné.
Barva není jediná informace: Pokud chcete něco zvýraznit červeně, přidejte také text nebo ikonu. Barvoslepý člověk nebude rozumět.
Adekvátní kontrast: Tmavý text na jasném pozadí. Světlý text na tmavém pozadí. Pokud si nejste jisti, použijte online nástroj pro kontrolu kontrastu.
Správné HTML prvky: Použijte h1, h2, h3 pro nadpisy. Nedělejte nadpisy CSS. Screenreadery je budou chápat lépe.
Testujte s klávesnicí: Schujte myš na den. Můžete se pohybovat po webu pouze s Tab a Enter? Pokud ne, máte co dělat.

Pracovní plochá scéna s notebookem, která zobrazuje kontrolní seznam a bezpečnostní symboly pro webovou dostupnost

Není to jen povinnost — je to správná věc

WCAG 2.1 neexistují, aby vás obtěžovaly. Existují, protože web by měl fungovat pro každého. Když vytvoříte dostupný web, nejen že pomůžete lidem s postižením, ale také zvýšíte SEO, zlepšíte UX pro všechny a budete se cítit lépe sami se sebou.

Začněte jednoduše. Testujte s klávesnicí. Přidejte alt texty. Zkontrolujte kontrast. To vám bude trvat několik hodin, ne měsíce. A pak budete moci říci, že váš web je opravdu dostupný.

Prozkoumat další články

Důležité upozornění

Tento článek poskytuje obecné informace o standardech WCAG 2.1 a nejsou právním poradenstvím. Požadavky na dostupnost se mohou lišit podle jurisdikce a typu organizace. Doporučujeme vám konzultovat právní poradce a odborníka na dostupnost pro konkrétní situaci vašeho webu.