How to fix role img alt on Adobe Commerce (Magento)

Steps for Adobe Commerce (Magento)

1. Identify which template file renders the flagged element: use browser DevTools to find a unique class or ID, then search your theme under app/design/frontend/[Vendor]/[Theme]/ using grep -r 'role="img"' .
2. Create or edit the relevant .phtml template file in your custom theme (never edit the core or parent theme directly).
3. Add aria-label="<?= $block->escapeHtmlAttr(__('Description here')) ?>" to the element, using Magento's translation and escaping helpers so the label is translatable and safe.
4. For SVG icon sprites (common in Luma and Hyva themes), locate the SVG sprite definition, add a <title id="icon-[name]">[Description]</title> inside each <symbol>, and update the <svg role="img" aria-labelledby="icon-[name]"> usage in templates.
5. Run bin/magento setup:static-content:deploy and clear cache (bin/magento cache:clean) to see changes.
6. Validate with axe DevTools browser extension on the frontend.

What is role img alt?

When a developer uses the HTML attribute `role="img"` on an element that isn't a native `<img>` tag — for example, an icon font character, an SVG group, a `<div>` containing a decorative graphic, or an emoji used as meaningful content — they are telling browsers and assistive technologies "treat this as an image." However, unlike a real `<img>` tag which has an `alt` attribute, these elements have no built-in place to put a text description. The `aria-label` attribute fills that gap: it provides the invisible text label that a screen reader will read aloud instead of the visual graphic. If `aria-label` (or an equivalent like `aria-labelledby`) is missing or empty, the element is announced to blind or low-vision users as an unlabelled image — or skipped entirely — making it meaningless.

WCAG 2.1 Success Criterion 1.1.1 (Level A — the most basic accessibility level) requires that all non-text content has a text alternative. Failing this criterion means your store is inaccessible to the roughly 7–8 million people in the US alone who use screen readers, exposing you to legal risk under the ADA, Section 508, and equivalent laws in the EU (EAA 2025), UK, Australia, and Canada — accessibility lawsuits against ecommerce stores have increased sharply year-over-year. Beyond legal risk, unlabelled icons and graphics mean blind shoppers cannot understand product badges, trust seals, star ratings rendered as icon fonts, or navigation icons — directly harming conversions and checkout completion rates. Google also uses accessibility signals as part of its overall quality assessment, so a deeply inaccessible site can experience reduced crawl quality over time.

See the complete Role img alt guide for every platform and the full background.