Ensure Elements with an img, graphics-document or graphics-symbol Role Have an Accessible Text

Web accessibility standards require SVG elements with an <img>, graphics-document or graphics-symbol role to have an accessible text alternative.

Why It Matters

Providing text alternatives allows the information to be rendered in a variety of ways by various assistive technologies.

For example, a person who cannot see an image will hear the alternative text through a speech synthesizer. A person who cannot hear an audio file can have the text alternative displayed.

Fixing the Issue

Ensure that all SVG elements that are added as markup into the HTML, one or a combination of the below methods are used to provide an accessible name for the SVG.

Good Code Example

Using the <title> attribute

Code example

<svg role="img" title="A brown circle">
<circle
cx="30"
cy="30"
r="10"
fill="brown"
></circle>
</svg>

Copy

Using the SVG <title> element

The <title> element provides an accessible, short-text description of any SVG container element or graphics element.

Code example

<svg role="img">
<title>A descriptive title for the SVG element</title>
<path d="...." />
</svg>

Copy

Using the `aria-label` attribute

Code example

<svg xmlns="https://www.w3.org/2000/svg">
<circle role="img" cx="50" cy="50" r="40" stroke="black" fill="red"  aria-label="A red circle with black border">
</circle>
</svg>

Copy

Using the `aria-labelledby` attribute

Code example

 <div id="first">First</div>
<div id="name">Name</div>
<svg role="img"  aria-labelledby="first name">
<path d="...." />
</svg>

Copy

Test Cases

For more examples, visit the W3C’s GitHub’s ATC Rules library.

Ensure <svg> Elements with an img, graphics-document or graphics-symbol Role Have an Accessible Text

Written and researched for humans by humans

Why It Matters

Fixing the Issue

Good Code Example

Test Cases