AX: inconsistent announcement for SVGs used in <img> element (macOS/VO and iOS/VO)

• Component: Accessibility
• Status: NEW ---

[Patrick H. Lauke]

There are currently inconsistencies with how <img> elements with an SVG are announced by VoiceOver - depending on whether the SVG has a <title> or not, whether the <img> has an explicit additional role="img" or not, and whether or not alt="..." attribute is present. Further, there are inconsistencies between macOS/Safari/VoiceOver and iOS/Safari/VoiceOver.

See this small set of tests https://codepen.io/patrickhlauke/full/XbjYGZ/ (this includes current results of how these different scenarios are announced, but copying them here for clarity as well):

<img src="[svg without title]" alt="Box">
macOS/Safari/VoiceOver: Box, empty group / iOS/Safari/VoiceOver: Box, image

<img src="[svg without title]" alt="Box" role="img">
macOS/Safari/VoiceOver: Box, image / iOS/Safari/VoiceOver: Box, image

<img src="[svg with title]" alt="Box">
macOS/Safari/VoiceOver: Box, group > Test, empty group > end of, Box, group / iOS/Safari/VoiceOver: (completely skipped)

<img src="[svg with title]" alt="Box" role="img">
macOS/Safari/VoiceOver: Box, image / iOS/Safari/VoiceOver: Box, image

<img src="[svg with title]">
macOS/Safari/VoiceOver: Test, empty group / iOS/Safari/VoiceOver: (completely skipped)

<img src="[svg with title]" role="img">
macOS/Safari/VoiceOver: image / iOS/Safari/VoiceOver: image

There are further oddities depending on whether the SVG is an external URL, or a data URL, reported by Barry Pollard here https://www.tunetheweb.com/experiments/svg-images/ (see https://bugs.webkit.org/show_bug.cgi?id=145263#c13)

Successor to https://bugs.webkit.org/show_bug.cgi?id=145263

[Radar WebKit Bug Importer]

<rdar://problem/78780518>

[Barry Pollard]

FYI, I did NOT actually see any noticeable difference for External SVGs nor inlined data SVGs (so probably can remove those test cases from my sample page - was trying out lots of things!).

However I did note that an SVG with a <title> element without an explicit role, didn’t show in the MacOS Voiceover Image Rotor - it was completely ignored from that (like it is on iOS) even though it was keyboard accessible from Voiceover and read out. I guess because the role is Group rather than Img, so not eligible for Image Rotor?

[emily]

I have experienced similar behaviour when an <svg> is used directly. 

<button><svg role="img"><title>Close</title></svg></button> 

VoiceOver only announces 'button' and not the title text.