Ensure <svg> 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
<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.
<svg role="img">
<title>A descriptive title for the SVG element</title>
<path d="...." />
</svg>
Copy Using the `aria-label` attribute
<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
<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.