Základy WCAG 2.1 standardů pro webové designéry
Stručný přehled nejdůležitějších pokynů pro tvorbu přístupných webů. Všechno, co potřebujete vědět pro začátek.
Proč je WCAG důležitý?
WCAG 2.1 jsou mezinárodní standardy, které vám pomohou vytvářet weby přístupné všem. Ať už je to člověk se zrakovým postižením, sluchovým znevýhodněním nebo někdo, kdo jen používá starší počítač — správně navržený web funguje pro všechny.
Je to víc než povinnost. Je to zdravý rozum. Web by měl fungovat pro lidi, ne aby lidé museli koukat na váš web. Tady začneme tím nejzákladnějším.
Tři úrovně WCAG
WCAG má tři úrovně dodržování. Každá buduje na předchozí. Nemusíte dosáhnout nejvyšší — ale víte, kam mířit.
Úroveň A
Základní přístupnost. Texty mají smysluplné nadpisy, tlačítka jsou vidět, barevný kontrast funguje. To nejzákladnější.
Úroveň AA
To, co má mít každý web. Vyšší kontrast textu, přístupné videa se titulky, jasná struktura. Všechno funguje bez barev.
Úroveň AAA
Ideální stav. Předvolby uživatelů, ultra jasné texty, rozšířená podpora asistivních technologií. Zřídka se vyžaduje.
Čtyři pilíře přístupnosti
WCAG se točí kolem čtyř základních principů. Všechno ostatní z nich vychází.
Vnímatelnost
Lidé musí vidět a slyšet váš obsah. Dostatečný kontrast, popis obrázků, titulky na videích. Žádný obsah se nesmí skrývat pouze v barvě.
Ovladatelnost
Web musí jít ovládat klávesnicí. Všechna tlačítka musí být dostupná. Žádné časové limity, které vás tlačí do spěchu.
Srozumitelnost
Text je čitelný, struktura je logická, chování je předvídatelné. Když něco nefunguje, víte proč a jak to opravit.
Robustnost
Web funguje s různými technologiemi. Starší prohlížeče, čtečky obrazovky, mobilní zařízení. Kód je správný a jednotný.
Praktické začátky
Nechceme vás děsit. Nemusíte studovat celou specifikaci. Začněte tímhle.
Pište smysluplné nadpisy
Čtečky obrazovky skenují nadpisy. Měly by dávat smysl i samy o sobě. Nikoli “Klikněte sem” ale “Jak nakonfigurovat SMTP”.
Popisujte obrázky
Alt text není náhoda. Je to váš text pro lidi, kteří nevidí. Konkrétní, užitečný, důležitý. Ne “obrázek” ale “Správné nastavení světlosti v Photoshopu”.
Kontrolujte kontrast
Při úrovni AA musí být poměr alespoň 4,5:1 pro normální text. Existují bezplatné online nástroje. Tři minuty práce. Vážně.
Testujte bez myši
Vezměte si klávesnici. Tab, Enter, mezera. Všechno musí jít ovládat. Zkuste to teď. Překvapí vás, co nefunguje.
Nástroje, které vám pomohou
Nechcete testovat ručně? Tady je seznam nástrojů, které si vezou starost.
WAVE
Rozšíření do prohlížeče. Hned vidíte problémy na stránce. Popis obrázků, kontrast, chyby v HTML. Zdarma.
Lighthouse
Vestavěno v Chrome DevTools. Zaměřuje se na přístupnost, výkon i SEO. Spustíte audit jedním kliknutím.
NVDA
Bezplatná čtečka obrazovky. Slyšte, jak váš web zní těm, kdo nevidí. Nejreálnější zkušenost.
WebAIM
Kontrola kontrastu, články o přístupnosti, návody. Nejlepší zdroj informací v češtině i angličtině.
Poznámka o tomto článku
Tento článek poskytuje vzdělávací přehled WCAG 2.1 standardů. Není právním poradcem ani zaměnitelný za oficiální WCAG dokumentaci. Normy se vyvíjejí a jednotlivé země mohou mít vlastní požadavky na přístupnost. Vždy si ověřte aktuální požadavky pro váš projekt a poraďte se s odborníky, pokud si nejste jistí.
Začněte teď
Přístupnost se nezdá složitá, když to vidíte takhle. Nejde o dosažení dokonalosti — jde o tom udělat web, který funguje pro lidi. Zvolte si jeden z těch čtyř pilířů a v příštím projektu na něm zaměřte pozornost.
Následující články vás provedou detaily. Barevný kontrast, struktura, čtečky obrazovky — vše krok za krokem.
