Jak vytvořit přístupný web podle standardu WCAG 3.0

Přístupnost webu už dávno není jen o pomoci lidem se zrakovým postižením. Nový standard WCAG 3.0 přináší moderní pohled na webovou přístupnost – klade důraz na srozumitelnost, použitelnost i celkovou uživatelskou zkušenost. V našem praktickém průvodci se dozvíte, jak vytvořit web, který bude přístupný všem a zároveň splní nejnovější požadavky na kvalitu, SEO i UX.

Přístupnost nejenom pro nevidomé 

Přístupnost webu (anglicky web accessibility) znamená, že webové stránky může bez překážek používat co nejvíce lidí – bez ohledu na jejich schopnosti, zařízení nebo situaci.

Nejde tedy jen o uživatele se zrakovým postižením, ale i o seniory, lidi s dočasným zraněním, uživatele mobilních zařízení, nebo třeba o návštěvníky s pomalejším připojením.

Nový standard WCAG 3.0 (Web Content Accessibility Guidelines), vyvíjený konsorciem W3C, přináší modernější přístup k přístupnosti. Nahrazuje starší WCAG 2.x a lépe reflektuje dnešní realitu – dynamické weby, umělou inteligenci, hlasové asistenty i rozhraní založená na AR/VR.

Co je WCAG 3.0 a proč se vyplatí ho znát

Zatímco WCAG 2.1 a 2.2 pracovaly s třístupňovým hodnocením (A, AA, AAA), WCAG 3.0 přináší pružnější model hodnocení. Nehodnotí jen binárně (splňuje / nesplňuje), ale sleduje míru přístupnosti na škále od 0 do 100 %.

Cílem je umožnit webům postupně zlepšovat přístupnost a transparentně ukazovat, jak si vedou.

Hlavní principy WCAG 3.0

• Vnímatelnost (Perceivable) – obsah musí být prezentován způsobem, který uživatel vnímá (např. alternativní texty, kontrast barev, titulky).
• Ovládatelnost (Operable) – všechny prvky lze ovládat klávesnicí, hlasem nebo jinou technologií.
• Srozumitelnost (Understandable) – jazyk i struktura obsahu musí být jasné a předvídatelné.
• Robustnost (Robust) – web funguje s různými prohlížeči, čtečkami a zařízeními.

Nová verze přidává pátý rozměr – zkušenost uživatele (User Experience), tedy celkový dojem z přístupnosti.

Praktické kroky pro tvorbu přístupného webu

1. Pište srozumitelný obsah

Základem přístupného webu je text, kterému rozumí každý. Pište jasně, stručně a přehledně – používejte krátké věty, aktivní formulace a přirozený jazyk.

Nadpisy a odstavce čleňte logicky, aby uživatelé mohli text snadno skenovat pohledem i čtečkou obrazovky. Vyhněte se zbytečnému žargonu, zkratkám a složitým odborným termínům bez vysvětlení.

2. Dbejte na kontrast a práci s barvami

Barevný kontrast je klíčový pro uživatele se zhoršeným zrakem i pro ty, kteří web sledují na mobilu venku na slunci. Podle WCAG by měl mít text vůči pozadí kontrast alespoň 4,5 : 1. To zajistí dostatečnou čitelnost i při sníženém jasu obrazovky.

Vyhněte se situacím, kdy barva nese význam sama o sobě – například „chyby označujeme červeně“ bez textového doplnění. Barvu vždy kombinujte s ikonou nebo textem, aby význam zůstal zachován i pro barvoslepé uživatele.

3. Zajistěte ovladatelnost klávesnicí

Mnoho uživatelů (například lidé s motorickým omezením nebo ti, kteří používají čtečku) naviguje web pomocí klávesnice, nikoliv myši. Všechny interaktivní prvky, jako jsou odkazy, tlačítka nebo formulářová pole, by proto měly být dosažitelné pomocí klávesy TAB a potvrditelné Enterem nebo mezerníkem.

Vyzkoušejte si web projít sami bez myši. Pokud se „zaseknete“ nebo ztratíte přehled o tom, kde se právě nacházíte, znamená to, že web přístupný není. Přidejte jasné zvýraznění aktivního prvku (focus state), například jemný rámeček nebo barevné zvýraznění.

