6.2. Managing alternative text on SVG (Scalable Vector Graphics)

• Decorative/ambient <svg>.
• “Simple” informative <svg>.
• “Complex” informative <svg>.
• Unlabeled <svg> links and buttons.

Decorative/ambient <svg>

When an <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>

“Simple” informative <svg>

A “simple” informative <svg> is an informative image that can be described by concise alternative text.

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

1. Add a role="img" attribute to the <svg> tag.
2. Add an aria-label attribute to the <svg> tag and populate the attribute with information to make the image explicit.

In the example of HTML code below, the <svg> indicates that the text applies to a walking time and distance:

<p>
  <svg role="img" aria-label="By walking: " focusable="false">
    [...]
  </svg>  
  <span>2 min</span>
  <span>111 m</span>
</p>

“Complex” informative <svg>

A “complex” informative <svg> is an informative image that requires a detailed description.

When a “complex” informative <svg> is added to the HTML code:

1. Add a role="img" attribute to the <svg> tag.
2. Add an aria-label attribute to the <svg> tag and populate this attribute with information to make the image explicit.
3. Propose a detailed description for the image directly below it.
4. Finally, indicate in the aria-label attribute where this detailed description can be found.

In the example of HTML code below, <svg> indicates the function of the image and where to find its detailed description:

<h2>Project manager calendar</h2>
<svg role="img" aria-label="Project manager calendar (detailed description below)" focusable="false">
  [...]
</svg>
<button aria-expanded="true">Calendar text transcript</button>
<div>
  <ol>
    <li><strong>2016:</strong> Public concertation.</li>
    [...]
  </ol>
</div>

<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 an aria-label attribute to the <svg> tag and populate this attribute with information to make the link or button explicit.

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

<a href="/">
  <svg role="img" aria-label="Homepage" focusable="false">
    [...]
   </svg>
</a>

Find out more

Comments

Back to top