Požadavek WCAG A/AA Priorita: Střední
Některé vektorové grafiky nemají textový popis
Některé grafiky SVG, například loga, ikony nebo štítky, jsou označené jako obrázky, ale nemají textovou alternativu.
Tento text byl přeložen automaticky a rodilý mluvčí ho zatím nezkontroloval.
Proč na tom záleží vašim zákazníkům
Uživatelé čteček obrazovky neuslyší nic užitečného, takže mohou přehlédnout štítek, logo platební metody nebo význam ikony.
Koho se to týká
- nevidomí zákazníci
- uživatelé čteček obrazovky
Jak to opravit
U <svg> s role="img" přidejte jako první podřízený prvek <title>, nebo použijte aria-label či aria-labelledby. Pokud je grafika dekorativní, odstraňte role="img" a přidejte aria-hidden="true".
V Shopify
Obvykle jde o snippety ikon v šabloně nebo widgety aplikací. Doplňte title nebo aria-label ve snippetech SVG šablony; ikony aplikací nahlaste vývojáři.
V Shoptet (CZ)
Obvykle jde o ikony nebo loga v šabloně. Nahlaste to podpoře Shoptet nebo partnerovi.
V PrestaShop
Obvykle jde o ikony motivu nebo moduly. Doplňte názvy v šablonách .tpl motivu nebo v souborech SVG.
V WooCommerce
Obvykle jde o ikony šablony, nahraná loga nebo pluginy s ikonami. Doplňte názvy v šablonách podřízené šablony (child theme) nebo v nastavení pluginu.
Normy
| Norma | Bod |
|---|---|
| WCAG 2.2 | 1.1.1 (A) Non-text Content |
| WCAG 2.1 | 1.1.1 (A) Non-text Content |
| WCAG 2.0 | 1.1.1 (A) Non-text Content |
| EN 301 549 4.1.1 | 9.1.1.1 |
| EN 301 549 3.2.1 | 9.1.1.1 |
| Section 508 2017 | E205.4 |
| ДСТУ EN 301 549 2022 | 9.1.1.1 |
Automatická kontrola: pravidlo axe-core svg-img-alt.
dequeuniversity.com, github.com, www.w3.org
Podobné kontroly
-
Název nebo hodnota stojí mimo svůj seznam
WCAG 1.3.1 A
-
Rozbalovací seznam nemá popisek
WCAG 4.1.2 A
-
Klikací obrázek funguje jen s myší
WCAG 2.1.1 A
-
Celá stránka je skrytá před čtečkami obrazovky
WCAG 1.3.1 A