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

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="sr-only"> Search </ span>
</ button>

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

The sr-only 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) #