DEV Community

loading...

Image with SVG source VoiceOver bug

Robert Pearce
senior software engineer who likes to help others help themselves!
・1 min read

Originally posted on https://dear-dia11y.com/image-with-svg-source-voiceover-bug.html

Dear dia11y,

I recently documented an issue where some decorative illustration <img /> elements with SVG sources were, when using VoiceOver in macOS Safari, announcing every <g> (group) element by narrating the word "image". Here's what the HTML essentially was:

<img
  alt=""
  class="foo"
  src="path/to/file.svg"
/>
Enter fullscreen mode Exit fullscreen mode

The alt="" should have alerted the screen reader that this was a decorative image, but no matter — let's add aria-hidden="true" to it.

I recommended this issue and possible fix to a colleague and forgot about it.

This colleague read up on role="presentation" versus aria-hidden="true" and whatnot and eventually discovered that neither solved the problem! What a mystery.

This person did some digging and discovered that image elements with SVG sources that aren't marked as role="img" can have VoiceOver jump into the SVG document and start reading things.

The fix?

<img
  alt=""
  class="foo"
  role="img"
  src="path/to/file.svg"
/>
Enter fullscreen mode Exit fullscreen mode

That's it! HTML and a11y linters will complain about the repetitive role, but we do what we have to do.

It also turned out that this was a problem with non-decorative images. Image alternative text was being read along with the innards of SVG sources (even <text> elements!).

Here are some nicely documented test cases of the issue:

Yours,
Robert W. Pearce

Discussion (0)