Jak zpřístupnit váš WooCommerce e-shop: praktický průvodce

9. června 2026

Stručná odpověď. WooCommerce samotné se pokyny WordPressu pro přístupnost řídí celkem slušně, ale váš e-shop dědí přístupnost hlavně po vaší šabloně, vašich pluginech a vašem obsahu — a tam se to obvykle kazí. Projděte šest bodů níže (kontrast, alternativní texty, nadpisy, pluginy a page buildery, klávesnice, jazyk) a dejte si zvlášť pozor na blokovou pokladnu a produktové filtry; pak máte lví podíl vyřešený.

Proč samotné WooCommerce nestačí?

WooCommerce je plugin nad WordPressem. Zda váš obchod vyhovuje WCAG, závisí na tom, jak je postavená vaše šablona, jaké barvy jste zvolili, jaké pluginy a page builder používáte a jak jste vyplnili své produkty. Dva obchody na stejné verzi WooCommerce tak mohou dopadnout úplně různě. Dobrá zpráva: protože se hodně věcí opakuje přes šablonu a templaty, jedna oprava často pokryje stovky stránek.

1. Zkontrolujte barevný kontrast

Nejčastější chyba. U blokové šablony (Full Site Editing) přejděte na Vzhled → Editor → Styly → Barvy; u klasické šablony na Vzhled → Přizpůsobit → Barvy. Zajistěte, aby text a pozadí měly kontrast alespoň 4,5:1 (3:1 u velkého textu). Pozor zejména na text přímo na tlačítku Do košíku, cenové a akční štítky a odkazy. Jednou správně nastavíte a platí to pro celý obchod. Viz barevný kontrast: požadavek WCAG a jak ho měřit.

2. Dejte produktovým fotkám alternativní texty

Otevřete produkt v sekci Produkty, klikněte v Obrázku produktu (a Galerii produktu) na obrázek → v knihovně médií vyplňte pole Alternativní text. Stručně a věcně popište, co je na něm (např. „Černá pánská semišová bota se šněrováním"), žádný marketingový jazyk. Začněte u nejprodávanějších produktů a bannerů na úvodní stránce. Dekorativní obrázky dostanou prázdný alt (alt=""). Více v článku jak psát alternativní texty, které fungují.

3. Zkontrolujte strukturu nadpisů

Používejte nadpisy v logickém pořadí (H1 → H2 → H3), a ne jen kvůli vzhledu. V blokovém editoru (Gutenberg) vidíte u každého bloku nadpisu jeho úroveň; nepřeskakujte úrovně. Pozor na page buildery jako Elementor nebo Divi: ty vám dovolí jakýkoli text zvětšit, aniž by se stal skutečným nadpisem — vědomě tam volte správnou úroveň nadpisu.

4. Hlídejte si pluginy a page builder

To bývá největší zdroj problémů. Pluginy pro recenze, chat, vyskakovací okna, slidery a filtry — a těžké page buildery — vstřikují do vaší šablony vlastní kód, a ten často obsahuje tlačítka bez názvu, chybné ARIA atributy nebo prvky, které nelze ovládat klávesnicí. Neinstalujte tedy slepě každý plugin a testujte web vždy se vším zapnutým. Ukáže-li se plugin jako nepřístupný, přejděte na alternativu, která normy WCAG respektuje. Kde to jde, volte nové bloky WooCommerce pro košík a pokladnu (viz bod 6).

5. Otestujte web klávesnicí

Zkuste svůj web projít úplně bez myši: jen klávesou Tab a Enterem. Dostanete se ke všemu — menu, produktové filtry, výběr variant, košík, pokladna — a vidíte pokaždé, kde stojí fokus? U WooCommerce si dejte konkrétně pozor na rozbalovací nabídky variant, stepper množství (+/−) a filtrovací widgety v postranním panelu; to jsou místa, kde se klávesnice nejčastěji zasekne.

6. Zkontrolujte nastavení jazyka a svou pokladnu

Zajistěte, aby šablona nastavovala správný jazykový atribut, aby čtečka obrazovky zvolila správnou výslovnost. V klasické šabloně je v header.php řádek <html <?php language_attributes(); ?>> — ten má jazykový atribut obsahovat. Používáte-li WPML nebo Polylang pro více jazyků, zkontrolujte, že každá jazyková verze dostane správný atribut lang. Přejděte pokud možno na blokové bloky Cart a Checkout od WooCommerce: jsou přístupnější než stará shortcode pokladna a jejich přístupnost se aktivně udržuje.

Časté chyby ve WooCommerce a jejich oprava

Prvek WooCommerce	Častá chyba	Oprava
Tlačítko „Do košíku"	příliš světlé písmo / nízký kontrast	kontrast ve stylech šablony alespoň 4,5:1
Produktové fotky	název souboru místo popisu (`IMG_2043.jpg`)	funkční alternativní text v knihovně médií
Stepper množství (`+`/`−`)	tlačítka bez popisku, nelze ovládat klávesnicí	doplnit popisek/`aria-label` nebo použít přístupnou variantu
Widget produktových filtrů	filtry použitelné jen myší	přístupný filtrovací plugin nebo filtrovací bloky WooCommerce
Plugin pro přístupnost	instalace overlay widgetu	vyhnout se — neopravuje váš kód a nechrání před žalobami

Pomůže plugin pro přístupnost z adresáře pluginů WordPressu?

Ne. Když vyhledáte „accessibility", najdete desítky pluginů, které slibují, že váš obchod jedním kliknutím zkompliantní pomocí widgetu. Nenaleťte: vaši šablonu ani templaty neopravují a dozorové orgány kontrolují surový zdrojový kód vašeho obchodu. Systematická oprava v šabloně a obsahu je jediná cesta, která obstojí — a navíc vám přinese lepší SEO a rychlejší načítání. Více v článku proč vás overlay widget nechrání.

Vyhovuje tím můj WooCommerce obchod zákonu?

Těchto šest bodů pokrývá většinu toho, co zjistí automatizovaný test, ale „vyhovět" znamená víc: záleží na celé vaší šabloně, pluginech a obsahu dohromady. Zda se na vás vztahuje European Accessibility Act, zjistíte v našem kontrolním seznamu. Pracujete také se Shopify? Pak vám pomůže náš průvodce pro Shopify.

Jak zjistím, kde můj WooCommerce obchod stojí teď?

Nejrychlejší cesta: naskenujte zdarma jednu stránku. U každého nálezu uvidíte, co je špatně a jak to opravit — a protože hodně věcí běží přes šablonu a templaty, vyřešíte to často jedním zásahem pro celý obchod. Za méně než 60 sekund, bez registrace.