Zvládne váš web opravdu každý? První kroky k přístupnějšímu webu

Přístupnost začíná u lidí, ne u seznamu bodů

Představte si návštěvníka, který si kvůli slabšímu zraku zvětší stránku na dvě stě procent. Zákazníka s poraněnou rukou, který teď nepoužívá myš. Člověka, který ovládá počítač klávesnicí nebo hlasem. Někoho, kdo potřebuje titulky, protože neslyší zvuk, nebo protože právě sedí v hlučném vlaku. A také člověka unaveného, ve stresu či s poruchou pozornosti, pro kterého je nepřehledný formulář mnohem těžší překážkou než pro jeho autora.

To nejsou okrajové situace. Schopnosti se liší člověk od člověka a mohou se měnit s věkem, nemocí, úrazem i okolním prostředím. Přístupnost proto není jen technická disciplína ani laskavost navíc. Je to způsob, jak nevyloučit návštěvníka kvůli tomu, jak vidí, slyší, přemýšlí nebo web ovládá.

WCAG 2.2, tedy doporučení W3C pro přístupnost webového obsahu, poskytuje společný rámec pro návrh i hodnocení. Pro první zlepšení však nemusíte znát zpaměti čísla kritérií. Začněte tím, zda lidé zvládnou hlavní úkoly vašeho webu: přečíst nabídku, najít kontakt, vyplnit formulář, dokončit objednávku nebo se přihlásit.

Za půl hodiny najdete překvapivě mnoho bariér

Vyberte tři až pět skutečně důležitých stránek. Nestačí jen homepage. U e-shopu vezměte kategorii, detail produktu, košík a objednávku. U firemního webu nabídku služby, kontakt a poptávkový formulář. U aplikace přihlášení a jeden hlavní pracovní postup. Potom si projděte následující kontrolu.

1. 01

   Odložte myš

   Pomocí kláves Tab, Shift + Tab, Enter, mezerníku a šipek zkuste otevřít menu, projít stránku a dokončit její hlavní úkol.

2. 02

   Zvětšete stránku na 200 %

   Zkontrolujte, zda text nezmizí, nepřekrývá jiné prvky a zda lze vše dál přečíst a ovládat. Na menším okně si všímejte i zbytečného vodorovného posouvání.

3. 03

   Podívejte se bez barev

   Ověřte, že význam není předán pouze červenou a zelenou. Odkaz, chyba nebo stav mají být poznatelné také textem, ikonou, podtržením či jiným tvarem.

4. 04

   Projděte obsah jako osnovu

   Přečtěte jen název stránky a nadpisy. Dávají dohromady srozumitelný příběh? Jsou odkazy jasné i bez okolní věty, nebo se všude opakuje neurčité „více“?

5. 05

   Udělejte ve formuláři chybu

   Odešlete prázdné povinné pole a jedno pole vyplňte špatně. Musí být zřejmé, co se stalo, kde je problém a jak jej napravit, aniž by se smazaly ostatní údaje.

Tahle kontrola není audit ani potvrzení souladu s WCAG. Je to rychlý způsob, jak odhalit základní překážky, které bývají na webu vidět při běžném používání. Zapisujte si konkrétní problém spolu se stránkou a úkolem: „V mobilním menu se klávesnicí nedostanu na kontakt“ je mnohem užitečnější než obecné „menu není přístupné“.

Zkuste svůj web bez myši

Bez myši web používají lidé s omezenou hybností, lidé, pro které je práce s myší bolestivá, i uživatelé hlasového ovládání. Jejich potřeby nejsou totožné, ale základ je společný: každý ovládací prvek musí být dostupný, srozumitelně pojmenovaný a použitelný bez přesného pohybu myší. Kontrolu klávesnice můžete začít prostě: stiskněte Tab a sledujte, co se děje.

• Fokus je po celou dobu zřetelně vidět. Nestačí nepatrná změna odstínu, kterou na rušném pozadí téměř nelze najít.
• Pořadí odpovídá tomu, jak je stránka čtená a vnímaná. Fokus neskáče bez vysvětlení z hlavičky do patičky a zpět.
• Všechna tlačítka, odkazy, menu, dialogy, přehrávače a vlastní ovládací prvky lze použít bez myši.
• Z každého prvku lze také odejít. Fokus nesmí zůstat uvězněný v mapě, karuselu, modálním okně ani vloženém obsahu.
• Funkce dostupná po najetí myší je dostupná také při fokusu nebo jiným srozumitelným způsobem.

