SVG images are used more and more on the web but what about their accessibility ?

  • Web
  • Intermediate

Here are some ideas knowing that the support for browsers and assistive technologies evolves very quickly!
Important: So remember to test your implementations on the browsers/assistive technologies targets the most used by your users, whatever the solution for which you choose.

Decorative image #

SVG in an img tag #

 
<img src="XXX.svg" alt="" aria-hidden="true" />

SVG online (inline) #

 
<svg aria-hidden="true" focusable="false">
...
</svg>

We use focusable ="false" to avoid any focus on SVG by IE (> 10 and Edge)

In addition, you must make sure that the svg tag or one of its children (<g>,<path>...) does not have any attribute to provide it with an accessible name ( title, desc ,aria- *…).

SVG in an img tag #

 
<img src ="XXX.svg" alt="alternative text" role="img" />

second choice:

 
<img src="XXX.svg" aria-label="replacement text" role="img" />

We add role="img" to make sure that with macOS Safari, VoiceOver (old versions) announces "image".

SVG online (inline) #

 
<svg viewBox="0 0 440 540" version="1.1" role="img"
  lang="fr" xml:lang="fr"
  aria-labelledby="title description">

  <title id="title">Gross revenue 2019</title>

  <desc id="description">
    This diagram shows the income for the year 2019, as a percentage of the total and in absolute value. The total income is 20.3 million Euros and is divided into 6.9 million (34%) for the first quarter, 2.1 million (10%) for the second, 10.3 million for the third (51%) and 1 million in the last quarter (5%).
  </desc>

  ...
</svg>

The best support for SVGs is to display them inline.

You must use aria-labelledby as the first choice by referencing the "title" and the "desc" (avoid aria-describedby for the "desc", still bad support) to ensure maximum support.
SVGs serving as a link or button

Several possible choices:

 
<button>
  <svg focusable="false" aria-hidden="true"> <! --...-- > </svg>
  Search
</button>

<a href="/Search">
  <svg focusable="false" aria-hidden="true"> <! --...-- > </svg>
  Search
</a>

We use focusable="false" to avoid any focus on the SVG in addition to the link a) by IE 10.
This is the best solution, the most robust but is not always possible to display a text (graphic / design / marketing constraint...).
So, here is an alternative that allows to visually hide the text for a button or a link while leaving it readable by assistive technologies via aria-labelledby:

 
<button aria-labelledby="label">

  <span id="label" hidden>Search</span>

  <svg aria-hidden="true" focusable="false"> <!--...--> </svg>

</button>

Finally, these two following solutions are equivalent and in any case to be tested in your targeted navigation environments (browser / assistive technologies pairs).

 
<button>
  <svg focusable="false" aria-hidden="true"> <! --...--> </svg>
  <span class="visually-hidden"> Search </ span>
</ button>

<a href="/ Search">
  <svg focusable="false" aria-hidden="true"> <! --...--> </svg>
  <span class="visually-hidden"> Search </span>
</ a>

The visually-hidden class is used to hide the text except to technical help users (accessible masking).

or

 
<button aria-label="Search">
  <svg focusable="false" aria-hidden="true"> <! --...--> </svg>
</ button>

<a href="/ Search" aria-label="Search">
  <svg focusable="false" aria-hidden="true"> <! --...--> </svg>
</ a>

or, but much more risky ...

<button>
  <svg aria-labelledby="search-icon-title" focusable="false" role=”img”>
    <title id="search-icon-title">Search</title>
    <! --...-->
  </svg>
</ button>

Last words ... #

In short, one tip for accessible SVG would be TEST and test again!

Ressources (articles that have helped me a lot) #