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

5. června 2026

Stručná odpověď. Shopify pokládá dobrý základ, ale přístupný e-shop „z krabice" nedodává. Většina chyb sedí ve vaší šabloně, ve vašem obsahu a ve vašich aplikacích — a právě ty často vyřešíte napříč celou šablonou jedním zásahem. Projděte šest bodů níže (kontrast, alternativní texty, nadpisy, aplikace, klávesnice, jazyk) a máte lví podíl vyřešený.

Proč samotné Shopify nestačí?

Šablona Shopify je předloha. Zda váš web vyhovuje WCAG, závisí na tom, jak je ta šablona postavená, jaké barvy jste zvolili, jaké aplikace jste nainstalovali a jak jste vyplnili své produkty. Dva obchody na stejné šabloně tak mohou dopadnout úplně různě. Dobrá zpráva: protože se hodně věcí opakuje přes šablonu, jedna oprava často pokryje stovky stránek.

1. Zkontrolujte barevný kontrast

Nejčastější chyba. V administraci přejděte na Online Store → Themes → Customize → Theme settings (ozubené kolo) → Colors a zajistěte, aby text a pozadí měly kontrast alespoň 4,5:1 (3:1 u velkého textu). Pozor zejména na texty tlačítek, cenové štítky, odkazy — a na text přímo na tlačítku Add to cart. 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

Přejděte na Products, otevřete produkt a sjeďte na Media → klikněte na obrázek → Add alt 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="").

3. Zkontrolujte strukturu nadpisů

Používejte nadpisy v logickém pořadí (H1 → H2 → H3), a ne jen kvůli vzhledu. V editoru Shopify vidíte nadpisy ve svých sekcích a rich-text blocích; nepřeskakujte úrovně.

4. Hlídejte si své aplikace

To bývá největší zdroj problémů. Aplikace pro recenze, chat, vyskakovací okna a filtry vstřikují do vaší šablony vlastní kód — pravidelně přes iFramy nebo Shadow DOM — a ten často obsahuje tlačítka bez názvu, chybné ARIA atributy nebo prvky, které nelze ovládat klávesnicí. Neinstalujte tedy slepě každou aplikaci a testujte web vždy se zapnutými aplikacemi. Ukáže-li se aplikace jako nepřístupná, přejděte na alternativu, která normy WCAG respektuje.

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, filtry, košík, pokladna — a vidíte pokaždé, kde stojí fokus? Spousta lidí takhle naviguje a bariéry to odhalí velmi rychle.

6. Zkontrolujte nastavení jazyka

Zajistěte, aby šablona nastavovala správný jazykový atribut, aby čtečka obrazovky zvolila správnou výslovnost. Přejděte na Themes → Actions (⋯) → Edit code, otevřete layout/theme.liquid a zkontrolujte, že tag <html> obsahuje jazykovou proměnnou: <html lang="{{ request.locale.iso_code }}">. Shopify to většinou řeší správně, ale po nasazení překladových aplikací to zkontrolujte znovu.

Časté chyby v Shopify a jejich oprava

Prvek Shopify	Častá chyba	Oprava
Tlačítka	příliš světlé písmo na tlačítku „K pokladně"	kontrast v nastavení šablony alespoň 4,5:1
Produktové fotky	název souboru místo popisu (`product_v2.png`)	doplnit funkční alternativní text přes Media
Vyskakovací košík	zavírací křížek (`X`) bez popisku	`aria-label="Zavřít košík"` v šabloně
Aplikace pro přístupnost	instalace overlay widgetu	vyhnout se — neopravuje váš kód a nechrání před žalobami

Pomůže aplikace pro přístupnost ze Shopify App Store?

Ne. Když v App Store vyhledáte „accessibility", najdete desítky aplikací, které slibují, že váš obchod jedním kliknutím zkompliantní pomocí widgetu. Nenaleťte: vaši základní šablonu 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 Shopify 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ě, aplikacích a obsahu dohromady. Zda se na vás vztahuje European Accessibility Act, zjistíte v našem kontrolním seznamu. A pozor: overlay aplikace to nevyřeší — kód vaší šablony neopravuje.

Jak zjistím, kde můj Shopify 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, vyřešíte to často jedním zásahem pro celý obchod. Za méně než 60 sekund, bez registrace.