Bug 187695 - AX: <img> element with an SVG source have no role instead of role image
Summary: AX: <img> element with an SVG source have no role instead of role image
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Images (show other bugs)
Version: Safari Technology Preview
Hardware: All All
: P2 Normal
Assignee: Nobody
URL: InRadar
Keywords: InRadar
: 201354 (view as bug list)
Depends on:
Blocks:
 
Reported: 2018-07-16 05:59 PDT by Eric Eggert
Modified: 2021-03-05 02:30 PST (History)
14 users (show)

See Also:

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 an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
Description Eric Eggert 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.
Comment 1 Eric Eggert 2018-07-16 06:00:28 PDT 
Created attachment 345092 [details]
SVG image without a matching ARIA role
Comment 2 Scott 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.
Comment 3 Dennis 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).
Comment 4 Sarah Higley 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
Comment 5 Michael Spellacy 2019-05-22 06:39:30 PDT 
It would be great if this was fixed.
Comment 6 Maciej Stachowiak 2020-02-03 18:56:01 PST 
*** Bug 201354 has been marked as a duplicate of this bug. ***
Comment 7 Maciej Stachowiak 2020-02-03 19:00:41 PST 
<rdar://problem/55888899>
Comment 8 Radar WebKit Bug Importer 2020-02-03 19:01:00 PST 
<rdar://problem/59136057>
Comment 9 Joanmarie Diggs 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
Comment 10 Joanmarie Diggs 2021-03-05 02:22:41 PST 
Created attachment 422356 [details]
Screenshot of accessibility tree from safari preview
Comment 11 Joanmarie Diggs 2021-03-05 02:23:28 PST 
Created attachment 422357 [details]
Screenshot of accessibility tree from safari
Comment 12 Joanmarie Diggs 2021-03-05 02:30:05 PST 
Looks like a duplicate of https://bugs.webkit.org/show_bug.cgi?id=160705