Ukázka

Ukázkový report: co dostane váš klient

Toto je úplný automatický report o Linden & Loom, smyšleném e-shopu, připravený pod značkou Kestrel & Pine, smyšleného webového studia. Oba názvy jsou pro tuto ukázku vymyšlené; problémy jsou skutečné výsledky našeho skeneru na demo stránkách obchodu.

Otevřít ukázkové PDF Zobrazit ceník

Vaše logo a barva místo našich: na stránce, v PDF i v e-mailech.
V jazyce vašeho klienta: přepněte jazyk webu a uvidíte stejný report v jiném jazyce.
Soukromý odkaz pro vašeho klienta a týdenní kontrola, která porovnává každý výsledek s předchozím.

Ukázka se smyšlenými názvy

Zpráva o přístupnosti

lindenloom.example

Zkontrolováno 12. října 2026 · Připravil: Kestrel & Pine

Nalezené problémy: 36

Typy problémů: 9 · zkontrolované stránky: 3

Kritické: 6
Závažné: 27
Střední: 3
Drobné: 0

Kritické problémy: 6. Mohou části návštěvníků zabránit v nákupu nebo v tom, aby vás kontaktovali.

První obrazovka lindenloom.example, jak ji viděl náš skener. — První obrazovka stránky. Čísla označují problémy ze seznamu níže.

Všechny problémy

Kritické 4 prvky

Některá tlačítka nemají název

WCAG 2.2 4.1.2 (A) Name, Role, Value · EN 301 549 9.4.1.2

Co to znamená pro vaše návštěvníky

Uživatelé čteček obrazovky a hlasového ovládání nepoznají, které tlačítko vkládá do košíku, otevírá menu nebo odesílá vyhledávání. To jim může nákup úplně znemožnit.

Koho se to týká

nevidomí zákazníci
uživatelé čteček obrazovky
uživatelé hlasového ovládání

Jak opravit

Dejte každému tlačítku název: viditelný text, aria-label nebo aria-labelledby odkazující na viditelný text. Tlačítka jen s ikonou potřebují aria-label, například „Přidat do košíku“ nebo „Zavřít“. Nespoléhejte na atribut title ani na ikony vložené jen přes CSS.

Část vysvětlení je strojový překlad, který rodilý mluvčí ještě nezkontroloval.

Stránky, kde se vyskytuje

/×2
/product.html×2

Příklady na vašem webu

Snímek prvku na vaší stránce, orámovaného červeně: Některá tlačítka nemají název

Prvek: button[type="button"]:nth-child(1)

Kód pro vývojáře

<button type="button"><svg viewBox="0 0 24 24" fill="none" stroke="#2b2622" stroke-width="2"><circle cx="11" cy="11" r="7"></circle><path d="m20 20-3.5-3.5"></path></svg></button>

Prvek: .icons > button:nth-child(1)

Kód pro vývojáře

<button type="button"><svg viewBox="0 0 24 24" fill="none" stroke="#2b2622" stroke-width="2"><circle cx="11" cy="11" r="7"></circle><path d="m20 20-3.5-3.5"></path></svg></button>

Prvek: .cart

Kód pro vývojáře

<button type="button" class="cart"><svg viewBox="0 0 24 24" fill="none" stroke="#2b2622" stroke-width="2"><path d="M5 7h14l-1.5 12h-11z"></path><path d="M9 7a3 3 0 0 1 6 0"></path></svg></button>

Další prvky se stejným problémem: 1.

Kritické 1 prvek

Pole formuláře nemají popisek

WCAG 2.2 4.1.2 (A) Name, Role, Value · EN 301 549 9.4.1.2

Co to znamená pro vaše návštěvníky

Uživatelé čteček obrazovky uslyší jen „editovatelný text“ a nevědí, zda mají zadat jméno, telefon nebo PSČ. V pokladně to přímo vede k opuštěným objednávkám. Pole jen s placeholderem matou i starší zákazníky, jakmile začnou psát.

Koho se to týká

nevidomí zákazníci
uživatelé čteček obrazovky
starší zákazníci
lidé s kognitivními obtížemi
uživatelé hlasového ovládání

Jak opravit

Propojte s každým polem viditelný <label for>, nebo pole do popisku vnořte. aria-label použijte jen tam, kde viditelný popisek opravdu nejde. Placeholder není popisek. Zkontrolujte pole vyhledávání, newsletteru, množství a pokladny.

Část vysvětlení je strojový překlad, který rodilý mluvčí ještě nezkontroloval.

Příklady na vašem webu

