Takto vypadá skutečná dokumentace o compliance

Výsledek pro https://seviranta.com/demo-winkel.html

Testováno podle EN 301 549 (WCAG 2.1 AA) + WCAG 2.2 AA pomocí axe-core 4.11.4. Automatizované testování spolehlivě detekuje přibližně 57 % problémů; body ke kontrole vyžadují lidský úsudek. Takto vidíš přesně, co je dané černé na bílém a kde je další zisk na dosah.

Porušení, strojově jistá

• Kritické1× na této stránce

  Co to znamená · Tlačítko bez názvu se přečte jen jako „tlačítko“, pro nevidomé nepoužitelné. Často se týká tlačítka košíku a vyhledávání.

  Jak to opravit · Dejte tlačítku text nebo aria-label popisující akci („Přidat do košíku“, „Hledat“).

  Na vaší stránce

  Špatně · <button class="icon-btn"><span aria-hidden="true">🔍</span></button>

  Správně · <button aria-label="Přidat do košíku"><svg>…</svg></button>

  WCAG wcag2a, wcag412 · Technický název: Buttons must have discernible text · technický zdroj pro vašeho vývojáře

• Závažné7× na této stránce

  Co to znamená · Text s příliš nízkým kontrastem je nečitelný pro slabozraké i při ostrém slunci na displeji telefonu. Jde o zdaleka nejčastější nález podle EAA v e-shopech.

  Jak to opravit · Ztmavte nebo zesvětlete barvu textu či pozadí, dokud poměr kontrastu nedosáhne alespoň 4,5:1 (3:1 u velkého textu). V Shopify: nastavení šablony → barvy; barvy tlačítek a textu upravíte jednou a změna platí pro celou šablonu.

  Na vaší stránce

  Ukázkový textnaměřeno 1,87:1, vyžadováno 4,5:1#b8b2a7 na #f4f1ec

  Ukázkový textnaměřeno 1,52:1, vyžadováno 4,5:1#ffffff na #a8dadc

  Ukázkový textnaměřeno 1,73:1, vyžadováno 4,5:1#c9c4bb na #ffffff

  WCAG wcag2aa, wcag143 · Technický název: Elements must meet minimum color contrast ratio thresholds · technický zdroj pro vašeho vývojáře

• Kritické2× na této stránce

  Co to znamená · Obrázky bez alternativního textu jsou pro odečítače obrazovky neviditelné. U produktových fotografií to znamená, že nevidomý zákazník neví, o jaký produkt jde.

  Jak to opravit · Každému informativnímu obrázku dejte krátký alternativní text popisující, co je na něm. V Shopify: produkt → média → „upravit alternativní text“. Čistě dekorativní obrázky dostanou prázdný alt (alt="").

  Na vaší stránce

  Špatně · <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 140'%3E%3Crect fill='%23dfe7e2' width='220' height='140'/%3E%3Ccircle cx='110' cy='70' r='38' fill='%238aa39b'/%3E%3C/svg%3E" width="220" height="140">

  Správně · <img src="pes.jpg" alt="Hnědé štěně labradora s obojkem">

  …a 1 podobný prvek na této stránce.

  WCAG wcag2a, wcag111 · Technický název: Images must have alternative text · technický zdroj pro vašeho vývojáře

• Kritické1× na této stránce

  Co to znamená · Vstupní pole bez popisku nelze ovládat odečítačem obrazovky a jsou obtížná pro každého s postižením. Týká se polí pro vyhledávání, přihlášení i pokladnu.

  Jak to opravit · Propojte s každým vstupním polem viditelný prvek <label> (přes for/id), nebo použijte aria-label, pokud pro viditelný text není místo.

  Na vaší stránce

  Špatně · <input type="email" name="email">

  Správně · <label for="email">E-mailová adresa</label><input id="email" type="email">

  WCAG wcag2a, wcag412 · Technický název: Form elements must have labels · technický zdroj pro vašeho vývojáře

• Závažné1× na této stránce

  Co to znamená · Odkaz bez čitelného textu (např. pouze ikona) přečte odečítač obrazovky jen jako „odkaz“ bez cíle, návštěvník neví, kam vede.

  Jak to opravit · Dejte odkazu viditelný text, nebo aria-label / skrytý text popisující cíl (např. „Zobrazit košík“ místo holé ikony košíku).

  Na vaší stránce

  Špatně · <a href="#cart"><span aria-hidden="true">🛒</span></a>

  Správně · <a href="/kosik" aria-label="Zobrazit košík"><svg>…</svg></a>

  WCAG wcag2a, wcag244, wcag412 · Technický název: Links must have discernible text · technický zdroj pro vašeho vývojáře

Vyžaduje ruční kontrolu

• Závažné1× na této stránce

  Co to znamená · Text s příliš nízkým kontrastem je nečitelný pro slabozraké i při ostrém slunci na displeji telefonu. Jde o zdaleka nejčastější nález podle EAA v e-shopech.

  Jak to opravit · Ztmavte nebo zesvětlete barvu textu či pozadí, dokud poměr kontrastu nedosáhne alespoň 4,5:1 (3:1 u velkého textu). V Shopify: nastavení šablony → barvy; barvy tlačítek a textu upravíte jednou a změna platí pro celou šablonu.

  Na vaší stránce

  Špatně · <h2>Get 10% off your first order</h2>

  WCAG wcag2aa, wcag143 · Technický název: Elements must meet minimum color contrast ratio thresholds · technický zdroj pro vašeho vývojáře