WCAG A/AA requirement Priority: Moderate
Some graphics have no text description
Some elements are marked as images but have no text alternative, for example star ratings or icon graphics.
This text was translated automatically and has not been reviewed by a native speaker yet.
Why it matters to your customers
Screen reader users miss what the graphic shows, such as a 4.5-star rating or a "free delivery" badge, which can influence the purchase decision.
Who is affected
- blind customers
- screen reader users
How to fix it
Give every element with role="img" a name via aria-label or aria-labelledby, for example aria-label="Rated 4.5 out of 5". If the graphic is decorative, remove role="img" and hide it with aria-hidden="true".
On Shopify
Often rating stars from review apps or icons in the theme. Add names in the theme's Liquid snippets; review-app markup must be fixed by the app developer.
On Shoptet (CZ)
Often ratings or icons in the template. Report it to Shoptet or a partner.
On PrestaShop
Often rating or icon elements from modules. Fix it in the overridden module templates or report it to the module developer.
On WooCommerce
Often rating stars from WooCommerce or review plugins, or icon fonts in the theme. Fix it in child-theme templates or report it to the plugin author.
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 role-img-alt.
dequeuniversity.com, github.com, www.w3.org
Related checks
-
Videos have no captions
WCAG 1.2.2 A
-
Accessibility attributes are misspelt
WCAG 4.1.2 A
-
Custom menus or lists are built incorrectly
WCAG 1.3.1 A
-
Visitors cannot zoom the page on mobile
WCAG 1.4.4 AA