Přístupnost webu (accessibility) bývá vnímána jako téma pro velké korporace a vládní portály. Ve skutečnosti přístupný web pomáhá všem uživatelům — a přímo ovlivňuje SEO, konverzní poměr i pokrytí cílové skupiny.

Co jsou WCAG a co vyžadují

WCAG (Web Content Accessibility Guidelines) jsou mezinárodní standardy pro přístupnost webového obsahu. Vydává je W3C — organizace, která definuje webové standardy. Aktuální verze je WCAG 2.1, přičemž WCAG 2.2 přidává několik nových kritérií.

Standardy jsou rozděleny do tří úrovní:

  • A — základní požadavky (minimum)
  • AA — standard pro komerční weby (cíl pro každý web)
  • AAA — nejvyšší úroveň (výzkumné nebo specializované weby)

Weby veřejné správy a e-shopy jsou ze zákona povinny splňovat WCAG 2.1 AA. Pro ostatní firmy je to dobrovolné — ale výhodné.

Proč přístupný web pomáhá všem

Větší cílová skupina

Přes 10 % populace má nějakou formu zdravotního omezení, které ovlivňuje používání internetu:

  • Zrakové postižení (od barvosleposti po slepotu)
  • Motorické postižení (omezené ovládání myší)
  • Sluchové postižení
  • Kognitivní nebo neurologické odlišnosti (dyslexie, ADHD)

Nepřístupný web tuto skupinu zákazníků jednoduše vylučuje.

Dočasná omezení postihují každého

Přístupné prvky pomáhají i v situacích, které nejsou trvale postižení:

  • Zlomená ruka a ovládání jen klávesnicí
  • Jasné sluneční světlo a nízký kontrast displeje
  • Stará obrazovka s horším podáním barev
  • Hlučné prostředí a titulky u videí

Přímý vliv na SEO

Mnoho přístupnostních opatření Google přímo hodnotí:

  • Alt texty obrázků jsou vstupem pro Google Images i textové výsledky
  • Správná struktura nadpisů (h1, h2, h3) pomáhá crawlerům i uživatelům
  • Popisné anchor texty odkazů jsou signálem relevance
  • Sémantické HTML Google lépe interpretuje

Nejdůležitější přístupnostní požadavky

Kontrast textu

WCAG 2.1 AA vyžaduje kontrastní poměr:

  • Normální text: minimálně 4,5:1
  • Velký text (18px+ nebo 14px bold): minimálně 3:1

Jak zkontrolovat: WebAIM Contrast Checker — zadáte hex kódy popředí a pozadí, nástroj vyhodnotí shodu.

Světle šedý text na bílém pozadí, oblíbený u minimalistických designů, tento požadavek zpravidla nesplňuje.

Klávesnicová navigace

Celý web musí být ovladatelný bez myši. To zahrnuje:

  • Navigace přes Tab klávesy
  • Viditelný focus indikátor (obrys nebo jiné zvýraznění aktivního prvku)
  • Správné pořadí focusu odpovídající vizuálnímu pořadí

Jak zkontrolovat: Položte myš a zkuste projít celý web jen klávesnicí. Pokud nevíte, kde se nacházíte — web selhává.

Alternativní texty obrázků

Každý obrázek nesoucí informaci musí mít atribut alt s popisem. Dekorativní obrázky mají alt="" (prázdné — čtečky je přeskočí).

Špatně: alt="obrázek" nebo alt="foto123.jpg" Správně: alt="Tomáš Slezák — frontend developer při práci v kanceláři"

Sémantické HTML

Správné HTML elementy pro správné účely:

  • Navigace patří do <nav>
  • Hlavní obsah do <main>
  • Záhlaví do <header>, zápatí do <footer>
  • Formulářové prvky mají asociované <label>
  • Tlačítka jsou <button>, ne <div> s click handlerem

Screen readery (čtečky obrazovky) se spoléhají na sémantiku. Divová polévka bez struktury je pro ně nečitelná.

Formuláře

  • Každé pole má popisný label (<label for="...">)
  • Chybové zprávy jsou srozumitelné a asociované s konkrétním polem
  • Povinná pole jsou označena (a označení je vysvětlené)
  • Stav chyby není komunikován jen barvou

Videa a multimédia

  • Videa s mluveným slovem mají titulky
  • Pouze-audiozáznamy mají přepis
  • Automatické přehrávání s audio je zakázáno (nebo má tlačítko pro ztišení)

Jak provést audit přístupnosti

Automatizované nástroje

Automatizované nástroje odhalí přibližně 30–40 % problémů:

  • axe DevTools (rozšíření pro Chrome) — bezplatné, přesné výsledky
  • WAVE (wave.webaim.org) — vizuální přehled problémů přímo na stránce
  • Lighthouse (Chrome DevTools) — Accessibility skóre jako součást celkového auditu

Manuální testování

Zbytek problémů vyžaduje manuální kontrolu:

  • Procházení webu klávesnicí
  • Testování se screen readerem (NVDA na Windows je zdarma)
  • Kontrola kontrastu v kritických místech

Co dělat s výsledky

Rozdělte problémy podle závažnosti:

  1. Kritické — blokují přístup (chybějící alt texty, nefunkční klávesnicová navigace) → opravit okamžitě
  2. Závažné — výrazně zhoršují zážitek (nízký kontrast, chybějící labely) → opravit v nejbližším sprintu
  3. Doporučené — drobná zlepšení → opravit průběžně

Přístupnost a zákon

Od roku 2022 platí v EU zákon o přístupnosti (implementace European Accessibility Act), který se postupně rozšiřuje. Od června 2025 pokrývá i soukromé e-shopy a digitální služby. Pokud provozujete e-shop nebo digitální produkt, přístupnost WCAG 2.1 AA je zákonnou povinností.

Přístupnostní audit provádím jako samostatnou službu nebo součástí technického SEO auditu. Pokud chcete vědět, jak na tom váš web je, ozvěte se.