SVG Images and Graphics Require Accessible Text: How to Fix It
- September 19, 2020
- Accessibility, Images

Give every meaningful inline SVG an accessible name with a direct child
What this rule checks
The axe-core rule "svg-img-alt" (sometimes shown as "SVG Images and Graphics Require Accessible Text") fires when an inline <svg> element is exposed to assistive technology as a graphic but has no text alternative. Specifically, it checks SVGs that carry the role of img, graphics-document, or graphics-symbol, and verifies that each one has an accessible name. Deque classifies the user impact as "Serious" because a screen reader reaches the graphic, announces that something is there, but has nothing to read aloud, leaving the user with no idea what the image conveys.
The rule maps to WCAG 2.1 Level A (1.1.1 Non-text Content) and Section 508. An SVG passes when it exposes a non-empty accessible name through one of the supported mechanisms, or when it is correctly removed from the accessibility tree because it is decorative.
Meaningful vs decorative SVGs
Before adding any markup, decide which kind of SVG you are dealing with, because the two require opposite treatments.
Meaningful SVGs
These carry information the user would lose if the graphic were removed: a logo, a status icon that is the only indicator of state, a chart, a diagram, or an icon-only button such as a magnifying glass that triggers search. Meaningful SVGs need an accessible name that describes their purpose, not their visual shape.
Decorative SVGs
These add visual polish but no information: a flourish next to a heading, a background pattern, or an icon that sits beside text that already says the same thing (for example a download arrow next to the word "Download"). Decorative SVGs should be silent so they do not clutter the screen reader experience with redundant or meaningless announcements.
How to name a meaningful SVG
There are three reliable ways to give an SVG an accessible name. Pick one per element.
1. The <title> element
The <title> element provides a short text description of an SVG. It must be the first direct child of the <svg> element. axe-core treats a <title> that is a grandchild, or that sits deeper in the tree, as a failure. Pair it with role="img" so browsers and screen readers map the graphic consistently. For richer context you can add a <desc> element and reference both with aria-labelledby.
2. The aria-label attribute
Place aria-label directly on the <svg> element to set its accessible name inline. This is handy when you cannot easily inject a <title> child, for example with icons generated by a sprite system.
3. role="img" plus aria-labelledby
If the description already exists elsewhere on the page, reference it by id with aria-labelledby. The combination of role="img", a <title>, an optional <desc>, and aria-labelledby is the most robust pattern across browser and screen reader pairs.
<!-- Bad: meaningful icon button with no accessible name -->
<button>
<svg viewBox="0 0 24 24"><path d="..."/></svg>
</button>
<!-- Good: title element as a direct child, role set -->
<button>
<svg role="img" viewBox="0 0 24 24">
<title>Search</title>
<path d="..."/>
</svg>
</button>
<!-- Good: aria-label directly on the svg -->
<svg role="img" aria-label="Company logo" viewBox="0 0 120 40">
<path d="..."/>
</svg>
How to hide decorative SVGs
For graphics that carry no information, the goal is to remove them from the accessibility tree entirely so screen readers skip them. Add aria-hidden="true" to the <svg>. This removes the element and all its children from the accessibility API, which is what you want for a purely visual flourish. If the SVG sits inside a link or button, also add focusable="false" so older browsers do not place the graphic in the tab order.
<!-- Bad: decorative icon announced redundantly next to text -->
<a href="/report.pdf">
<svg role="img"><title>download icon</title><path d="..."/></svg>
Download report
</a>
<!-- Good: icon hidden, link text carries the meaning -->
<a href="/report.pdf">
<svg aria-hidden="true" focusable="false"><path d="..."/></svg>
Download report
</a>
How to diagnose
Run axe DevTools, Lighthouse, or any axe-core powered scanner and look for the svg-img-alt result. The report lists each offending <svg> with its DOM path. To confirm in the browser, open the accessibility inspector in Chrome or Firefox DevTools, select the SVG, and check its computed name. An empty name on a graphic that conveys meaning is a real failure; a graphic that should be silent but still appears in the tree needs aria-hidden. A quick manual sweep is to tab through interactive icons and listen with a screen reader such as VoiceOver or NVDA.
How to fix
Work through the flagged SVGs one by one. For each, ask whether it carries information. If it does, give it a name: add a <title> as the first child plus role="img", or set aria-label on the SVG. Write the name to describe the function or content, so an icon-only search button is named "Search" rather than "magnifying glass". If the SVG is decorative, add aria-hidden="true" and focusable="false" and remove any stray <title> that was forcing it into the tree. Re-run the scanner to confirm the count drops to zero, then spot check with a screen reader.
Common mistakes
A frequent error is putting the <title> element too deep; it must be a direct child of the <svg> or axe-core still fails it. Another is naming the shape instead of the purpose, which technically passes but tells the user nothing useful. Marking a meaningful logo or chart as aria-hidden hides real content, while leaving a decorative icon named "icon" or "image" produces noise. Finally, applying both a visible accessible name and aria-hidden to the same element sends conflicting signals, so choose one path per SVG.
FAQ
A: No. Only SVGs that convey information need an accessible name. Decorative SVGs should instead be hidden with aria-hidden="true" so screen readers skip them.
A: Either works. A <title> as the first child paired with role="img" has the broadest support, while aria-label is convenient when you cannot inject a child element, such as with sprite icons.
A: The <title> must be a direct child of the <svg> element. If it is nested inside a group or sits deeper in the markup, axe-core does not count it, so move it to the top of the SVG.
Need a full technical audit?
SEO ProCheck runs deep crawls that catch issues like this across your whole site.
Claude Vincent is a technical SEO consultant focused on crawlability, rendering, and AI-search visibility. He writes the field guides and case studies at SEO ProCheck, with a bias toward the durable, unglamorous work that decides whether search engines and AI answer engines can actually read and cite a site.
About SEO ProCheck
Technical SEO consulting and GEO strategy with 20 years of enterprise experience. Case studies, resources, and tools for search and AI visibility.
Work With Me
Technical SEO audits, GEO strategy, site migrations, and international SEO. Hourly consulting for teams who need hands-on support, not just reports.








