iOS and VoiceOver and an IMG with an SVG as its source

The purpose of this page is to demonstrate an iOS / VoiceOver bug where VoiceOver will not find an image that is coded as an IMG with an SVG as its source, unless the IMG tag has role=img. Even then, explore by touch does not work.

Test cases 1 and 2 demonstrate the typical IMG tag with an PNG - one is an image and the other is an image link. Test cases 3 and 4 demonstrate an IMG tag with an SVG - with and without role=img on the IMG tag. Test cases 5 and 6 demonstrate an anchor containing an IMG with an SVG - with and without role=img on the IMG tag. Test cases 7 and 8 demonstrate an IMG tag with an SVG with an aria-label instead of alt attribute - with and without role=img on the IMG tag. Test cases 9 and 10 add CSS size styling to Test Cases 3 and 4.

start here

Test Case 1: PNG in an IMG

The image below is just your plain-old, everyday IMG tag with a PNG as its source.

Observations: the image is discoverable as expected.

png image

Test Case 2: PNG in an IMG in an Anchor

The image below is just your plain-old, everyday IMG tag with a PNG as its source, wrapped in an anchor.

Observations: the image link works as expected.

Test Case 3: SVG in an IMG and alt

The image below is an IMG tag with an SVG as its source.

Observations:

In Firefox with NVDA, the image is discoverable as expected.
In IE with NVDA, the image is discoverable as expected.
On an iOS device with VoiceOver ON, the image cannot be found by swiping or touch.

Test Case 4: SVG in an IMG with role=img and alt

The image below is an IMG tag, with role=img, with an SVG as its source.

Observations:

In Firefox with NVDA, the image is discoverable as expected.
In IE with NVDA, the image is discoverable as expected.
On an iOS device with VoiceOver ON, the image can be found by swiping, but not by touch.

Test Case 5: SVG in an IMG in an Anchor

The image below is an IMG tag with an SVG as its source, wrapped in an anchor.

Observations:

In Firefox with NVDA, the image link works as expected.
In IE with NVDA, the image link works as expected.
On an iOS device with VoiceOver OFF, the image link works as expected.
On an iOS device with VoiceOver ON, user cannot swipe to or touch the image link at all.

Test Case 6: SVG in an IMG with role=img in an Anchor

The image below is an IMG tag, with role=img, with an SVG as its source, wrapped in an anchor.

Observations:

In Firefox with NVDA, the image link works as expected.
In IE with NVDA, the image link works as expected.
On an iOS device with VoiceOver OFF, the image link works as expected.
On an iOS device with VoiceOver ON, the image link can be found by swiping, but not by touch.

svg image with role equals img in an anchor

Test Case 7: SVG in an IMG and aria-label

The image below is an IMG tag with an SVG as its source and aria-label.

Observations:

In Firefox with NVDA, the image is discoverable as expected.
In IE with NVDA, the image is discoverable as expected.
On an iOS device with VoiceOver ON, the image cannot be found by swiping or touch.

Test Case 8: SVG in an IMG with role=img and aria-label

The image below is an IMG tag, with role=img, with an SVG as its source and aria-label.

Observations:

In Firefox with NVDA, the image is discoverable as expected.
In IE with NVDA, the image is discoverable as expected.
On an iOS device with VoiceOver ON, the image can be found by swiping, but not by touch.

Test Case 9: SVG in an IMG and alt and image size set

The image below is an IMG tag with an SVG as its source and image size set via inline CSS on the img tag.

Observations:

In Firefox with NVDA, the image is discoverable as expected.
In IE with NVDA, the image is discoverable as expected.
On an iOS device with VoiceOver ON, the image cannot be found by swiping or touch.

Test Case 10: SVG in an IMG with role=img and alt and image size set

The image below is an IMG tag, with role=img, with an SVG as its source and image size set via inline CSS on the img tag.

Observations:

In Firefox with NVDA, the image is discoverable as expected.
In IE with NVDA, the image is discoverable as expected.
On an iOS device with VoiceOver ON, the image can be found by swiping and dragging, but not by direct touch.

svg image with role equals img and size set

SVG Image Attribution: By Tonchino (Own work) [CC BY-SA 3.0 (http://creativecommons.org/licenses/by-sa/3.0)], via Wikimedia Commons.