SVG images accessibility

Here are some ideas knowing that the support for browsers and assistive technologies evolves very quickly.

Important: Whatever solution is chosen, as browser support and assistive technologies evolve rapidly, make sure to test your implementations on the configurations most commonly used by your users.

Decorative image #

SVG in an img tag #

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

Inline SVG #

<svg aria-hidden="true">
…
</svg>

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- *, …).

Note: Historically, the focusable="false" attribute was also required to prevent any focus on the SVG by Internet Explorer and Edge (before Chromium). This is no longer necessary in current browsers (unless your users are still using the older mentioned browsers).

Informative image (without link or button) #

SVG in an img tag #

The most effective solution is to use the alt attribute:

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

As a second choice, use aria-label (but this violates the first rule of ARIA, which is to avoid using ARIA if a native HTML solution exists):

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

Note: To ensure optimal support by assistive technologies and browsers, avoid using aria-labelledby pointing to hidden text:

<p id="alt-text" class="visually-hidden">replacement text</p>
<img src="XXX.svg" role="img" aria-labelledby="alt-text">

Note: Add role="img" to ensure that the element is properly recognized as an image by assistive technologies.

Inline SVG #

The best support for SVG is inline display (<svg> tag).

<svg role="img">
  <title>replacement text</title>
  ...
</svg>

<svg role="img" aria-labelledby="alt-text">
  <title id="alt-text">replacement text</title>
  ...
</svg>

<svg role="img" aria-label="alt-text">
  ...
</svg>

If needed, for images whose content requires a detailed description, it is possible to use aria-labelledby referencing the title and desc:

<svg role="img" aria-labelledby="alt-text description">

  <title id="alt-text">short replacement text</title>

  <desc id="description">
    Detailed description of the information given by the image.
  </desc>
  ...
</svg>

Note: To ensure optimal support by assistive technologies and browsers, avoid using aria-describedby for the description.

If you use the <use> element to clone multiple versions of the SVG, remember to hide it with aria-hidden:

<svg role="img">
  <title>replacement text</title>
    <use href="some-id" fill="blue" x="5" y="5" aria-hidden="true" />
  ...
</svg>

SVG in links or buttons #

If it is possible to display text nearby, the best solution is to simply hide the SVG using the aria-hidden attribute:

<button>
  <svg aria-hidden="true"><!--...--></svg>
  Visible text
</button>

<a href="/Rechercher">
  <svg aria-hidden="true"><!--...--></svg>
  Visible text
</a>

However, since it is not always possible to display text (due to graphic/design/marketing constraints), it is recommended to visually hide text while keeping it readable by assistive technologies using aria-labelledby:

<button aria-labelledby="label"> 
  <span id="label" hidden>Hidden text</span>
  <svg aria-hidden="true"><!--...--></svg>
</button> 

<a href="/Rechercher">
  <span id="label" hidden>Hidden text</span>
  <svg aria-hidden="true"><!--...--></svg>
</a>

The visually-hidden class also allows text to be presented only to assistive technology users (accessible hiding). The following solution is similar to the previous one but should be systematically tested in your targeted browsing environments (browser/assistive technology pairs).

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

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

It is also possible to use the aria-label attribute:

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

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

Last words ... #

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

Webography (articles that have helped me a lot) #

Creating Accessible SVGs - Deque
Accessible SVG test page
Contextually Marking up accessible images and SVGs - Scott O'Hara
SVG Icons and Screen Reader Accessibility
SVG Accessible ! - Github Jeremie Patonnier
Accessible Icon Buttons - Sara Soueidan
Accessible SVGs: Perfect Patterns For Screen Reader Users - Smashing Magazine