Nothing Special   »   [go: up one dir, main page]
RESOLVED WORKSFORME Bug 216364
AX: <img> with .svg src breaks accessibility for VoiceOver unless role="img" is added to the img. 
https://bugs.webkit.org/show_bug.cgi?id=216364
Summary AX: <img> with .svg src breaks accessibility for VoiceOver unless role="img" ...
Paul J. Adam
Reported 2020-09-10 07:35:04 PDT
Created attachment 408440 [details] Bad VoiceOver output Overview: VoiceOver Accessibility is broken when reading an <img> element that uses a .svg file as the source. VoiceOver will not read the .svg as an image element and it incorrectly reads 114 unlabelled "image" elements that are internal to the .svg file. The only fix is to add role="img" to all <img> elements using .svg src values. Steps to Reproduce: 1. Open Safari on iOS or macOS and turn on VoiceOver. 2. Visit test case demo at http://pauljadam.com/demos/svg-role-img.html. 3. Navigate via Image navigation with VoiceOver (control + option + command + g). Expected Results: VoiceOver moves focus through the 2 image examples reading their alt text and image role. Actual Results: VoiceOver movies focus through 114 unlabelled "image" elements in the first example and 1 image with alt text in the second example that uses role="img".
Attachments
Bad VoiceOver output (132.28 KB, image/png)
2020-09-10 07:35 PDT, Paul J. Adam 		no flags
Details
Good VoiceOver output on the role="img" example (125.85 KB, image/png)
2020-09-10 07:35 PDT, Paul J. Adam 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Radar WebKit Bug Importer
Comment 1 2020-09-10 07:35:15 PDT
<rdar://problem/68642213>
Paul J. Adam
Comment 2 2020-09-10 07:35:44 PDT
Created attachment 408441 [details] Good VoiceOver output on the role="img" example
Giacomo Petri
Comment 3 2022-12-05 06:21:51 PST
Still valid. Any update?
Paul J. Adam
Comment 4 2022-12-05 06:32:09 PST
I'm no longer able to reproduce the bug so it appears to be fixed :)
kbuechner
Comment 5 2023-03-29 08:05:06 PDT
I am actually able to reproduce this bug. I have a group of small SVGs (flags of various countries) in a ul and without `role="img"` VO announces nonexistent images 5 or 6 times before announcing the actual SVGs. This only happens with some of the images, not all of them, even though they are all SVGs in the same list rendered with identical HTML. I can't find anything the incorrectly-announced images have in common that they don't share with images that are announced correctly.
Note You need to log in before you can comment on or make changes to this bug.