SVG Images and Graphics Require Accessible Text: How to Fix It

This check flags an inline <svg> that conveys meaning but exposes no accessible text, so a screen reader either skips it or dumps raw path data. That means the padlock next to your secure-checkout copy, or the chart summarizing your pricing, simply does not exist for a blind user. Because inline SVG icons often carry the only label on a control, a nameless one can also strip the accessible name off a button or link, which is where the accessibility gap starts costing you conversions.

Why inline SVG is its own problem

A raster image loaded through <img> has one obvious slot for alternative text, the alt attribute, and everyone knows to fill it. Inline SVG has no alt. It is a live chunk of the DOM made of shapes, and how a screen reader treats it depends on the role and attributes you give the root element. Left alone, an inline SVG is ambiguous: some assistive tech ignores it, some announces it as a graphic with no name, and some has historically read out the text nodes buried in the markup, which can be nonsense. The result is that a meaningful icon, the thing telling a user a field is required, a message is an error, or a link opens in a new window, silently vanishes. The flip side is just as common and just as damaging: decorative flourishes that were never meant to be announced end up cluttering the audio experience because nobody told the screen reader to skip them. Getting this right is a two-part decision, and the first part is honest triage of which SVGs actually carry meaning.

A real failure, and the fix

A "download" icon button ships the graphic but no text at all, so it announces as an empty button:

<button>
  <svg viewBox="0 0 24 24">
    <path d="M12 3v12m0 0l-4-4m4 4l4-4M5 21h14"/>
  </svg>
</button>

Give the SVG a role and a title, and reference that title so its name is exposed reliably:

<button>
  <svg viewBox="0 0 24 24" role="img" aria-labelledby="dl-title">
    <title id="dl-title">Download report</title>
    <path d="M12 3v12m0 0l-4-4m4 4l4-4M5 21h14"/>
  </svg>
</button>

Now the button announces "Download report, button." If the icon is purely decorative, do the opposite and mark it aria-hidden="true" with a focusable="false" so assistive tech ignores it cleanly.

Meaningful vs decorative: pick a lane

How to detect it

1. axe DevTools: run the scan and look for "SVG elements with an img role must have an alternative text," which lists each graphic missing a name.
2. Lighthouse: run the Accessibility audit; unnamed image-role SVGs surface under the ARIA and image-alternative-text results.
3. WAVE: load WAVE and check for missing alternative-text alerts on inline graphics and icon controls.
4. Manual check: tab to icon-only buttons and links with a screen reader; if one announces as "button" with no name, its SVG is the missing text.

How to fix it

First decide whether the SVG means anything on its own. If it does, add role="img" and give it a name, either a <title> referenced by aria-labelledby or a direct aria-label, and keep that text short and descriptive of purpose, not shape. If the graphic is decorative or duplicates nearby text, hide it with aria-hidden="true" and set focusable="false" so older browsers do not place it in the tab order. When the SVG is the sole content of a button or link, naming the control is often cleaner than naming the icon. The same alternative-text logic covers role=img elements need alternative text and icon-only controls in links must have discernible text.

Frequently asked questions

Is a <title> alone enough?

A <title> helps, but support has historically been uneven, so pair it with role="img" and reference it via aria-labelledby, or use aria-label instead. That combination is announced reliably across screen readers.

What about an SVG loaded through an <img> tag?

When an SVG is referenced with <img src="icon.svg">, it follows normal image rules; give it an accurate alt attribute. This check is specifically about inline <svg> markup in the DOM.

Should decorative icons get empty alt text?

For inline SVG there is no alt attribute, so hide decoration with aria-hidden="true". Empty alt="" is the equivalent technique only for raster images loaded via <img>.

Why add focusable="false"?

Some legacy browsers place inline SVGs in the tab order by default. Setting focusable="false" keeps a decorative or already-labeled graphic from stealing a stop, which keeps keyboard navigation tidy.

How long should the SVG name be?

Long enough to convey purpose, short enough to say quickly. Name the function, "Download report," "Verified account," not the drawing, and skip words like "icon" or "image" since the role already tells the user it is a graphic. For a complex graphic such as a chart, name it briefly and put the full detail in adjacent body text linked with aria-describedby.