Seviranta10 nejčastějších chyb přístupnosti v e-shopech (a jak je opravit)
4. června 2026
Stručná odpověď. Většina e-shopů neselhává na stovkách různých věcí, ale na stejné hrstce chyb: nedostatečný barevný kontrast, chybějící alternativní texty, tlačítka a odkazy bez názvu, pole bez popisku, chaotická struktura nadpisů a nedostatečné ovládání klávesnicí. Dobrá zpráva: právě proto se to dá vyřešit — často na úrovni šablony, takže jedna oprava pokryje rovnou stovky stránek.
Z výzkumu WebAIM Million vyplývá, že ~96 % domovských stránek obsahuje měřitelné chyby podle WCAG — a ty se koncentrují do deseti bodů níže. Chcete vědět, které má váš web? Dole si zdarma naskenujete jednu stránku.
1. Nedostatečný barevný kontrast
Zdaleka nejčastější chyba. Světle šedý text na bílé, nebo barva tlačítka, která je o chlup příliš bledá, je nečitelná pro slabozraké i pro kohokoli na telefonu na ostrém slunci. Norma vyžaduje kontrastní poměr nejméně 4,5:1 pro běžný text (3:1 pro velký text).
Řešení: ztmavte nebo zesvětlete barvu textu či pozadí, dokud poměr nesedí. V Shopify to upravíte jednou v nastavení šablony → barvy a platí to okamžitě pro celý obchod. Více v článku barevný kontrast: požadavek WCAG a jak ho měřit.
2. Obrázky bez alternativního textu
Produktová fotografie bez alternativního textu je pro čtečku obrazovky neviditelná — nevidomý zákazník pak neví, o jaký produkt jde. To se přímo dotýká vašich prodejů.
Řešení: dejte každému informativnímu obrázku krátký alternativní text, který
popisuje, co je na něm. V Shopify: produkt → média → „upravit alternativní text".
Čistě dekorativní obrázky dostanou prázdný alt (alt=""). Viz
jak psát alternativní texty, které fungují.
3. Tlačítka bez názvu
Tlačítko, které zobrazuje jen ikonu (košík, hledání, menu), přečte čtečka obrazovky jako „tlačítko" — aniž by uživatel věděl, co dělá.
Řešení: dejte tlačítku text, nebo aria-label, který popisuje akci,
například aria-label="Přidat do košíku".
4. Odkazy bez srozumitelného textu
Stejně jako u tlačítek: odkaz tvořený jen ikonou, nebo odkazy „číst více" bez kontextu, neřeknou uživateli čtečky obrazovky, kam vedou.
Řešení: dejte odkazu viditelný, popisný text, nebo aria-label
(„Zobrazit košík" místo holé ikony košíku).
5. Vstupní pole bez popisku
Pole pro hledání, přihlášení a pokladnu bez propojeného popisku se asistivní technologií ovládají obtížně nebo vůbec. Právě u pokladny vás to stojí zákazníky.
Řešení: propojte s každým vstupním polem viditelný <label> (přes for/id),
nebo použijte aria-label, pokud na viditelný text není místo.
6. Chaotická struktura nadpisů
Uživatelé čteček obrazovky navigují po nadpisech, jako vy podle obsahu knihy. Pokud skočíte z H1 na H4, nebo používáte nadpisy jen kvůli vzhledu, tato struktura se rozpadá.
Řešení: používejte nadpisy v logickém pořadí (H1 → H2 → H3) a vzhled řešte přes CSS, ne úrovní nadpisu.
7. Chybějící atribut jazyka
Bez atributu jazyka čtečka obrazovky neví, jestli je vaše stránka česky nebo anglicky, a všechno předčítá se špatnou výslovností.
Řešení: nastavte lang="cs" (nebo správný jazyk) na elementu <html>. V
Shopify to najdete v theme.liquid — většinou už tam je, ale občas prázdné.
8. Web nelze ovládat klávesnicí
Mnoho lidí nepoužívá myš. Pokud menu, slider nebo vyskakovací okno fungují jen myší, nebo pokud není vidět, kde se nachází fokus, tyto návštěvníky vylučujete.
Řešení: zajistěte, že je vše dosažitelné klávesou Tab, že existuje viditelný rámeček fokusu a že vyskakovací okna fokus „neuvězní".
9. Špatně použité ARIA
Atributy ARIA mohou asistivním technologiím pomoci — ale špatně nebo neplatně použité naopak škodí. Často se vkrádají přes nainstalované aplikace nebo součásti šablony.
Řešení: používejte ARIA jen tam, kde je to nutné, a s platnými hodnotami. Pokud pochází z aplikace nebo šablony, zkontrolujte danou součást.
10. Chybí srozumitelný titulek stránky
Stránka bez unikátního <title> nezobrazuje v záložce prohlížeče ani ve čtečkách
obrazovky rozpoznatelný název — navigace mezi záložkami se mění v hádání.
Řešení: dejte každé stránce unikátní, popisný titulek. Shopify ho většinou vyplňuje automaticky; zkontrolujte své vlastní šablony.
Jaká je nejčastější chyba přístupnosti?
Nedostatečný barevný kontrast je zdaleka nejčastější chyba — s velkým odstupem vede prakticky v každém rozsáhlém výzkumu, protože se nepozorovaně vkrádá do barev šablony, textů tlačítek a cenovek. Zároveň patří k nejsnáze opravitelným chybám: jednou správně nastavíte barvy šablony a platí to pro celý obchod.
Dají se tyto chyby opravit najednou?
Často ano. Protože e-shop pracuje se šablonami, stejná chyba se obvykle vyskytuje na stovkách stránek zároveň — a dá se tedy opravit napříč celou šablonou. Jedna úprava šablony (barvy, nadpisy, popisky) pak jedním tahem pokryje celý obchod.
Zachytí bezplatný sken všechny tyto chyby?
Automatizovaný sken spolehlivě strojově odhalí přibližně 57 % problémů; zbytek vyžaduje lidské posouzení. Těch 57 % zahrnuje právě chyby uvedené výše — kontrast, alternativní texty, popisky, tlačítka, nadpisy — takže sken okamžitě zmapuje lví podíl, včetně návodu na opravu.
Zajímá vás, které z těchto deseti chyb má váš web? Vložte svou URL a naskenujte zdarma jednu stránku do plné hloubky — bez účtu, za méně než 60 sekund.