Prvek: input
Kód pro vývojáře
```
<input type="number" value="1" min="1">
```

Kritické 1 prvek

Rozbalovací seznam nemá popisek

WCAG 2.2 4.1.2 (A) Name, Role, Value · EN 301 549 9.4.1.2

Co to znamená pro vaše návštěvníky

Uživatelé čteček obrazovky uslyší jen „pole se seznamem“ a nevědí, zda vybírají velikost, barvu, množství nebo zemi. To jim může zabránit vybrat variantu produktu nebo dokončit objednávku.

Koho se to týká

nevidomí zákazníci
uživatelé čteček obrazovky
uživatelé hlasového ovládání
lidé s kognitivními obtížemi

Jak opravit

Propojte s každým <select> viditelný <label for>, nebo použijte aria-labelledby odkazující na viditelný text. aria-label použijte jen tam, kde viditelný popisek nejde. Zkontrolujte výběr variant, řazení a výběr země.

Část vysvětlení je strojový překlad, který rodilý mluvčí ještě nezkontroloval.

Příklady na vašem webu

Snímek prvku na vaší stránce, orámovaného červeně: Rozbalovací seznam nemá popisek

Prvek: select

Kód pro vývojáře

<select>
                <option>135 × 200 cm</option>
                <option>155 × 220 cm</option>
                <option>200 × 220 cm</option>
            </select>

Závažné 19 prvků

Text se špatně čte kvůli nízkému kontrastu

WCAG 2.2 1.4.3 (AA) Contrast (Minimum) · EN 301 549 9.1.4.3

Co to znamená pro vaše návštěvníky

Zákazníci s horším zrakem, starší lidé a kdokoli s mobilem venku na slunci mohou přehlédnout ceny, dodací podmínky nebo popisky tlačítek. Špatně čitelný text vede k váhání a opuštěným košíkům.

Koho se to týká

lidé se slabozrakostí
starší zákazníci
lidé s poruchou barvocitu
lidé na mobilu za jasného světla

Jak opravit

Zajistěte kontrastní poměr alespoň 4.5:1 u běžného textu a 3:1 u velkého textu (24px, nebo 18.66px tučně). Zkontrolujte placeholdery, prvky, které vypadají jako neaktivní, text na obrázcích a štítky slev. Barvy opravujte v design tokenech nebo v CSS, ne u každého prvku zvlášť.

Část vysvětlení je strojový překlad, který rodilý mluvčí ještě nezkontroloval.

Stránky, kde se vyskytuje

/×13
/product.html×4
/contact.html×2

Příklady na vašem webu

Kontrast 3,93 : 1, je potřeba alespoň 4,5 : 1 text #8c8178 na #2b2622, 9.8pt (13px)

Prvek: .bar > span
Kód pro vývojáře
```
<span>· Returns within 30 days</span>
```
Kontrast 3,93 : 1, je potřeba alespoň 4,5 : 1 text #8c8178 na #2b2622, 9.8pt (13px)

Prvek: .bar > span
Kód pro vývojáře
```
<span>· Returns within 30 days</span>
```
Kontrast 2,88 : 1, je potřeba alespoň 4,5 : 1 text #ffffff na #c98a5b, 11.3pt (15px)

Prvek: button
Kód pro vývojáře
```
<button type="submit" class="btn">Send</button>
```

Další prvky se stejným problémem: 16.

Závažné 5 prvků

Obrázky nemají textový popis

WCAG 2.2 1.1.1 (A) Non-text Content · EN 301 549 9.1.1.1

Co to znamená pro vaše návštěvníky

Uživatelé čteček obrazovky neuslyší nic, nebo jen název souboru jako „IMG_2041.jpg“ místo produktu, barvy či nabídky. Mohou přijít o důležité detaily a odejít do obchodu, který své produkty popisuje.

Koho se to týká

nevidomí zákazníci
uživatelé čteček obrazovky
lidé s vypnutými obrázky nebo pomalým připojením

Jak opravit

Přidejte ke každému <img> atribut alt. Krátce popište, co je pro nákup důležité (produkt, barva, klíčový detail). U čistě dekorativních obrázků použijte alt="", aby je čtečka přeskočila. Nepište „obrázek…“ a nevkládejte do popisu klíčová slova.

Část vysvětlení je strojový překlad, který rodilý mluvčí ještě nezkontroloval.

Příklady na vašem webu

Snímek prvku na vaší stránce, orámovaného červeně: Obrázky nemají textový popis

Prvek: img[src$="hero.svg"]

Kód pro vývojáře

<img src="/hero.svg" width="800" height="600">

