Pokaždé, když zákazník s postižením nezvládne pokladnu, produktový filtr nebo přečtení popisů produktů, přijdete o prodej. Více než každý čtvrtý dospělý v USA má nějaké postižení. To není malý segment trhu. To je váš trh.
Přístupnost webu není jen etická otázka. Je to právní požadavek. Zákon Americans with Disabilities Act (ADA) vyžaduje, aby firmy zpřístupnily své služby lidem s postižením. Týká se to i e-shopů. Tisíce webů dostávají každý rok právní výzvy kvůli porušení přístupnosti a e-shopy jsou terčem nejčastěji. Tento článek vysvětluje, co přístupnost znamená, proč na ní vašemu e-shopu záleží, co vyžaduje zákon a jak ji zavést bez drahých specializovaných nástrojů.
Co je přístupnost webu?
Přístupnost webu znamená, že váš web mohou používat všichni, včetně lidí s postižením. Patří sem lidé nevidomí nebo slabozrací, neslyšící nebo nedoslýchaví, lidé s pohybovým postižením, kterým dělá potíže používat myš, lidé s kognitivním postižením nebo poruchami učení a lidé s dalšími stavy, které ovlivňují, jak web používají.
Přístupné weby fungují s asistivními technologiemi, jako jsou odečítače obrazovky (software, který čte text nahlas), ovládání jen klávesnicí (pro lidi, kteří nemohou používat myš) a nástroje pro zvětšení. Přístupný web také používá srozumitelný jazyk, dostatečný barevný kontrast, správnou strukturu nadpisů a popisky formulářů, kterým odečítače rozumějí.
Základní zásada: vaši zákazníci by měli zvládnout udělat to, kvůli čemu přišli. Měli by procházet, filtrovat, číst popisy, přidávat do košíku a dokončit objednávku, ať používají jakoukoli asistivní technologii nebo úpravy.
Co je ADA a proč se vztahuje na váš e-shop?
Zákon Americans with Disabilities Act (ADA), přijatý v roce 1990, je americký federální zákon, který zakazuje diskriminaci lidí s postižením. Hlava III zákona ADA vyžaduje, aby všechny firmy otevřené veřejnosti zajistily rovný přístup lidem s postižením. Patří sem weby a online služby. Zákon nedělá výjimky pro malé firmy ani online prodejce.
Váš e-shop se podle ADA počítá jako veřejně přístupné zařízení. To znamená, že váš web musí být přístupný. Nemůžete namítat, že je e-shop příliš malý, příliš nový nebo že je přístupnost příliš drahá. Zákon platí. Soudy opakovaně rozhodly, že se ADA vztahuje na weby, a ministerstvo spravedlnosti USA prohlásilo, že přístupnost webu je otázka občanských práv, ne volitelná věc.
WCAG 2.1 úroveň AA: standard přístupnosti
Standard přístupnosti webu, který se používá v právních sporech a požadavcích na soulad, se jmenuje WCAG (Web Content Accessibility Guidelines) 2.1 úroveň AA. WCAG spravuje World Wide Web Consortium (W3C), nezisková organizace, která stanovuje standardy pro web.
WCAG 2.1 úroveň AA obsahuje pokyny ve čtyřech hlavních oblastech:
Vnímatelné: uživatelé váš obsah vidí nebo slyší
Obsah musí být podán způsoby, které zákazníci mohou vnímat. Znamená to dát všem produktovým obrázkům textový popis (alt text), přidat k videím titulky, zajistit, aby text a tlačítka měly dostatečný barevný kontrast (minimální poměr 4.5:1 u běžného textu), a vyhnout se obsahu, který bliká více než 3krát za sekundu, což může vyvolat záchvaty.
Ovladatelné: uživatelé se po e-shopu pohybují a mohou s ním pracovat
Uživatelé musí být schopni e-shop procházet jen klávesnicí (bez myši). Odkazy a tlačítka musí být dostupné z klávesnice. Formuláře musí mít srozumitelné popisky, kterým odečítače rozumějí. E-shop nesmí uvěznit uživatele klávesnice v nekonečných smyčkách ani vyžadovat časované interakce, které uživatelé nemohou upravit. Položky nabídky a pole formulářů musí být snadné najít a používat.
Srozumitelné: uživatelé chápou, co váš e-shop říká a dělá
E-shop musí být snadno srozumitelný. Používejte jasný jazyk a krátké věty. Odborné výrazy vysvětlete při prvním použití. Stránky uspořádejte logicky se správnou strukturou nadpisů (jeden H1 na stránku, potom H2 a H3 v pořadí). Chyby při ověření formuláře vysvětlujte jasně. Web dělejte konzistentní, aby uživatelé mohli odhadnout, jak fungují navigace a interakce.
Robustní: váš e-shop funguje s asistivními technologiemi
Kód musí být napsaný správně, aby mu odečítače obrazovky a další asistivní nástroje rozuměly. Znamená to používat správné sémantické značky HTML (tlačítka jsou skutečné prvky button, ne divy upravené tak, aby jako tlačítka vypadaly), správnou hierarchii nadpisů a popisky ARIA tam, kde je potřeba popsat složité interaktivní prvky. E-shop by měl fungovat napříč prohlížeči a zařízeními.
Časté bariéry přístupnosti v e-shopech
Toto jsou nejčastější problémy s přístupností, které se v e-shopech najdou:
Chybějící nebo špatný alt text u produktových obrázků
Mnoho e-shopů nemá u produktových obrázků žádný alt text, nebo má vágní alt text jako "obrázek" nebo "foto produktu". Uživatelé odečítačů obrázky nevidí. Alt text musí popsat, co je na obrázku důležité. U červeného trička je dobrý alt text "červené bavlněné tričko s kulatým výstřihem a kapsou vpředu", ne "tričko" nebo "červené tričko foto". U výběru varianty produktu může alt text jasně popsat barevný vzorek nebo možnost stylu. Každý produktový obrázek potřebuje přesný, popisný alt text.
Formuláře bez správných popisků
Když pole formuláře (e-mail, telefon, adresa) nemá přiřazený popisek nebo je popisek jen vizuální zástupný text, uživatelé odečítačů nevědí, co mají zadat. Správně popsané formuláře mají neviditelné, ale přístupné prvky label, které odečítačům říkají, k čemu každé pole slouží.
Žádné ovládání klávesnicí
Některé weby vyžadují myš k procházení nebo dokončení nákupu. Uživatelé jen s klávesnicí nemohou používat rozbalovací nabídky, nevidí, která položka je zvýrazněná, nebo nemohou procházet pole formuláře klávesou Tab v logickém pořadí. Každá funkce by měla být dostupná z klávesnice. Zvýraznění fokusu klávesnice by mělo být na stránce vidět, aby uživatelé věděli, kde jsou.
Špatný barevný kontrast
Světle šedý text na bílém pozadí vám možná připadá čitelný. Lidem se slabým zrakem čitelný není. WCAG úroveň AA vyžaduje poměr kontrastu alespoň 4.5:1 u běžného textu. Tlačítka, odkazy a každý text, který uživatelé potřebují číst, musí tento standard splňovat. Kontrast zkontrolujte bezplatným nástrojem pro kontrolu kontrastu.
Matoucí struktura nadpisů
Uživatelé odečítačů často procházejí stránky skoky mezi nadpisy. Pokud stránka skáče z H1 na H3 a potom na H2 nebo používá nadpisy jen kvůli stylu, odečítače vytvoří matoucí zážitek. Používejte nadpisy v logickém pořadí. Jeden H1 na stránku, potom H2 pro hlavní sekce a H3 pro podsekce. Nikdy nepřeskakujte úrovně nadpisů.
Tlačítka a odkazy bez jasného účelu
Tlačítko s textem "klikněte sem" neříká uživatelům odečítačů nic o tom, co kliknutí udělá. Používejte popisný text tlačítek: "Přidat do košíku", "Zobrazit recenze", "Přejít k pokladně". Pokud potřebujete tlačítko s ikonou, přidejte text nebo popisek ARIA, který akci popisuje. Každý interaktivní prvek musí mít jasný, popisný popisek.
Nepřístupné rozbalovací nabídky a filtry
Nabídky produktových filtrů, rozbalovací seznamy kategorií a možnosti řazení, které fungují jen myší, jsou častou bariérou. Uživatelé klávesnice k nim potřebují přístup stejným způsobem. Složité interaktivní komponenty potřebují role ARIA a podporu klávesnice, aby fungovaly s asistivní technologií.
Jak zpřístupnit váš e-shop
Přístupnost nevyžaduje najímat drahého konzultanta ani kupovat specializovaný software. Začněte základy:
1. Napište alt text ke všem produktovým obrázkům
Je to jediná změna s největším dopadem. Projděte produkty a napište popisný alt text ke každému obrázku. Popište produkt, jeho barvu, materiál, stav a výrazné vlastnosti. Alt text vyzkoušejte přečtením nahlas. Rozumí produktu člověk, který obrázek nevidí? Pokud ne, vylepšete ho.
2. Zajistěte, aby všechny formuláře měly správné popisky
Každé pole formuláře musí mít v kódu přiřazený prvek label. Nespoléhejte na zástupný text. Odstraňte zástupný text, jakmile je pole aktivní, nebo ho ponechte a přidejte skutečný popisek. Zaškrtávací políčka a přepínače seskupte a jasně popište. Chyby při ověření formuláře by měly být konkrétní a říkat uživatelům přesně, co opravit.
3. Ověřte, že funguje ovládání klávesnicí
Vyzkoušejte celý e-shop jen klávesnicí. Pohybujte se klávesou Tab. Dostanete se ke každému tlačítku, odkazu a formuláři? Vidíte, kde je fokus? Je pořadí tabulátoru logické (zleva doprava, shora dolů)? Pokud uživatelé klávesnice uvíznou nebo se k něčemu nedostanou, opravte to. Většina bariér přístupnosti jsou bariéry klávesnice.
4. Zkontrolujte a zlepšete barevný kontrast
Použijte bezplatný nástroj pro kontrolu kontrastu na stránce produktu, tlačítkách, odkazech a popiscích formulářů. Zajistěte, aby text splňoval kontrast 4.5:1 u běžného textu a 3:1 u velkého textu (18 bodů nebo větší). Nespoléhejte jen na barvu při předávání informací (například "červené položky jsou ve slevě"). Význam podpořte textovými popisky nebo ikonami.
5. Opravte strukturu nadpisů
Zkontrolujte strukturu stránky. Měli byste mít jeden H1 (hlavní nadpis stránky), potom H2 pro hlavní sekce a H3 pro podsekce. Nikdy nepřeskakujte úrovně nadpisů. Nadpisy používejte ke strukturování obsahu, ne ke stylování. Pokud potřebujete stylovaný text, který není skutečný nadpis, použijte div a CSS, ne značku nadpisu.
6. Pište jasné texty odkazů a tlačítek
Uživatelé odečítačů si často zobrazí seznam všech odkazů na stránce. Odkazy by měly dávat smysl i bez okolí. "Zjistěte víc o možnostech dopravy" je lepší než "zjistit víc". "Zobrazit recenze produktu" je lepší než "číst recenze". Tlačítka by měla jasně popisovat svou akci: "Přidat do košíku", "Přejít k pokladně", "Uložit na později".
7. Vyzkoušejte s asistivní technologií
Stáhněte si bezplatný odečítač obrazovky, například NVDA (pro Windows), nebo použijte vestavěné nástroje přístupnosti v Macu a iPhonu. Poslechněte si, jak váš web zní. Zvládnete dokončit nákup jen klávesnicí a odečítačem? To je skutečná zkouška přístupnosti. Mnoho bariér se ukáže, když se pokusíte svůj e-shop používat jako nevidomý uživatel nebo uživatel jen s klávesnicí.
Testování a audit přístupnosti
Po úpravách e-shop otestujte na přístupnost. Začněte těmito nástroji:
Automatizované testovací nástroje
Bezplatné automatické nástroje, například Lighthouse (součást Chromu), projdou vaše stránky a označí běžné problémy, jako je chybějící alt text, nízký kontrast a špatná struktura nadpisů. Tyto nástroje zachytí asi 30% problémů s přístupností, takže jsou začátek, ne úplná odpověď. Použijte je na rychlou kontrolu, ale nepředpokládejte, že čistý výsledek znamená plně přístupný web.
Testování klávesnicí
Procházejte web jen klávesami Tab, Shift+Tab, Enter a šipkami. Žádná myš. Je to nejdůležitější test. Zvládnete každý úkol? Uvíznete? Je fokus vidět? Dává pořadí tabulátoru smysl? Pokud je ovládání klávesnicí rozbité, váš e-shop standard přístupnosti nesplňuje, ať říkají automatizované nástroje cokoli.
Testování odečítačem obrazovky
Poslechněte si web v odečítači NVDA (Windows) nebo VoiceOver (Mac). Popisuje odečítač produktové obrázky srozumitelně? Rozumíte popiskům formulářů? Dává navigace smysl? Jsou na stránce nevysvětlená tlačítka nebo odkazy? Profesionální audity přístupnosti často najímají nevidomé testery, kteří váš web používají, ale hlavní problémy odhalíte i vlastním základním testem s odečítačem.
Ruční kontrola kódu
Zkontrolujte, zda HTML kód používá správné sémantické značky. Tlačítka by měla být prvky button, ne upravené divy. Odkazy by měly být značky anchor. Pole formulářů potřebují prvky label. Nadpisy by měly být značky h1, h2, h3 v pořadí, ne h1, h3, h2. Dobré sémantické HTML je základ přístupnosti.
Jak WEMASY pomáhá s přístupností
Tvůrce webů od WEMASY je postavený s ohledem na přístupnost. Platforma obsahuje sémantickou strukturu HTML, správnou práci s formuláři s přístupnými popisky, nabídky a funkce košíku ovladatelné klávesnicí a nástroje, které usnadňují přidání alt textu k obrázkům. Když e-shop postavíte ve WEMASY, podkladové HTML je už pro přístupnost připravené. Od platformy nezdědíte nepřístupný kód.
Neznamená to, že je váš web automaticky plně přístupný. Stále musíte napsat dobrý alt text, používat srozumitelný jazyk a testovat se skutečnými uživateli. Základ ve WEMASY ale odstraňuje mnoho běžných bariér, které trápí jiné e-shopové platformy. Co obsahuje který tarif, najdete v našem ceníku.
Obchodní přínos přístupnosti
Kromě souladu se zákonem je přístupnost dobrý byznys. Přístupné weby se lépe používají pro všechny, nejen pro lidi s postižením. Srozumitelný jazyk, dobrý kontrast, logická struktura a ovládání klávesnicí prospívají starším uživatelům, uživatelům mobilních zařízení, uživatelům v hlučném prostředí i uživatelům s pomalým internetem. Web přístupný lidem s postižením je lepší web pro všechny uživatele.
A přímo řečeno: každý čtvrtý dospělý v USA má postižení. To je zhruba 65 milionů lidí. Pokud váš e-shop není přístupný, vylučujete obrovský trh. Necháváte také peníze ležet na stole. Nevidomí a slabozrací nakupující utratí online miliardy. Chtějí nakupovat u vás. Umožněte jim to.
Po právní stránce je riziko skutečné. V roce 2025 bylo podáno přes 5,000 žalob kvůli přístupnosti webů. E-shopy tvoří 70% těchto případů. Výzva kvůli porušení přístupnosti stojí čas a právní poplatky na obranu. Vyrovnání bez opravy podkladových problémů jen láká další nároky. Nejchytřejší přístup je opravit web hned, zdokumentovat své úsilí a problému se úplně vyhnout.
Jak začít
Pokud váš e-shop není přístupný, nepropadejte panice. Začněte opravami s největším dopadem: alt text, ovládání klávesnicí a kontrast. Tyto tři změny zachytí většinu bariér přístupnosti. Otestujte ovládání klávesnicí a odečítač obrazovky. Opravte, co najdete. Zdokumentujte svou práci. Testujte pravidelně, zvlášť po úpravách webu. Přístupnost není jednorázový projekt, je to průběžná praxe inkluzivního tvoření.
Časté dotazy
Vztahuje se ADA opravdu i na můj malý e-shop?
Ano. ADA se vztahuje na všechny firmy otevřené veřejnosti bez ohledu na velikost. Pro malé firmy neexistuje žádná výjimka. Pokud prodáváte online, váš web zákon pokrývá.
Jaký je rozdíl mezi přístupným a vyhovujícím?
Přístupný znamená, že váš web lidé s postižením skutečně mohou používat. Vyhovující znamená, že splňuje technický standard, například WCAG 2.1 úroveň AA. Web může standard technicky splňovat a přesto se špatně používat, nebo se může používat velmi dobře a technicky nebýt dokonalý. Cílem je obojí: přístupný v praxi a vyhovující standardu.
Musím někoho najmout, aby můj e-shop zpřístupnil?
Ne nutně. Pokud má váš e-shop základní problémy (chybějící alt text, špatný kontrast, nefunkční ovládání klávesnicí), mnoho z nich opravíte sami. Napište alt text, zkontrolujte kontrast bezplatným nástrojem, vyzkoušejte klávesnici a odečítač obrazovky. Pokud je váš web postavený na moderní platformě se správnou strukturou HTML, oprava přístupnosti bývá přímočará. Větší weby se složitými funkcemi mohou těžit z profesionálního auditu, ale malé e-shopy často největší bariéry opraví vlastními silami.
Co když dostanu výzvu kvůli přístupnosti?
Berte ji vážně. Neignorujte ji. Výzvy obvykle dávají lhůtu na opravu problémů. Spolupracujte s vývojářem nebo podporou platformy a řešte konkrétní uvedená porušení. Zdokumentujte všechno, co uděláte. Můžete také chtít konzultovat právníka, který zná právo přístupnosti. Vyrovnání bez opravy podkladových problémů není dlouhodobé řešení. Opravte web.
Zpomalí zpřístupnění webu načítání?
Ne. Přístupnost a výkon spolu nesouvisejí. Web může být rychlý a nepřístupný, nebo pomalý a přístupný. Sémantické HTML (struktura kódu potřebná pro přístupnost) bývá lehčí a rychlejší než špatně napsaný kód. Mnoho vylepšení přístupnosti, například správná struktura nadpisů a srozumitelný jazyk, na rychlost nemá žádný vliv.
Pokrývá WCAG 2.1 úroveň AA všechno, co potřebuji pro právní soulad?
WCAG 2.1 úroveň AA je standard, na který se odkazuje většina právních případů kvůli přístupnosti. Je to měřítko, kterým soudy posuzovaly, zda je web přístupný. Soulad s WCAG 2.1 úrovní AA je nejlepší způsob, jak doložit, že jste přístupnost brali vážně a splnili právní standard.
Související čtení: Zásady ochrany osobních údajů, souhlas s cookies a GDPR pro váš e-shop a Jak chránit svou značku a produkty před kopírováním.