Přístupnost webu je téma, které si stále častěji nachází cestu i do běžné komerční praxe. Už to není jen požadavek pro státní instituce nebo neziskové organizace. Naopak – každý, kdo má web, by se měl zajímat o to, jestli je jeho obsah dostupný pro všechny uživatele bez ohledu na to, zda používají čtečku obrazovky, nemohou ovládat myš, nebo mají potíže se zrakem, sluchem či motorikou. Takových lidí je víc, než si často připouštíme – a i když je někdo aktuálně bez omezení, může se dočasně dostat do situace, kdy přístupný web ocení. Například když používá telefon na přímém slunci, má zlomenou ruku nebo dočasně ztratil sluch.
Přístupnost zlepšuje nejen použitelnost, ale i SEO, výkon webu a reputaci značky.
Co je to přístupnost a WCAG?
Přístupnost (angl. accessibility) znamená, že web může používat každý člověk – bez ohledu na to, jestli má zrakové, sluchové, motorické nebo jiné omezení. Přístupný web je ten, který neklade překážky: je čitelný, ovladatelný, srozumitelný a stabilní v různých technických i lidských podmínkách.
Abychom se mohli bavit o konkrétních pravidlech a kontrolních bodech, máme tu standard zvaný WCAG – Web Content Accessibility Guidelines. Ten vydává konsorcium W3C a stal se globálním měřítkem pro digitální přístupnost.
WCAG definuje tři úrovně:
| Úroveň | Co znamená |
|---|---|
| A | Základní funkčnost – web je aspoň použitelný |
| AA | Doporučený standard – rozumná přístupnost pro většinu lidí |
| AAA | Nejvyšší laťka – hodně přísná pravidla, často nereálná pro běžný web |
Naprostá většina veřejných i komerčních webů se zaměřuje na dosažení úrovně AA. Ta zajišťuje solidní úroveň použitelnosti pro většinu uživatelů a zároveň není technicky či finančně nedosažitelná.
Co na webu zkontrolovat (a jak)
1. Kontrast barev
Slabozrací lidé nebo ti, kdo se dívají na obrazovku za zhoršených podmínek (například na slunci), často špatně rozlišují barvy s nízkým kontrastem.
Doporučený poměr kontrastu je minimálně 4.5:1 pro běžný text (úroveň AA), pro ještě lepší čitelnost 7:1 (AAA).
Nástroje:
2. Alt texty u obrázků
Obrázky na webu by měly mít popis, který dává smysl v kontextu. Nejde o to popsat barvy, ale říct, co má návštěvník pochopit nebo co by slyšel, kdyby místo obrázku někdo mluvil.
Dekorativní obrázky by měly mít atribut alt="", aby je čtečka ignorovala.
Nástroje:
- WAVE – zvýrazní chybějící nebo špatné
altatributy - axe DevTools (Chrome plugin)
3. Nadpisy a struktura
Struktura stránky by měla odpovídat logickému členění obsahu. Hlavní nadpis je <h1>, podsekce <h2>, a tak dále. Nadpisy nemají sloužit jen pro vizuální vzhled, ale hlavně pro orientaci v obsahu – pro čtečky i pro běžného uživatele.
Nástroje:
4. Formuláře
Formulář musí být čitelný a ovladatelný i pro ty, kdo nepoužívají myš:
- Každé pole má mít popisek (
<label>), který je s prvkem propojen. - Odeslání formuláře, přepínání mezi poli – to vše musí jít ovládat jen klávesnicí.
- Chybová hlášení musí být srozumitelná, ideálně se čtečkou.
Zkuste si to: Vyplňte svůj formulář jen pomocí kláves Tab, Enter a Space.
Nástroje:
5. Klávesová ovladatelnost
Uživatel se musí dostat na každý ovladatelný prvek pomocí klávesnice. Pokud se někam nedostane bez myši, je to problém.
Zaměřte se také na to, zda je aktuálně aktivní prvek vizuálně označen – tzv. focus. Měl by být zřetelně viditelný.
Nástroje:
- Prostě použijte Tab a sledujte, kam se kurzor posouvá.
- Focus Indicator Bookmarklet – zvýrazní prvky bez viditelného focusu
6. Jazyk stránky
Jazyk dokumentu musí být správně nastaven, např. <html lang="cs">. Čtečka pak ví, jakým jazykem má mluvit.
<html lang="cs">Zkontrolujte ručně nebo přes:
7. Odkazy a tlačítka
Text odkazu by měl dávat smysl sám o sobě. Vyhněte se frázím jako „Klikněte zde“ nebo „Zobrazit více“.
Místo toho pište: „Stáhnout PDF s ceníkem“, „Odeslat žádost“, „Číst článek o přístupnosti“.
8. Responzivita a zoom
Přístupnost zahrnuje i responzivní design a možnost bezproblémového zvětšení stránky.
- Při zvětšení na 200 % se stránka nesmí rozpadnout.
- Texty musí zůstat čitelné, ovládací prvky přístupné.
Nástroje:
- DevTools → Device mode v Chrome nebo Firefoxu
- Zvětšení přes prohlížeč (
Ctrl +neboCmd +)
Co je ARIA?
ARIA (Accessible Rich Internet Applications) je sada speciálních HTML atributů, které rozšiřují možnosti přístupnosti u webových komponent, které nejsou snadno pochopitelné pro asistivní technologie. Typicky jde o interaktivní prvky jako rozbalovací nabídky, modální okna, taby nebo vlastní ovládací prvky, které nemají odpovídající nativní HTML značky.
Například:
<div role="dialog" aria-labelledby="modal-title">- Atribut
rolepopisuje typ prvku (např. dialog, tlačítko, upozornění atd.). aria-labelledbyodkazuje na ID prvku, který slouží jako nadpis – čtečka jej přečte jako popisek.
ARIA atributy pomáhají čtečkám obrazovky pochopit účel a stav prvků. Například aria-expanded="true" říká, že je daná sekce právě rozbalená, nebo aria-hidden="true", že je prvek skrytý a nemá být oznamován.
Důležité: ARIA není náhrada za správné HTML. Pokud existuje nativní značka (např. <button>), vždy ji použij. ARIA se má používat jen tehdy, když HTML samo nestačí.
Více v oficiálním průvodci: ARIA Authoring Practices
Nástroje pro testování přístupnosti
| Nástroj | Popis |
|---|---|
| WAVE | Online nástroj – analyzuje přístupnost, zvýrazní chyby přímo na stránce |
| axe DevTools | Plugin pro Chrome – testuje stránku na WCAG chyby |
| Lighthouse | Vestavěný audit v Chrome DevTools – záložka „Lighthouse“ |
| Screen reader NVDA | Čtečka pro Windows zdarma |
| VoiceOver | Čtečka v macOS/iOS – aktivace přes Cmd + F5 |
| HTML_CodeSniffer | Bookmarklet pro rychlou kontrolu WCAG chyb |
| Accessibility Insights | Nástroj od Microsoftu pro audit přístupnosti |
| Silktide | Silktide Accessibility Checker – doplněk do Chrome |
Shrnutí
Přístupnost webu není módní trend ani nepříjemná povinnost. Je to investice do kvality, použitelnosti a dostupnosti. Dává smysl lidsky i obchodně – zpřístupníte svůj obsah většímu množství lidí, zlepšíte UX, podpoříte SEO a zároveň přispějete k tomu, aby byl web přívětivější pro všechny.
Dobrá zpráva je, že většinu základních věcí zvládnete zkontrolovat sami a bez placených nástrojů. I malá zlepšení – jako lepší kontrast, smysluplné nadpisy nebo správně popsaná tlačítka – mohou výrazně pomoci těm, kteří vaši pomoc nejvíc ocení.
Začněte jednoduše. Zaměřte se na jednu oblast, vyzkoušejte doporučené nástroje a postupně vylepšujte. Každý krok směrem k lepší přístupnosti se počítá.
