Digital Accessibility Knowledge Base

svg-img-alt

SVG images and graphics require accessible text

Who might be affected
Screen Reader

Description

Screen readers and other assistive technologies can only parse textual data, so non-textual content such as SVG images requires an alternative text that describes it for screen readers to read to the user. The HTML-like syntax and structure of SVG elements allow us to give it an accessible name via a property that's associated with the <svg> tag, or with a <title> element descendant to the <svg> tag. If the image is purely decorative and has no importance for understanding the content correctly, it can be hidden from assistive technologies.

Quick Fixes

Use one of the attributes below to give <svg>'s accessible names.
1    <!-- Use the "title" attribute -->
2    <svg role="img" title="A square button">
3        <rect width="100" height="100" />
4    </svg>
5

6    <!-- Use the "aria-label" attribute -->
7    <svg role="img" aria-label="A square button">
8        <rect width="100" height="100" />
9    </svg>
10

11    <!-- Use the "aria-labelledby" attribute -->
12    <p id="btn-label">A square button</p>
13    <svg role="img" aria-labelledby="btn-label">
14        <rect width="100" height="100" />
15    </svg>
Give <svg>'s accessible names using the <title> element.
For the <title> to act properly as an accessible name, it must:
  1. Contain a valid text node (only white spaces are not alowed)
  2. To be a direct child of the <svg> element
  3. To be a the only <title> tag inside the <svg> element
1    <svg role="img">
2✓       <title>A square button</title>
3        <rect width="100" height="100" />
4    </svg>
5

6    <svg role="img">
7        <rect width="100" height="100">
8✗           <title>A square button</title>
9        </rect>
10    </svg>
11

12    <svg role="img">
13✗       <title></title>
14        <rect width="100" height="100" />
15    </svg>
16

17    <svg role="img">
18✗       <title>\r\n\t</title>
19        <rect width="100" height="100" />
20    </svg>
21

22    <svg role="img">
23✗       <title>A square button</title>
24✗       <title>An important button</title>
25        <rect width="100" height="100" />
26    </svg>

How Users Are Affected

Users that are dependent on screen readers, or other assistive technology that uses text parsing to convey the content to the user, will not be able to perceive the <svg>'s content and purpose.

WCAG Success criteria

This issue might cause elements to fail one or more of the following Success criteria:
1.1.1 Non-text Content (A)

-Accessible SVG test page