226551 2021-06-02 13:33:21 -0700 AX: inconsistent announcement for SVGs used in <img> element (macOS/VO and iOS/VO) 2024-01-17 09:00:42 -0800 1 1 1 Unclassified WebKit Accessibility WebKit Nightly Build All All NEW InRadar P2 Normal --- 1 redux webkit-unassigned barry emily.mann jcraig webkit-bug-importer oldest_to_newest 1766129 0 redux 2021-06-02 13:33:21 -0700 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 1766131 1 webkit-bug-importer 2021-06-02 13:33:35 -0700 <rdar://problem/78780518> 1766135 2 barry 2021-06-02 13:44:00 -0700 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? 2005604 3 emily.mann 2024-01-17 09:00:42 -0800 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.