6.2. Provide alternate text on SVG (Scalable Vector Graphics)

Warning

By default, <svg> elements are focusable focus in Internet Explorer.

To ensure proper keyboard navigation in this browser, the focusable="false" attribute should be added to each <svg> tag used to display an image.

Decorative/ambient <svg>

When a <svg> is simply decorative or ambient, add aria-hidden="true".

In the following HTML code, the <svg> simply enhances the label “Error Messages” (explicit by nature):

<h2>
   <svg aria-hidden="true" focusable="false">[…]</svg>
   Error Messages
</h2>

Warning

A purely decorative or ambient <svg> element does not need the title, aria-label, aria-labelledby and/or aria-describedby attributes.

Nor should it have a <title> and/or <desc> element.

Informative <svg>

When an informative <svg> image is included in the HTML code:

  1. Add a tag (i.e. <span>) immediately after the <svg> tag.
  2. Add information to this tag to make the SVG image explicit.
  3. Hide the content of the tag with CSS or place it off-screen using the CSS “opacity: 0” or “position: absolute” properties.
  4. Add aria-hidden="true" to the <svg> element.

The svg image above refers to the time and distance to reach a destination by walking. The code should be:

<p>
  <svg aria-hidden="true" focusable="false">
    [...]
  </svg>  
  <span class="off-screen">By walking: </span>
  <span>2 min</span>
  <span>111 m</span>
</p>
.off-screen {
   position: absolute;
   left: -999999rem;
}

Warning

Do not start an <svg> element with “Image […]”.

<svg> links and buttons

When a <svg> image alone (without a label), acting as a link or a button, is included in the HTML code:

  1. Add a role="img" attribute to the <svg> tag.
  2. Add a <title> tag after the opening of the <svg> tag and add information to it to make the the link or button explicit.
  3. Add an id attribute to this <title> tag and populate it with a unique value.
  4. Add an aria-labelledby attribute to the <svg> element and populate it with the same value as the id attribute of the <title> tag.

In the following HTML code, the <svg> points to the home page of a site:

<a href="/">
  <svg role="img" aria-labelledby="icone-svg-accueil" focusable="false">
    <title id="icone-svg-accueil">Home</title>
    [...]
   </svg>
</a>

Warning

Do not start the text alternative by “Link to […]” or “Button to […]”.


Note

There are different techniques for coding SVG images. The techniques listed below are those that were found to be the most robust when tested.

Find out more

Comments

Add a comment

Required fields are marked *.

Back to top