Přístupnost = 15% zákazníků, které možná ignorujete
Když stavíte obchod, děláte rampu pro vozíčkáře. Ne proto, že to vyžaduje zákon (i když ano), ale protože byste přišli o zákazníky.
Web je úplně stejný. Jenže na webu nevidíte, kolik lidí nemůže nakoupit kvůli:
- Špatně čitelnému fontu (slabozrací, starší lidé)
- Chybějícím popisům obrázků (nevidomí s čtečkou obrazovky)
- Tlačítkům, která nefungují na klávesnici (lidé s motorickým handicapem)
- Videím bez titulků (neslyšící)
15% populace má nějakou formu handicapu. V Česku to je 1,5 milionu lidí. Dalších 20% jsou senioři s omezeními (horší zrak, jemná motorika).
Když váš web není přístupný, přicházíte až o třetinu potenciálních zákazníků.
EU Accessibility Act: Od června 2025 to už není “nice to have”
Evropská směrnice o přístupnosti vstoupila v platnost v červnu 2022 a firmy mají přechodné období do 28. června 2025.
Co to znamená konkrétně:
- Pokuty až 50 milionů Kč nebo 10% ročního obratu (podle toho, co je vyšší)
- Platí pro e-shopy, banky, rezervační systémy, ticketingové platformy
- Vztahuje se na firmy s obratem nad 2 miliony EUR ročně (cca 50 mil. Kč)
Mýtus: “Jsme malá firma, netýká se nás to.” Realita: I když pokuta nehrozí, můžete přijít o zákazníky a dostat stížnosti.
V USA již realita:
- 2023: Domino’s Pizza zaplatil 10 milionů dolarů v mimosoudním vyrovnání za nepřístupný web
- Každý rok tisíce žalob podle ADA (Americans with Disabilities Act)
- Firmy jako Target, Netflix, Amazon už zaplatily miliony
WCAG 2.2: Co to vlastně je?
WCAG (Web Content Accessibility Guidelines) jsou mezinárodní standardy přístupnosti.
Tři úrovně:
- A: Minimální přístupnost (absolutní nutnost)
- AA: Dobrá přístupnost (to, co EU vyžaduje)
- AAA: Pokročilá přístupnost (nepovinná, pro vládní weby)
Pro většinu firem stačí úroveň AA.
8 nejčastějších chyb, které dělají weby nepřístupnými
1. Nízký kontrast textu
- Šedý text na bílém pozadí (kontrast 2:1)
- Černý text na bílém pozadí (kontrast 15:1)
- Problém: Slabozrací nebo starší lidé text nevidí
- Řešení: Použijte nástroj pro kontrolu kontrastu
2. Tlačítka a odkazy bez popisku
<button>→</button>(čtečka řekne “tlačítko”)<button aria-label="Další stránka">→</button>(čtečka řekne “tlačítko, další stránka”)- Problém: Nevidomí nevědí, co tlačítko dělá
- Řešení: Všechna tlačítka musí mít popisek
3. Obrázky bez alt textu
<img src="produkt.jpg"><img src="produkt.jpg" alt="Červené dámské tenisky Nike Air Max">- Problém: Čtečka obrazovky přeskočí obrázek
- Řešení: Každý obrázek musí mít popisný alt text
4. Formuláře bez správného označení
- Placeholder “Vaše jméno” bez
<label> <label for="name">Vaše jméno</label><input id="name">- Problém: Čtečka neví, k čemu pole slouží
- Řešení: Každé pole musí mít
<label>
5. Videa bez titulků
- YouTube video bez CC
- Video s profesionálně vytvořenými titulky
- Problém: Neslyšící nerozumí obsahu
- Řešení: Přidejte titulky (nebo použijte automatické + zkontrolujte)
6. Nelze navigovat klávesnicí
- Musíte použít myš ke kliknutí na menu
- Menu funguje šipkami + Enter
- Problém: Lidé s motorickým handicapem používají jen klávesnici
- Řešení: Všechny funkce musí fungovat bez myši (Tab, Enter, šipky)
7. Automaticky se přehrávající obsah
- Video s autoplay nebo animace, které nejdou zastavit
- Video s tlačítkem play/pause
- Problém: Rozptyluje lidi s kognitivními poruchami (ADHD, autismus)
- Řešení: Žádný autoplay bez možnosti vypnutí
8. Nečitelné fonty
- Comic Sans, kurzíva, velikost 10px
- Čitelný bezpatkový font (Arial, Open Sans), min. 16px
- Problém: Dyslektici a starší lidé text nečtou
- Řešení: Jednoduché, velké fonty
Jak otestovat přístupnost vašeho webu (za 10 minut zdarma)
1. WAVE Tool (zdarma, nejjednodušší)
- Jděte na wave.webaim.org
- Vložte adresu vašeho webu
- Do 10 sekund vidíte všechny chyby červeně označené
- Co hledat: Červené ikony = kritické chyby
2. Lighthouse v Chrome (zdarma, zabudované)
- Otevřete web v Chrome
- Stiskněte F12 (vývojářské nástroje)
- Klikněte na “Lighthouse” → “Accessibility”
- Dostanete skóre 0-100
- Co znamená: Pod 80 = máte problém
3. Test klávesnicí (zdarma, manuální)
- Otevřete váš web
- Zavřete myš (doslova ji odpojte nebo schválně nepoužívejte)
- Zkuste se dostat k hlavnímu menu pomocí Tab
- Zkuste se dostat do formuláře a odeslat ho pomocí Enter
- Pokud to nejde → máte problém
4. Test se čtečkou obrazovky (zdarma, pokročilé)
- Windows: Zapněte Narrator (Win + Ctrl + Enter)
- Mac: Zapněte VoiceOver (Cmd + F5)
- Nechte si přečíst váš web
- Pokud to nedává smysl → máte problém
5. Contrast Checker (zdarma)
- Jděte na webaim.org/resources/contrastchecker
- Zadejte barvu textu a pozadí
- Musí projít WCAG AA (kontrast minimálně 4.5:1)
Co požadovat od vývojáře při tvorbě webu
Když zadáváte nový web nebo redesign, přidejte do smlouvy tyto požadavky:
Technické požadavky:
- “Web musí splňovat WCAG 2.2 úroveň AA”
- “Všechny obrázky musí mít alt text”
- “Formuláře musí mít správné labely”
- “Web musí být 100% ovladatelný klávesnicí”
- “Kontrast textu minimálně 4.5:1 podle WCAG”
Testování:
- “Dodejte screenshot z WAVE testu bez chyb”
- “Dodejte Lighthouse report s Accessibility skóre minimálně 90/100”
- “Otestujte web se čtečkou obrazovky a dodejte záznam”
Dokumentace:
- “Dokumentujte všechna použitá ARIA atributy”
- “Zdokumentujte keyboard shortcuts, pokud jsou použity”
Záruka:
- “Pokud web nesplní WCAG 2.2 AA, opravíte zdarma”
Přístupnost = lepší web pro VŠECHNY
Zajímavý paradox: Když děláte web přístupný pro handicapované, vylepšíte ho pro všechny.
Příklady:
- Titulky u videa → Pomáhají neslyšícím, ale TAKÉ lidem v hlučném prostředí nebo bez sluchátek
- Velké tlačítka → Pomáhají lidem s motorickým handicapem, ale TAKÉ lidem na mobilu (kde je těžší kliknout na malé prvky)
- Čitelný font → Pomáhá slabozrakým, ale TAKÉ všem ve slunečním světle
- Klávesnicová navigace → Pomáhá handicapovaným, ale TAKÉ power userům, kteří preferují klávesnice
Bonus:
- Lepší SEO: Google preferuje přístupné weby (alt texty, struktura nadpisů)
- Rychlejší web: Přístupný kód je obvykle čistší a rychlejší
- Více konverzí: Když víc lidí může nakoupit, prodáte víc
3 mýty o přístupnosti
Mýtus 1: “Přístupnost je drahá” Realita: +5-10% při novém webu. Žaloba v USA stojí průměrně 300 000 dolarů.
Mýtus 2: “Handicapovaní lidi stejně nenakupují online” Realita: 71% lidí se zdravotním postižením nakupuje online pravidelně. Mají stejné nákupní síly jako ostatní.
Mýtus 3: “To je jen pro velké firmy” Realita: I malý e-shop může dostat stížnost nebo ztratit zákazníky. Navíc konkurenční výhoda: pokud vy jste přístupní a konkurence ne, získáte jejich zákazníky.
Závěr: Přístupnost není brzda, je to příležitost
3 kroky, které udělat dnes:
- Otestujte váš web na wave.webaim.org – zabere 2 minuty
- Pokud najdete chyby, kontaktujte vývojáře s konkrétním seznamem problémů
- Při dalším redesignu zahrňte WCAG 2.2 AA do smlouvy
Přístupnost není brzdou, je to investice:
- Vyhněte se pokutám (až 50 mil. Kč)
- Získejte 15% zákazníků navíc
- Zlepšete SEO
- Budujte reputaci zodpovědné firmy
A hlavně: je to správná věc.