Všímejte si také velikosti klikacích ploch. WCAG 2.2 na úrovni AA požaduje, aby měl cíl pro ukazovací zařízení zpravidla alespoň 24 × 24 CSS pixelů nebo kolem sebe dost prostoru. Kritérium obsahuje i další výjimky, například pro odkazy uvnitř věty. V praxi je lepší nesnažit se vejít přesně na hranici. Důležitá tlačítka a ikony udělejte pohodlné pro prst i pro člověka s třesem rukou.

Čitelnost není jen velikost písma

Návštěvník může text zvětšit, změnit si barvy, použít vysoký kontrast nebo si obsah nechat přečíst. Stránka by mu v tom neměla bránit. Běžný text má podle WCAG 2.2 na úrovni AA dosahovat kontrastního poměru alespoň 4,5 : 1, velký text alespoň 3 : 1. Poměr alespoň 3 : 1 se vztahuje také na vizuální informace potřebné k rozpoznání ovládacího prvku a jeho stavu vůči sousedním barvám. Konkrétní poměr změřte nástrojem. Pouhý dojem nebo kontrola v odstínech šedi nestačí.

Alternativní text nepopisuje každý pixel. Předává účel obrázku v daném kontextu. U fotografie produktu může být důležitý vzhled a varianta, u grafu jeho hlavní sdělení. Dekorativní obrázek, který nenese žádnou informaci, má mít prázdný atribut alt="", aby jej čtečka zbytečně neohlašovala. Pokud je v obrázku složitý graf nebo návod, stručný alternativní text doplňte plnohodnotným vysvětlením v okolním obsahu.

Při zvětšení textu na 200 % kontrolujte, zda nic nezmizí a všechny funkce zůstanou použitelné. Samostatně vyzkoušejte úzký viewport o šířce 320 CSS pixelů: běžný obsah se má přeskupit bez nutnosti posouvat každý řádek do stran. Výjimkou mohou být části, které dvourozměrné zobrazení opravdu potřebují, třeba rozsáhlá tabulka nebo mapa.

Formulář má člověku pomoci, ne ho zkoušet

Kontaktní formulář, registrace nebo objednávka bývají místem, kde se z návštěvy stává výsledek. Zároveň se zde potkává nejvíc překážek. Začněte tím, že se ptáte jen na údaje, které opravdu potřebujete. Kratší formulář je přehlednější pro člověka se čtečkou, s omezenou motorikou i pro někoho, kdo jej vyplňuje ve spěchu na telefonu.

Každé pole potřebuje viditelný a programově přiřazený název. Placeholder není náhradou za popisek: po začátku psaní zmizí, často má slabý kontrast a může být zaměněn za předvyplněnou hodnotu. U skupiny přepínačů nebo zaškrtávacích polí používejte společný nadpis. Předem řekněte, která pole jsou povinná a v jakém formátu má být například datum nebo telefon.

<label for="email">E-mail (povinný)</label>
<input id="email"
       name="email"
       type="email"
       autocomplete="email"
       aria-describedby="email-help"
       required>
<p id="email-help">Na tuto adresu pošleme potvrzení.</p>

Když se něco nepovede, nestačí obarvit rámeček červeně. Nahoře formuláře shrňte, že obsahuje chyby, a u konkrétního pole napište, co je potřeba změnit. „E-mail není správně“ pomůže méně než „Doplňte e-mail ve tvaru jmeno@firma.cz“. Fokus po odeslání přesuňte nebo spravujte tak, aby uživatel oznámení našel. Správně vyplněná nesenzitivní pole zachovejte. Člověk nemá kvůli jediné chybě začínat znovu.

• Popisek je vidět a jeho atribut for odpovídá id pole.
• Povinnost, očekávaný formát a případný časový limit jsou sděleny dřív, než člověk udělá chybu.
• Chybová zpráva problém pojmenuje, navede k opravě a není závislá pouze na barvě.
• Po úspěšném odeslání je zřetelně potvrzeno, co se stalo a co bude následovat.
• Formulář lze celý vyplnit, zkontrolovat a odeslat klávesnicí.

U kroků, které zakládají právní nebo finanční závazek nebo mění či mažou uživatelská data, nabídněte možnost údaje před odesláním zkontrolovat, opravit nebo akci vrátit, pokud se na daný případ nevztahuje výjimka. Automatické doplňování známých údajů může práci výrazně ulehčit, pokud používáte správné typy polí a hodnoty atributu autocomplete.

Automatická kontrola je dobrý začátek, ne razítko

Nástroje umí rychle projít mnoho stránek a upozornit například na chybějící alternativní text, některé problémy s kontrastem, duplicitní identifikátory nebo pole bez dostupného názvu. Jsou výborné pro pravidelné hlídání chyb, které lze spolehlivě popsat pravidlem.

