WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: using .svg images accessibly

for

From:
Date: Aug 4, 2017 9:03AM

On 03/08/2017 16:20, Sandy Feldman wrote:
> What do you think?
> http://haltontrophies.com/svg/

These links work with screen readers, but probably not for the reasons
you think.

The accessible name (link text) for the link is being provided by the
title attribute on the <a> element, not the <title> element in the SVG.
If you remove the title attribute the links stop working properly with
some screen reader/browser combinations.

The reason is that you're using the <use> element in the SVG, with all
the accessibility applied to the original definition of the icon. When
you use the <use> element to duplicate the original, the accessibility
isn't reliably inherited.

A related problem is that the title attribute can cause problems when
it's used on links. More on this here:
https://www.paciellogroup.com/blog/2013/01/using-the-html-title-attribute-updated/

You have a number of options...

1. Use the aria-label attribute instead of the title attribute.

This will provide an accessible name for the link that screen readers
can access, without the problems caused by the title attribute for other
AT users:

<a href="..." aria-label="Find me on YouTube">

2. Use the <title> element inside the <use> element.

You'd need to do this every time you used the icon. Something like this:

<a class="youtube" href="https://www.youtube.com/".
<svg class="socialIcon">
<use aria-labelledby="youtube-title" xlink:href="#icon-youtube">
<title id="youtube-title">Find me on YouTube</title>
</use>
</svg>
</a>

3. Use an <img> element.

The icons are just simple static images, so you could save each one in
its own .svg file and use it like you would any other image format:

<img src="youtube-icon.svg" alt="Find me on YouTube">

You'll still get the flexibility/scalability of the SVG, but with the
simple accessibility of the <img> element.

HTH
Léonie.

--
@LeonieWatson @ <EMAIL REMOVED> tink.uk Carpe diem