SVG images and graphics require accessible text

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>