How to fix role img alt on WooCommerce

Steps for WooCommerce

1. Access your WordPress dashboard → Appearance → Theme File Editor (or use a child theme / FTP for safer editing).
2. Search your active theme's template files (e.g., woocommerce/single-product.php, template-parts/, or a page-builder shortcode output) for role="img".
3. Add aria-label="[descriptive text]" to each flagged element, or aria-hidden="true" for decorative ones.
4. If the element is generated by a plugin (e.g., a reviews plugin rendering star SVGs), check the plugin's settings for a built-in accessibility label field, or use a Code Snippets plugin to enqueue a small JavaScript fix: document.querySelectorAll('[role="img"]').forEach(el => { if (!el.getAttribute('aria-label') && !el.getAttribute('aria-labelledby')) el.setAttribute('aria-label', 'Rating graphic'); });
5. Alternatively, install the 'WP Accessibility' plugin which patches several common ARIA label issues automatically.
6. Test with the axe browser extension after saving.

<svg role="img" aria-label="4 out of 5 stars customer rating" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 20">
  <!-- star path data -->
</svg>

<!-- Decorative icon — hidden from screen readers -->
<span role="img" aria-hidden="true" class="icon-truck"></span>

<!-- Label references visible text elsewhere on the page -->
<div role="img" aria-labelledby="badge-label" class="free-shipping-badge"></div>
<p id="badge-label">Free Shipping on orders over $50</p>

What is role img alt?

When a non-image HTML element (like a `<div>`, `<span>`, or SVG) is given `role="img"` to indicate it acts as an image, browsers and screen readers still need a text description to announce to blind or low-vision users. That description is supplied via an `aria-label` attribute (or an `aria-labelledby` pointing to visible text). If that label is missing or empty, screen readers either skip the element silently or announce something useless like "image" — leaving visitors with no idea what it represents. WCAG Success Criterion 1.1.1 (Non-text Content) requires that every image-like element has a meaningful text alternative.

Roughly 7–8 million Americans use screen readers, and accessibility lawsuits against ecommerce stores have risen sharply every year — missing image labels are one of the most frequently cited violations in ADA Title III litigation. Beyond legal risk, Google's crawler also processes ARIA labels and treats them as descriptive signals, so properly labeled decorative graphics and icon-based UI elements contribute to a cleaner, more crawlable page. Most importantly, customers who rely on assistive technology simply cannot use your store if they cannot understand what your images, icon buttons, SVG badges, or star-rating widgets are — leading to lost sales and brand damage.

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