Prvek: img[src$="duvet.svg"]
Kód pro vývojáře
```
<img src="/duvet.svg">
```
Prvek: img[src$="towel.svg"]
Kód pro vývojáře
```
<img src="/towel.svg">
```

Další prvky se stejným problémem: 2.

Závažné 3 prvky

Některé odkazy neříkají, kam vedou

WCAG 2.2 2.4.4 (A) Link Purpose (In Context) · WCAG 2.2 4.1.2 (A) Name, Role, Value · EN 301 549 9.2.4.4, 9.4.1.2

Co to znamená pro vaše návštěvníky

Uživatelé čteček obrazovky uslyší jen „odkaz“ a nepoznají, zda otevírá košík, účet nebo Instagram. Ztrácejí čas, nebo hledání košíku či kontaktu vzdají.

Koho se to týká

nevidomí zákazníci
uživatelé čteček obrazovky
uživatelé hlasového ovládání

Jak opravit

Dejte každému odkazu textový název: viditelný text, alt u obrázku uvnitř odkazu, nebo aria-label u odkazů jen s ikonou. Název má popisovat cíl, například „Košík, 2 položky“. Dekorativní ikony skryjte pomocí aria-hidden="true".

Část vysvětlení je strojový překlad, který rodilý mluvčí ještě nezkontroloval.

Příklady na vašem webu

Snímek prvku na vaší stránce, orámovaného červeně: Některé odkazy neříkají, kam vedou

Prvek: .icons > a[href$="contact.html"]

Kód pro vývojáře

<a href="/contact.html"><svg viewBox="0 0 24 24" fill="none" stroke="#2b2622" stroke-width="2"><circle cx="12" cy="8" r="4"></circle><path d="M4 21c1.5-4 4.5-6 8-6s6.5 2 8 6"></path></svg></a>

Prvek: a[href$="contact.html"]:nth-child(1)

Kód pro vývojáře

<a href="/contact.html"><svg width="14" height="14" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" fill="#7a4e2d"></circle></svg></a>

Prvek: .social > a[href$="contact.html"]:nth-child(2)

Kód pro vývojáře

<a href="/contact.html"><svg width="14" height="14" viewBox="0 0 24 24"><rect x="4" y="4" width="16" height="16" rx="4" fill="#7a4e2d"></rect></svg></a>

Střední 1 prvek

Odkazy v textu vypadají jako běžný text

WCAG 2.2 1.4.1 (A) Use of Color · EN 301 549 9.1.4.1

Co to znamená pro vaše návštěvníky

Lidé s poruchou barvocitu nebo se slabozrakostí si nemusí všimnout odkazů na dodací podmínky, tabulku velikostí nebo vrácení zboží a přijdou o potřebné informace.

Koho se to týká

lidé s poruchou barvocitu
lidé se slabozrakostí
starší zákazníci

Jak opravit

Odkazy v textu podtrhněte nebo jim dejte jiné označení než barvu. Pokud spoléháte jen na barvu, musí mít odkaz vůči okolnímu textu kontrast alespoň 3:1 a viditelně se měnit při najetí myší a při fokusu.

Část vysvětlení je strojový překlad, který rodilý mluvčí ještě nezkontroloval.

Příklady na vašem webu

Prvek: .desc > a[href$="contact.html"]
Kód pro vývojáře
```
<a href="/contact.html">care guide</a>
```

Střední 1 prvek

Některé nadpisy jsou jen tučný nebo velký text

WCAG 2.2 1.3.1 (A) Info and Relationships · EN 301 549 9.1.3.1

Co to znamená pro vaše návštěvníky

Nevidomí zákazníci často přeskakují z nadpisu na nadpis, aby našli sekce jako „Popis“, „Doprava“ nebo „Recenze“. Falešné nadpisy jsou pro takovou navigaci neviditelné, takže musí poslouchat celou stránku a mohou přehlédnout důležité informace.

Koho se to týká

nevidomí zákazníci
uživatelé čteček obrazovky
lidé, kteří se pohybují pomocí klávesových zkratek

Jak opravit

Text, který slouží jako název sekce, změňte na skutečný nadpis (<h2>, <h3> atd.) v logickém pořadí a vzhled nastavte v CSS. V editorech vybírejte v nabídce formátu „Nadpis 2“ nebo „Nadpis 3“ místo zvýraznění tučně nebo zvětšení. Pokud text nadpisem není, nechte ho jako odstavec: axe označuje tuto kontrolu jako experimentální a někdy upozorní i na tučné úvodní věty.

Část vysvětlení je strojový překlad, který rodilý mluvčí ještě nezkontroloval.

