svg elements with an img role have an alternative text

The intent of Success Criterion 1.1.1 is to make information conveyed by non-text content (including SVG images) accessible through the use of a text alternative. Text alternatives are a primary way for making information accessible because they can be rendered through any sensory modality (for example, visual, auditory or tactile) to match the needs of the user. Providing text alternatives allows the information to be rendered in a variety of ways by a variety of user agents. For example, a person who cannot see a picture can have the text alternative read aloud using synthesized speech. A person who cannot hear an audio file can have the text alternative displayed so that he or she can read it. In the future, text alternatives will also allow information to be more easily translated into sign language or into a simpler form of the same language.

Fixing the problem

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.

Using the <title> attribute

Example:

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

Using the SVG <title> element

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

Example:

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

Using the `aria-label` attribute

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>  

Using the `aria-labelledby` attribute

Example:

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