Nejdůležitější ale je, aby bylo přístupné hlavní zaměření webu. Tedy to, kvůli čemu tam lidé chodí. U e-shopu je to výběr produktu, objednávka a platba. Pokud váš web zatím nesplňuje všechny standardy WCAG, začněte právě tímto – zajistěte, aby klíčová funkce fungovala pro všechny. Na detailech můžete pracovat postupně.

4. Používejte alternativní texty pro obrázky

Každý obrázek, ikona nebo grafický prvek by měl mít smysluplný alternativní text (alt), který popíše, co se na obrázku nachází.

Tento text čtečkám umožňuje interpretovat vizuální obsah lidem, kteří ho nevidí. Popisy by měly být krátké a výstižné – například: alt=“Tým programátorů při práci na webu“.

Naopak čistě dekorativní prvky (např. pozadí nebo ozdobné ikony) by měly mít prázdný atribut alt=““, aby je čtečka přeskočila.

5. Zpřístupněte a zpřehledněte formuláře

Formuláře hrají klíčovou roli. Často právě na nich závisí, zda návštěvník úspěšně odešle poptávku nebo dokončí objednávku. Z hlediska přístupnosti proto musí fungovat naprosto spolehlivě a bez bariér.

Každé pole musí být jednoznačně označené pomocí tagu <label>, aby čtečky dokázaly správně přiřadit popisek. Zprávy o chybách pište srozumitelně – místo „Neplatná hodnota“ raději „Zadejte platný e-mail ve formátu jmeno@domena.cz“.

Důležité je, aby všechny stavy formuláře (aktivní, chybové i potvrzené) byly jasně odlišitelné. Použijte barvu, ikonku nebo krátké potvrzení typu „Formulář byl úspěšně odeslán“.

U e-shopů je to naprosto zásadní. Celý proces (od výběru produktu až po platbu) musí být přístupný, přehledný a bez zádrhelů. Stačí, aby nefungovalo jedno pole, a zákazník nákup nedokončí.

6. Přizpůsobte multimediální obsah

Video, zvuk a animace jsou skvělým nástrojem komunikace, ale mohou být pro některé uživatele bariérou. K videím proto přidávejte titulky a textové přepisy. U podcastů a zvukových záznamů nabídněte stručné shrnutí obsahu.

Pohyblivé prvky by měly mít možnost pozastavení nebo vypnutí, aby uživatele nerozptylovaly či nevyvolávaly nevolnost. Moderní nástroje jako YouTube Studio, Descript nebo VEED.io dnes umožňují generovat české titulky automaticky – jejich úprava zabere jen pár minut.

7. Testujte přístupnost pravidelně

Ani ten nejlépe navržený web není dokonalý napoprvé. Testování přístupnosti je proto klíčové. Kombinujte automatické testy s reálným používáním:

• Automaticky – použijte nástroje WAVE, Axe DevTools nebo Google Lighthouse (součást Chrome DevTools).
• Manuálně – zkuste ovládání bez myši, vypněte obrázky nebo spusťte čtečku obrazovky (např. NVDA).
• Reálně – požádejte uživatele s konkrétními potřebami, aby váš web vyzkoušeli.

WCAG 3.0 v praxi – co se mění

Jak přístupnost testovat a implementovat v praxi

Přístupnost dnes patří mezi základní známky kvalitního webu (stejně jako rychlost, bezpečnost nebo SEO). Nový standard WCAG 3.0 posouvá pozornost od pouhého plnění pravidel k celkové uživatelské zkušenosti. 

Přístupný web se tak stává přirozenou součástí dobrého designu i byznysu. Zvyšuje důvěru, snižuje odchody a u e-shopů přímo pomáhá k více dokončeným objednávkám.

Pokud chcete zjistit, jak si váš web vede, můžete využít několik bezplatných nástrojů:

• Google Lighthouse – dostupný přímo v Chrome DevTools. V rámci sekce Accessibility hodnotí čitelnost, kontrast, alternativní texty i navigaci klávesnicí. Aktuálně vychází z WCAG 2.2, ale už částečně reflektuje principy WCAG 3.0 (zejména uživatelskou zkušenost). Výsledné skóre (0–100 %) tak může sloužit jako základní orientační metrika.
• WAVE – online validátor, který zobrazí konkrétní chyby a nedostatky přímo ve vašem webu.
• Axe DevTools (rozšíření pro Chrome a Firefox) – vhodný pro vývojáře, kteří chtějí testovat přístupnost přímo při tvorbě.
• Siteimprove Accessibility Checker – detailnější kontrola přístupnosti obsahu, vhodná pro větší projekty a redakční týmy.