Image elements pointing to SVG src might not read correctly in VoiceOver

[emilbjorklund]

Not an SVG bug in itself, but rather a browser/a11y bug that pertains to using SVG images.

This markup:

<img src="image.svg" alt="hi">

...will not get read properly in VoiceOver/Safari.
From the excellent post on image accessibility by Scott O'Hara:

Desktop Safari and VoiceOver will announce “hi, group” with no announcement of the element being an “image”. However, what’s more problematic is that iOS Safari and VoiceOver will skip over the element all together, as if it were decorative.

The fix is to add a role="img" attribute to the markup. More from Scott:

Proving an image element with a role="img" will announce the “image” role as intended with macOS Safari, and fix it from being ignored on iOS. You’ll get some automated testing tools throwing warnings for the redundant role, but that’s better than it being incorrectly announced or ignored, in my opinion.

Link to WebKit issue