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

10 nejčastějších chyb přístupnosti v e-shopech

· Čtení na 4 min

Nejčastější chyby přístupnosti v e-shopech jsou formulářová pole bez popisku, obrázky bez alternativního textu, nízký kontrast textu, tlačítka a odkazy bez přístupného názvu a neviditelný fokus. Většinu z nich najde automatická kontrola a jejich oprava bývá jednoduchá. Níže je projdeme jednu po druhé, s vysvětlením, proč vadí zákazníkům, a s postupem opravy.

Seznam vychází z pravidel WCAG 2.2 AA a z typů nálezů, které hlásí open-source knihovna axe-core. Pořadí neodpovídá statistice, ale tomu, jak moc chyba brání nákupu.

1. Pole formuláře bez popisku

Co se děje: v pokladně je pole s šedým textem „E-mail“ uvnitř (placeholder), ale bez skutečného popisku. Po kliknutí text zmizí a čtečka obrazovky ohlásí jen „editační pole“.

Oprava: každé pole potřebuje viditelný popisek propojený s polem v kódu (prvek label s atributem for). Placeholder může zůstat jako příklad, ne jako popisek. WCAG 1.3.1, 3.3.2, 4.1.2.

2. Obrázky produktů bez alternativního textu

Co se děje: fotka produktu nemá atribut alt, nebo obsahuje název souboru jako „IMG_2041.jpg“. Nevidomý zákazník neví, co je na obrázku.

Oprava: u hlavní fotky popište, co je pro nákup důležité, například „Dámská bunda, tmavě modrá, s kapucí“. Dekorativní obrázky označte prázdným alt="". V Shoptetu, Shopify i WooCommerce se alternativní text vyplňuje v administraci u obrázku. WCAG 1.1.1.

3. Nízký kontrast textu

Co se děje: světle šedý text na bílém pozadí, bílý text na pastelovém tlačítku, cena v jemné barvě. Špatně se čte na slunci, na levném displeji i se zhoršeným zrakem.

Oprava: běžný text potřebuje kontrast nejméně 4,5 : 1, velký text 3 : 1. Upravte barvy v nastavení šablony. WCAG 1.4.3.

4. Tlačítka a odkazy bez názvu

Co se děje: ikona košíku, lupa vyhledávání, srdíčko „oblíbené“ nebo křížek pro zavření okna nemají textový název. Čtečka ohlásí jen „tlačítko“.

Oprava: doplňte přístupný název, například skrytý text nebo atribut aria-label="Přidat do oblíbených". WCAG 4.1.2, 2.4.4.

5. Neviditelný fokus

Co se děje: šablona v CSS odstraní obrys fokusu (outline: none), aby web „vypadal čistěji“. Uživatel klávesnice pak neví, kde se nachází.

Oprava: vraťte výrazný viditelný fokus, ideálně stejný na celém webu. WCAG 2.4.7. Ve WCAG 2.2 navíc nesmí fokus zakrývat lepící hlavička nebo cookie lišta (2.4.11).

6. Prvky, které nejdou ovládat klávesnicí

Co se děje: výběr velikosti je vytvořený z prvků div reagujících jen na myš, rozbalovací menu se otevírá jen najetím myši, posuvník ceny jde jen táhnout.

Oprava: používejte nativní prvky (button, select, input) nebo doplňte ovládání klávesnicí a správné role. Posuvník doplňte o pole pro zadání ceny. WCAG 2.1.1, 2.5.7.

7. Chybějící jazyk stránky

Co se děje: v kódu chybí lang="cs", případně má česká verze nastavenou angličtinu. Čtečka pak čte český text s anglickou výslovností.

Oprava: nastavte správný jazyk v šabloně pro každou jazykovou verzi. WCAG 3.1.1.

8. Rozbitá struktura nadpisů

Co se děje: nadpisy se volí podle velikosti písma, ne podle významu. Stránka nemá hlavní nadpis, nebo jich má pět.

Oprava: každá stránka má jeden hlavní nadpis a podnadpisy v logickém pořadí. Uživatelé čteček podle nadpisů procházejí stránku. WCAG 1.3.1.

9. Chybové hlášky, které nikdo neslyší

Co se děje: po odeslání formuláře se pole zbarví červeně, ale chyba není popsaná textem nebo ji čtečka neoznámí. Zákazník neví, proč objednávka neprošla.

Oprava: chybu popište textem u pole („Zadejte PSČ ve tvaru 110 00“), propojte ji s polem a oznamte ji. WCAG 1.4.1, 3.3.1, 4.1.3.

Co se děje: cookie lišta nebo okno se slevou zachytí fokus, nedá se zavřít klávesnicí, nebo zakryje obsah stránky.

Oprava: okno musí jít zavřít klávesou Esc a tlačítkem s názvem, fokus se má po zavření vrátit tam, kde byl. WCAG 2.1.2, 2.4.3, 2.4.11.

Kde chyby hledat v Shoptetu, Shopify a WooCommerce

  • Šablona (téma). Barvy, fokus, hlavička, menu, tlačítka a struktura nadpisů pocházejí ze šablony. U Shoptetu a Shopify je opravuje autor šablony nebo vývojář přes úpravy šablony, u WooCommerce vývojář v tématu nebo child tématu.
  • Doplňky a pluginy. Recenze, chat, vyhledávání, filtry nebo cookie lišta často přidávají vlastní kód. Pokud chyba pochází z doplňku, nahlaste ji jeho dodavateli nebo zvažte alternativu.
  • Obsah. Alternativní texty, nadpisy v popisech produktů, odkazy a tabulky velikostí vytváříte vy v administraci. Tady pomůže krátké školení lidí, kteří produkty zakládají.

Naše karty pravidel u každé chyby uvádějí, ve které z těchto vrstev obvykle vzniká a kde ji na dané platformě opravit.

Jak opravy naplánovat

  1. Seřaďte nálezy podle závažnosti a podle toho, na kolika stránkách se opakují.
  2. Opravte nejdřív šablonu: jedna oprava se projeví na stovkách stránek.
  3. Pak projděte pokladnu a košík ručně klávesnicí.
  4. Obsah opravujte průběžně, nejdřív u nejprodávanějších produktů.
  5. Po každé aktualizaci šablony nebo doplňku spusťte kontrolu znovu.

Co mají tyto chyby společného

Většina z nich vzniká v šabloně, a proto se opakuje na stovkách stránek najednou. Oprava v šabloně tak často vyřeší velkou část nálezů. Druhá skupina vzniká v obsahu: alternativní texty, nadpisy v popisech produktů, odkazy „zde“. Tu musí hlídat lidé, kteří obsah přidávají.

Body 1 až 4, 7 a 8 obvykle najde automatická kontrola. Body 5, 6, 9 a 10 automatika najde jen zčásti, protože vyžadují ověření, jak se web chová při skutečném ovládání. Proto k automatické kontrole patří i krátký ruční test klávesnicí.

Další kroky

Naše karty pravidel ke každé chybě uvádějí postup opravy pro Shoptet, Shopify, WooCommerce a PrestaShop. Jde o automatizovanou kontrolu, nikoli úplný audit. Vyzkoušejte bezplatnou kontrolu jedné stránky.

Další články