Skip to main content
Accessibility Pro
Startscanning

Fix guides · WCAG 2.2

Giving SVG images a text alternative

1.1.1 Non-text Content · Level A W3C: Understanding 1.1.1

An inline SVG that conveys information, such as a chart or an icon without visible text, needs a text alternative. Marking it role="img" tells assistive technology it is one image, and then it must have a name.

Who this affects: People who use screen readers, who otherwise hear "image" and nothing else, or nothing at all.

The failing markup

<svg role="img" width="120" height="60" viewBox="0 0 120 60">
  <rect x="10" y="30" width="20" height="30" fill="#525252"></rect>
  <rect x="50" y="10" width="20" height="50" fill="#525252"></rect>
</svg>

How to fix it

  1. Add a <title> as the first child of the <svg>, give it an id, and point aria-labelledby at it. aria-label on the <svg> also works.
  2. Describe what the graphic tells the reader, not what it looks like: "Revenue rose from 30 to 50 thousand euros", not "bar chart".
  3. If the SVG is decorative, or the same information is in adjacent text, hide it with aria-hidden="true" instead of naming it.

The change

Removed: <svg role="img" width="120" height="60" viewBox="0 0 120 60">Added: <svg role="img" aria-labelledby="chart-title" width="120" height="60" viewBox="0 0 120 60">Added:   <title id="chart-title">Revenue rose from 30 to 50 thousand euros</title>  <rect x="10" y="30" width="20" height="30" fill="#525252"></rect>  <rect x="50" y="10" width="20" height="50" fill="#525252"></rect></svg>

Verified by the scanner

On 2026-09-13 both versions of this sample were run through Accessibility Pro's scan pipeline with arc-style, axe-core, ibm-equal-access, pa11y, focus-graph. The failing markup was reported as:

  • axe-core: svg-img-alt, WCAG 1.1.1
  • ibm-equal-access: ibm-svg_graphics_labelled, WCAG 1.1.1

The fixed markup produced no findings at all. To run the same check on every pull request, use the accessibility GitHub Action; how accurate the scanner is overall is in the published benchmark.

Worth knowing

  • A chart with many data points needs more than a short name. Put the data in a table or text nearby and keep the name short.