Příklady na vašem webu

Prvek: .price
Kód pro vývojáře
```
<p class="price">€129</p>
```

Střední 1 prvek

Pole v pokladně se nevyplňují automaticky

WCAG 2.2 1.3.5 (AA) Identify Input Purpose · EN 301 549 9.1.3.5

Co to znamená pro vaše návštěvníky

Zákazníci musí adresu, telefon a e-mail psát ručně. Nejvíce to ztěžuje nákup lidem s pohybovými nebo paměťovými obtížemi, a pomalá pokladna stojí objednávky u všech.

Koho se to týká

lidé s pohybovým postižením
lidé s kognitivními obtížemi
zákazníci nakupující na mobilu
všichni zákazníci v pokladně

Jak opravit

Používejte platné tokeny autocomplete ze specifikace HTML, které odpovídají poli, například "email", "given-name", "postal-code", "tel". Opravte překlepy a vymyšlené hodnoty; "off" používejte jen tam, kde by automatické vyplnění bylo chybné.

Část vysvětlení je strojový překlad, který rodilý mluvčí ještě nezkontroloval.

Příklady na vašem webu

Snímek prvku na vaší stránce, orámovaného červeně: Pole v pokladně se nevyplňují automaticky

Prvek: input[type="email"]

Kód pro vývojáře

<input type="email" placeholder="E-mail" autocomplete="e-mail-address">

Doporučení nad rámec WCAG 2.2 AA

Nad rámec úrovně WCAG 2.2 AA, o kterou se opírají zákony. Nepočítají se jako problémy; jejich oprava usnadní používání webu.

Část obsahu leží mimo hlavní oblasti stránky Prvky: 2

Některé části stránky nejsou uvnitř orientačních bodů (landmarks), jako je záhlaví, navigace, hlavní obsah nebo zápatí. Jde o doporučený postup nad rámec úrovně WCAG 2.2 AA.

Umístěte veškerý viditelný obsah do orientačních prvků: <header>, <nav>, <main>, <aside> a <footer> (nebo odpovídajících rolí ARIA). Přesuňte „zatoulané“ bloky, jako jsou oznamovací lišty, bannery a formuláře newsletteru, do správné oblasti a zajistěte, aby každá stránka měla právě jeden <main>. Vyskakovací okna a cookie lišty lze označit jako dialog nebo pojmenovaný region.
Text nedosahuje zvýšeného kontrastu (AAA) Prvky: 1 WCAG AAA

Část textu splňuje základní úroveň kontrastu, ale ne přísnější: 7:1 pro běžný text a 4.5:1 pro velký. Jde o doporučený postup nad rámec WCAG AA, nikoli o povinný požadavek.

Kde je to praktické, zvyšte kontrast na 7:1 pro běžný text a 4.5:1 pro velký (24px nebo 18.66px tučně), nejdřív u hlavního textu, cen a pokladny. Ztmavte barvy textu nebo zesvětlete pozadí v design tokenech nebo CSS. Nejprve opravte základní problémy s kontrastem 4.5:1 (pravidlo color-contrast); tato kontrola je jen doplňkový tip.

Ve srovnání s předchozí kontrolou

Kontrola z 5. října 2026: problémy — 40

Nový: 19
Opraveno: 22
Zbývá: 17

Opraveno od předchozí kontroly

✓ Text se špatně čte kvůli nízkému kontrastu×7
✓ Obrázky nemají textový popis×4
✓ Stránka neuvádí, v jakém je jazyce×3
✓ Některá tlačítka nemají název×2
✓ Některé odkazy neříkají, kam vedou×2
✓ Pole formuláře nemají popisek×1
✓ Odkazy v textu vypadají jako běžný text×1
✓ Některé nadpisy jsou jen tučný nebo velký text×1
✓ Rozbalovací seznam nemá popisek×1

Problémy podle kontrol

Problémy podle kontrol
Datum	Nalezené problémy
12. října 2026	36
5. října 2026	40

Zkontrolované stránky

Stránka	Problémy
Linden & Loom – Linen and cotton for your homehttps://lindenloom.example/	23
Washed linen duvet cover – Linden & Loomhttps://lindenloom.example/product.html	10
Contact – Linden & Loomhttps://lindenloom.example/contact.html	3

Stejná zpráva jako PDF, pro archiv nebo vývojáře.

Otevřít ukázkové PDF

Automatická kontrola, nikoli úplný audit. Nejedná se o právní poradenství. Automatické nástroje najdou jen část problémů s přístupností; testování klávesnicí a čtečkou obrazovky je stále potřeba.