SVG role="img" VoiceOver Bug

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.

WebKit Bug: 216364 – AX: with .svg src breaks accessibility for VoiceOver unless role="img" is added to the img.

<img> with .svg src

VoiceOver reads: "Image of student checking My Diet Analysis App on her mobile phone group" "image" "image" "image" "image" "image" "image" "image" "image" "image" "image" "image" "image" "image" "image" "image" "image" "image" "image" "image" "image" "image" "image" "image" "image" "image" "image" "image" "image" "image" "image" "image" "image" "image" "image" "image" "image" "image" "image" "image" "image" "image" "image" "image" "image" "image" "image" "image" "image" "image" "image" "image" "image" "image" "image" "image" "image" "image" "image" "image" "image" "image" "image" "image" "image" "image" "image" "image" "image" "image" "image" "image" "image" "image" "image" "image" "image" "image" "image" "image" "image" "image" "image" "image" "image" "image" "image" "image" "image" "image" "image" "image" "image" "image" "image" "image" "image" "image" "image" "image" "image" "image" "image" "image" "image" "image" "image" "image" "image" "image" "image" "image" "image" "image" "image" ("image" is read 114 times)

<img> with .svg src and role="img"

VoiceOver reads: "Image of student checking My Diet Analysis App on her mobile phone image"