Bug 187695

Summary: AX: <img> element with an SVG source have no role instead of role image
Product: WebKit Reporter: Eric Eggert <mail>
Component: ImagesAssignee: Nobody <webkit-unassigned>
Status: NEW    
Severity: Normal CC: Carolyn_MacLeod, cfleizach, dlembree, jcraig, jdiggs, kayleeknowles42, mfairchild365, mjs, redux, sarahmhigley, scottaohara, spell, timothy, webkit-bug-importer
Priority: P2 Keywords: InRadar
Version: Safari Technology Preview   
Hardware: All   
OS: All   
URL: InRadar
Attachments:
Description Flags
PNG image shows the role="img"
none
SVG image without a matching ARIA role
none
Screenshot of accessibility tree from safari preview
none
Screenshot of accessibility tree from safari none

Eric Eggert
Reported 2018-07-16 05:59:43 PDT
Created attachment 345091 [details] PNG image shows the role="img" Related to #145263? When using an image element with an SVG source, the ARIA role img for the <img> element is not set. This leads to VoiceOver announcing the SVG image as a “group” instead of an “image”. It also means that on iOS the image can’t be discovered by touching the screen. An interactive example can be found here: https://codepen.io/yatil/pen/BPKBEw I have attached images demonstrating the problem, too.
Attachments
PNG image shows the role="img" (246.42 KB, image/png)
2018-07-16 05:59 PDT, Eric Eggert 		no flags
Details
SVG image without a matching ARIA role (257.03 KB, image/png)
2018-07-16 06:00 PDT, Eric Eggert 		no flags
Details
Screenshot of accessibility tree from safari preview (251.04 KB, image/png)
2021-03-05 02:22 PST, Joanmarie Diggs 		no flags
Details
Screenshot of accessibility tree from safari (233.52 KB, image/png)
2021-03-05 02:23 PST, Joanmarie Diggs 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Eric Eggert
Comment 1 2018-07-16 06:00:28 PDT
Created attachment 345092 [details] SVG image without a matching ARIA role
Scott
Comment 2 2019-03-20 07:03:47 PDT
Adding onto this report: Testing with iOS VoiceOver and Safari (re-verified today with 12.1.4) an <img> that points to a .svg will be completely ignored, even if it is given alt text.
Dennis
Comment 3 2019-03-20 11:20:53 PDT
Please assign this bug. As reported, the role outputs as "group" instead of "image" in Voiceover. Tested on Safari (Mac 12.0.2) and Voiceover (Mac 10.14.2).
Sarah Higley
Comment 4 2019-03-20 11:43:36 PDT
I've run into this problem often enough that it came up in an accessibility training session. I also verified in iOS Safari + VO 12.1.4
Michael Spellacy
Comment 5 2019-05-22 06:39:30 PDT
It would be great if this was fixed.
Maciej Stachowiak
Comment 6 2020-02-03 18:56:01 PST
*** Bug 201354 has been marked as a duplicate of this bug. ***
Maciej Stachowiak
Comment 7 2020-02-03 19:00:41 PST
<rdar://problem/55888899>
Radar WebKit Bug Importer
Comment 8 2020-02-03 19:01:00 PST
<rdar://problem/59136057>
Joanmarie Diggs
Comment 9 2021-03-05 02:22:02 PST
I think this has been fixed in Safari Preview. I can reproduce the problem using VoiceOver in Safari, but in Safari Preview VO announces all images as images. In addition, I will attach screenshots of the accessibility subtree shown in the XCode accessibility inspector for Safari and Safari Preview. In Safari the relevant portion of the accessibility tree has four siblings: * Webkit link * Webkit group * Webkit image * Webkit image In Safari Preview, the tree looks like this: * Webkit link (1 child): - WebKit image * Webkit image * WebKit image * Webkit image
Joanmarie Diggs
Comment 10 2021-03-05 02:22:41 PST
Created attachment 422356 [details] Screenshot of accessibility tree from safari preview
Joanmarie Diggs
Comment 11 2021-03-05 02:23:28 PST
Created attachment 422357 [details] Screenshot of accessibility tree from safari
Joanmarie Diggs
Comment 12 2021-03-05 02:30:05 PST
Looks like a duplicate of https://bugs.webkit.org/show_bug.cgi?id=160705
Note You need to log in before you can comment on or make changes to this bug.