Přejít na obsah
Pandus
cs Změnit jazyk
Menu

Test přístupnosti e-shopu za 30 minut: návod pro Shoptet, WooCommerce i Shopify

· Čtení na 4 min

Základní test přístupnosti e-shopu zvládnete sami za 30 minut: spusťte automatickou kontrolu na košíku a detailu produktu, projděte nákup jen klávesnicí, zvětšete stránku na 200 %, zkontrolujte kontrast a formuláře a vše zopakujte na mobilu. Výsledek nenahradí úplný audit, ale ukáže, kde je potřeba začít. Ve druhé části článku vysvětlujeme, odkud se chyby na Shoptetu, WooCommerce a Shopify obvykle berou.

Než začnete

Připravte si:

  • e-shop otevřený v počítači a na mobilu,
  • jeden typický produkt s variantami (velikost, barva),
  • testovací účet nebo možnost dojít v objednávce až k výběru platby,
  • papír nebo tabulku, kam si zapíšete, kde a co nefungovalo.

Nehledejte dokonalost. Cílem je najít bariéry, které zákazníkovi zabrání nakoupit.

Minuty 0–5: automatická kontrola

Spusťte automatickou kontrolu podle WCAG 2.2 AA na dvou stránkách: detailu produktu a košíku. Můžete použít naši bezplatnou kontrolu. Typicky najde:

  • obrázky produktů bez alternativního textu,
  • text s nízkým kontrastem, často šedé ceny nebo podmínky dopravy,
  • formulářová pole bez popisku,
  • tlačítka s ikonou (košík, srdíčko, lupa) bez přístupného názvu,
  • chybějící označení jazyka stránky.

Automatický nástroj najde jen část problémů. Studie britské GDS a společnosti Deque se v číslech liší, shodují se ale v tom, že bez ručního testu chybí podstatná část obrazu. Proto pokračujte dalšími kroky.

Minuty 5–15: jen klávesnice

Odložte myš. Klávesou Tab procházejte stránku dopředu, Shift+Tab zpět, Enter a mezerníkem aktivujte prvky.

  1. Z úvodní stránky se dostaňte do kategorie přes hlavní menu.
  2. Použijte filtr, otevřete produkt a vyberte variantu.
  3. Vložte produkt do košíku a pokračujte do objednávky až k výběru platby.

Sledujte:

  • Vidíte vždy, kde je fokus? Pokud zmizí, zákazník neví, kde je.
  • Nezaseknete se? Častou pastí je vyskakovací okno, cookie lišta nebo chat, ze kterého se klávesnicí nedostanete.
  • Dá se rozbalit menu a filtr bez myši?
  • Je pořadí logické? Fokus by neměl skákat napříč stránkou.

Minuty 15–20: zvětšení na 200 %

Zvětšete stránku v prohlížeči na 200 % a projděte stejný postup. Nepřekrývají se texty? Nezmizelo tlačítko „Do košíku“ mimo obrazovku? Nevznikl vodorovný posuvník u celé stránky?

Minuty 20–25: kontrast a formuláře

  • Kontrast: běžný text potřebuje poměr alespoň 4,5 : 1 vůči pozadí. Ověříte ho v kontrole kontrastu barev.
  • Popisky polí: klikněte na text u pole. Pokud se kurzor přesune do pole, popisek je správně propojený. Placeholder uvnitř pole popisek nenahrazuje.
  • Chybová hlášení: odešlete objednávkový formulář prázdný. Je jasné, které pole je chybně a proč? Je chyba vyjádřena i textem, nejen červenou barvou?

Minuty 25–30: mobil

Na telefonu zkontrolujte, zda jsou tlačítka dost velká a dostatečně od sebe, zda nic nepřekrývá obsah (lepicí lišty, chat, cookie banner) a zda funguje stránka na šířku i na výšku.

Máte-li čas navíc, vyzkoušejte čtečku obrazovky: VoiceOver na iPhonu nebo Macu, NVDA ve Windows. Projděte košík a poslechněte si, jak zní tlačítka a pole. Kritéria, na která se zaměřit, shrnuje checklist WCAG 2.2 pro e-shopy.

Kde chyby vznikají: Shoptet, WooCommerce, Shopify

Na všech platformách mají chyby podobné zdroje. Rozlišit je se vyplatí, protože každý zdroj se opravuje jinak.

Šablona (téma)

Většina opakujících se chyb pochází ze šablony: kontrast barev, viditelnost fokusu, menu, které jde rozbalit jen myší, tlačítka s ikonou bez názvu. Oprava v šabloně pomůže na všech stránkách najednou.

  • Shoptet: zkontrolujte, zda vybraná šablona a její nastavení barev umožňují dostatečný kontrast, a vlastní úpravy vzhledu (CSS) projděte s ohledem na fokus. Co nejde změnit v administraci, řešte s autorem šablony nebo s podporou platformy.
  • WooCommerce: chyby často vznikají v tématu a jeho podřízeném tématu (child theme). Při výběru tématu se vyplatí dívat se, zda autor uvádí podporu přístupnosti, a po aktualizaci tématu kontrolu zopakovat.
  • Shopify: podobně rozhoduje téma a jeho sekce. Po úpravách v editoru tématu spusťte kontrolu znovu.

Doplňky, pluginy a aplikace

Slidery, recenze, chaty, cookie lišty a pop-upy přidávají vlastní kód. Bývají zdrojem pastí pro klávesnici a tlačítek bez názvu. Pokud chyba sídlí v doplňku, nahlaste ji dodavateli, nebo zvažte jiný doplněk. Pro WordPress a WooCommerce máme plugin pro kontrolu přístupnosti, který ukazuje chyby přímo u stránek a produktů.

Obsah

Alternativní texty obrázků, nadpisy v popisech produktů, odkazy typu „klikněte zde“, tabulky velikostí vložené jako obrázek. To opravuje ten, kdo obsah vkládá, ne programátor. Pomůže krátký návod pro tým.

Vlastní kód

Úpravy na zakázku, vlastní objednávkový krok nebo konfigurátor produktu. Tady je potřeba vývojář a ruční test.

Co s výsledky

  1. Seřaďte nálezy podle dopadu: nejdřív vše, co blokuje objednávku.
  2. U každé chyby určete zdroj: šablona, doplněk, obsah, nebo vlastní kód.
  3. Opravujte v šablonách, ne stránku po stránce.
  4. Po každé větší aktualizaci test zopakujte.

Pokud se na váš e-shop vztahuje zákon č. 424/2023 Sb., výsledky vám pomohou i s informacemi o přístupnosti služby, konkrétně s částí o známých omezeních. Zda se vás zákon týká, zjistíte v kontrole e-shopu podle EAA. Kdy dává smysl objednat i ruční test nebo úplný audit, popisuje stránka audit přístupnosti webu.

Naše služba je automatická kontrola, ne úplný audit, a není to právní poradenství. Report v češtině obsahuje postupy pro Shoptet, WooCommerce, Shopify a PrestaShop a týdenní monitoring hlídá nové chyby po aktualizacích.

Zdroje

Další články