axe-core rule: svg-img-alt

SVG graphics are missing text alternatives

Fix reference | BarrierScan

What it is

An SVG element with role="img" has no accessible name (no title element or aria-label), so the graphic conveys nothing to assistive technology.

Who it blocks

Screen reader users miss whatever the graphic communicates, such as icons, logos, or charts.

How to fix it

Give the SVG an accessible name via aria-label or an internal title element referenced with aria-labelledby. Decorative SVGs should instead get aria-hidden="true".

Example fix

<!-- Before -->
<svg role="img" viewBox="0 0 24 24">...</svg>

<!-- After: meaningful graphic -->
<svg role="img" aria-label="Free shipping on orders over $50" viewBox="0 0 24 24">...</svg>

<!-- After: decorative graphic -->
<svg aria-hidden="true" viewBox="0 0 24 24">...</svg>

This is one of the barrier types BarrierScan checks for on every scan. Request a free accessibility scan to see whether it appears on your site, alongside the rest of the automated findings.