WCAG A/AA requirement Priority: Moderate
Some vector graphics have no text description
Some SVG graphics, such as logos, icons or badges, are marked as images but have no text alternative.
This text was translated automatically and has not been reviewed by a native speaker yet.
Why it matters to your customers
Screen reader users hear nothing useful for the graphic, so they may miss a badge, a payment logo or what an icon means.
Who is affected
- blind customers
- screen reader users
How to fix it
For an <svg> with role="img", add a <title> as its first child or use aria-label or aria-labelledby. If it is decorative, remove role="img" and add aria-hidden="true".
On Shopify
Usually icon snippets in the theme or app widgets. Add a title or aria-label in the theme's SVG snippets; report app icons to the developer.
On Shoptet (CZ)
Usually template icons or logos. Report it to Shoptet or a partner.
On PrestaShop
Usually theme icons or modules. Add names in the theme's .tpl templates or SVG files.
On WooCommerce
Usually theme icons, logo uploads or icon plugins. Add names in child-theme templates or plugin settings.
Standards
| Standard | Clause |
|---|---|
| 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 |
Automated check: axe-core rule svg-img-alt.
dequeuniversity.com, github.com, www.w3.org
Related checks
-
A label or value stands outside its list
WCAG 1.3.1 A
-
A dropdown has no label
WCAG 4.1.2 A
-
A clickable image only works with a mouse
WCAG 2.1.1 A
-
The whole page is hidden from screen readers
WCAG 1.3.1 A