How to fix svg img alt on WooCommerce

Steps for WooCommerce

1. SVGs in WooCommerce stores live in theme template files, plugin output, or the WordPress Media Library. First, check your active theme's folder (wp-content/themes/your-theme/) using a file manager or FTP client, or use the WordPress Customizer > Additional CSS / Theme Editor (Appearance > Theme File Editor — note: editing theme files directly risks being overwritten on update, so use a child theme).
2. For theme SVGs: create or open your child theme, copy the relevant template file (e.g. header.php, footer.php, or a WooCommerce template), locate the `<svg>` tag, and add `role="img"` plus `aria-label="Descriptive text"`.
3. For SVGs inserted via the Block Editor (Gutenberg): click the SVG/Image block, and in the Block settings sidebar under 'Alt text', enter a description. For SVG files uploaded to the Media Library, edit the Attachment page and fill in the Alt Text field.
4. For plugin-generated SVGs (e.g. WooCommerce icon fonts or SVG badges), install the 'Safe SVG' plugin which sanitises uploads and allows you to edit SVG alt attributes. Then use a code snippet plugin (e.g. WPCode) to add a filter that injects `aria-label` attributes.
5. For decorative SVGs in theme files, add `aria-hidden="true"` to the opening `<svg>` tag in your child theme template.

What is svg img alt?

SVG files are vector images often used for logos, icons, badges, and illustrations on ecommerce sites. Unlike a regular `<img>` tag which has an `alt` attribute, an inline SVG element needs its own internal mechanism to carry a text description — either a `<title>` element nested inside it, an `aria-label` attribute on the `<svg>` tag itself, or a reference to external text via `aria-labelledby`. Without one of these, a screen reader either skips the image entirely or reads out meaningless code, leaving blind and low-vision shoppers without context for what the image conveys. WCAG Success Criterion 1.1.1 ("Non-text Content") requires that all meaningful images have a text alternative.

Screen readers are used by millions of shoppers with visual impairments, and an SVG without a text alternative is completely invisible to them — a missing logo, an unreadable trust badge, or a broken call-to-action icon. This directly harms conversions and user experience for a significant customer segment. From a legal standpoint, failing WCAG 1.1.1 is one of the most commonly cited violations in ADA and AODA accessibility lawsuits and demand letters targeting online stores; remediating it proactively protects you from costly litigation. Google's crawlers also partially interpret accessibility markup, so well-labelled SVG images can contribute to better understanding of your page content.

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