Nástroj ale nepozná, jestli alternativní text vystihuje účel fotografie. Neví, zda pořadí fokusu dává člověku smysl, zda je chybová zpráva srozumitelná nebo zda se složitý proces dá dokončit se čtečkou obrazovky. Některé výsledky navíc potřebují lidské posouzení a mohou být zavádějící, pokud jim chybí kontext.

Nejrozumnější je tyto pohledy spojit. Automatickou kontrolu pusťte během vývoje a pravidelně po nasazení. Kritické šablony a úkoly projděte ručně podle WCAG. Pokud to rozsah služby dovoluje, zapojte také lidi se zdravotním postižením. Ani samotné uživatelské testování však nepotvrzuje úplný soulad se standardem. Jeho výsledky vždy popisujte spolu s rozsahem a použitou metodou.

Opravujte podle dopadu, ne podle pohodlí

Výstup z kontroly může být dlouhý a láká začít drobnostmi, které se rychle odškrtávají. Užitečnější je ptát se, komu problém brání v práci, jak důležitý úkol zasahuje a na kolika místech se opakuje.

1. 01

   Nejdřív úplné blokace

   Objednávka nejde dokončit klávesnicí, dialog nelze zavřít, ověřovací kód nemá použitelnou alternativu nebo čtečka neoznámí zásadní chybu.

2. 02

   Potom hlavní cesty webem

   Řešte bariéry v navigaci, přihlášení, nákupu, rezervaci, kontaktu a dalších úkolech, kvůli kterým web existuje.

3. 03

   Následně opakované vzory

   Oprava hlavičky, formulářové komponenty nebo karty na jednom místě může napravit desítky stránek. Ověřte ale všechny varianty komponenty.

4. 04

   Nakonec jednotlivé méně závažné nálezy

   Nezahazujte je, jen jim dejte pořadí. U každé opravy určete vlastníka, termín a způsob ověření.

Do zadání chyby uveďte stránku, kroky k zopakování, očekávané chování, komu problém vadí a podle čeho opravu ověříte. Samotná poznámka „nesplňuje 1.4.3“ vývojáři ani editorovi často nepomůže pochopit dopad. Lepší zápis zní: „Text ceny má proti pozadí nedostatečný kontrast, takže jej lidé se slabším zrakem nemusí přečíst. Upravte barvu a znovu změřte všechny stavy komponenty.“

Přístupnost není jednorázový úklid před spuštěním

I dobře opravený web se může během několika měsíců vrátit zpět. Přibude nový formulář, editor vloží text do obrázku, dodavatel nasadí cookie lištu bez klávesnicového ovládání nebo redesign odstraní viditelný fokus. Proto je levnější přístupnost zapojit do běžné práce než pokaždé napravovat hotový web.

• Přidejte přístupnost do definice hotové práce a do kontroly návrhu, vývoje i obsahu.
• Udržujte přístupné komponenty v design systému a dokumentujte jejich správné použití.
• Automatické testy zapojte do vývoje, ale pravidelně zachovejte i ruční průchod hlavních úkolů.
• Dejte editorům krátká pravidla pro nadpisy, odkazy, alternativní texty, tabulky, video a dokumenty ke stažení.
• Zpřístupněte kontakt pro nahlášení bariéry a stanovte, kdo podnět převezme a vyřeší.

Po větší změně otestujte alespoň navigaci, hlavní šablony, formuláře a interaktivní prvky. U webu, který se často mění, dává smysl pravidelná kontrola vybraného vzorku stránek. Uchovávejte přitom datum, rozsah, metodu a známá omezení. Díky tomu neslibujete neurčité „web je přístupný“, ale víte, co bylo skutečně ověřeno a co ještě čeká.

Evropská pravidla se netýkají automaticky každého webu stejně

Evropský akt o přístupnosti (European Accessibility Act, EAA) sjednocuje požadavky pro vybrané výrobky a služby v Evropské unii. Pravidla se od 28. června 2025 uplatňují mimo jiné na některé služby elektronického obchodu, bankovní služby pro spotřebitele, elektronické komunikace, elektronické knihy a vybrané prvky osobní dopravy. Rozhoduje druh výrobku nebo služby, role a velikost provozovatele, přechodná pravidla, možné výjimky a česká právní úprava.

I tam, kde určitá povinnost nedopadá, zůstává praktický důvod jednoduchý: zákazník by neměl odejít jen proto, že nevidí slabý text, nedokáže použít menu nebo nerozumí chybě ve formuláři.