Suggestions for improving accessibility

Firstly, thanks for this excellent plugin, I think it’s really useful.

I just wanted to make a couple of suggestions for improving the accessibility of the SVG that is output onto pages – specifically for screen reader users. If you could do these things, they would benefit many people.

1) When plugin is putting out the tag for the svg files (ie not advanced mode), you correctly use the alt attribute to include any alternate text that the user has added. However, SVG support in screen readers is still a fairly new thing, and to get around that it’s also necessary to add the role=”img” attribute to the image code too – otherwise some screen readers won’t ‘see’ the SVG image.

Example:
<img src="blah.svg" alt="helpful text" role="img" class="...">

2) When putting out inline SVG, things are a little trickier…

It’s not possible to use the alt attribute on inline SVG, but there is the <title> element which can expose alternate text to screen readers. In theory that should be enough, but as before SVG screen reader support is still young. So it’s necessary to use a bit of ARIA to help. The aria-labelledby attribute helps to link the <title> element to the <svg> element. You need to use a unique id for this.

So if you do this:

<svg class="blah" etc... aria-labelledby="title-id-01">
<title id="title-id-01">Whatever the alternate text was</title>

the image is fully accessible by screen readers.