Bug 187695

Summary:

AX: <img> element with an SVG source have no role instead of role image

Product:

WebKit

Reporter:

Eric Eggert <mail>

Component:

Images

Assignee:

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:

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

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