Buttons containing images and SVGs

Last updated: May 21, 2019

The following tests take the best supported patterns from the image and svg static test results and place them within button elements.

These tests do not include using methods other than the img or svg to provide the button or with an accessible name. Some tests do use the title attribute, though the expectation here is that it would provide an accessible description.

Expected results are noted for each test pattern. "Pass" meets all criteria. Passes may still have notes. Any "exceptions" are noted in the result column. A "fail" will be marked and notes for why will be given.

Test 1

Test 1: pattern notes

img with alt, with .svg src with no role="img".

Expected announcement:

"Accessible Name, button", and that the graphic can be discovered by hot key.

Test 1 - Pass: 11. Fail: 3
NVDA (2019.1) JAWS (2019) VO (Mac 10.14.4) VO (iOS 12.2) TalkBack (7.2) Narrator
Firefox Android (66.0.5) na na na na Pass

May announce as "accessible name, button. accessible name, graphic"
na
Firefox (66.0.5) Pass

Discoverable when navigating by graphic hot key.
Pass na na na na
IE (11) Pass

Discoverable when navigating by graphic hot key.
Pass

Discoverable when navigating by graphic hot key.
na na na na
Safari (12.1) na na Pass na na na
Safari (iOS 12.2) na na na Pass na na
Chrome (74) Pass Pass Pass na na na
Chrome Android (74.0) na na na na Pass na
Edge (42) Fail: accessible name not announced. Fail: accessible name not announced. na na na Fail: accessible name not announced.

Test 2

Test 2: pattern notes

img with alt, with .svg src with role="img".

Expected announcement:

"Accessible Name, button", and that the graphic can be discovered by hot key.

Test 2 - Pass: 11. Fail: 3
NVDA (2019.1) JAWS (2019) VO (Mac 10.14.4) VO (iOS 12.2) TalkBack (7.2) Narrator
Firefox Android (66.0.5) na na na na Pass

May announce as "accessible name, button. accessible name, graphic"
na
Firefox (66.0.5) Pass

Discoverable when navigating by graphic hot key.
Pass na na na na
IE (11) Pass

Discoverable when navigating by graphic hot key.
Pass

Discoverable when navigating by graphic hot key.
na na na na
Safari (12.1) na na Pass na na na
Safari (iOS 12.2) na na na Pass na na
Chrome (74) Pass Pass Pass na na na
Chrome Android (74.0) na na na na Pass na
Edge (42) Fail: accessible name not announced. Fail: accessible name not announced. na na na Fail: accessible name not announced.

Test 3

Test 3: pattern notes

img with alt.

Expected announcement:

"Accessible Name, button", and that the graphic can be discovered by hot key.

Test 3 - Pass: 11. Fail: 3
NVDA (2019.1) JAWS (2019) VO (Mac 10.14.4) VO (iOS 12.2) TalkBack (7.2) Narrator
Firefox Android (66.0.5) na na na na Pass

May announce as "accessible name, button. accessible name, graphic"
na
Firefox (66.0.5) Pass

Discoverable when navigating by graphic hot key.
Pass na na na na
IE (11) Pass

Discoverable when navigating by graphic hot key.
Pass

Discoverable when navigating by graphic hot key.
na na na na
Safari (12.1) na na Pass na na na
Safari (iOS 12.2) na na na Pass na na
Chrome (74) Pass Pass Pass na na na
Chrome Android (74.0) na na na na Pass na
Edge (42) Fail: accessible name not announced. Fail: accessible name not announced. na na na Fail: accessible name not announced.

Test 4

Test 4: pattern notes

img with alt and exact matching title.

Expected announcement:

"Accessible Name, button", and that the graphic can be discovered by hot key.

Test 4 - Pass: 14
NVDA (2019.1) JAWS (2019) VO (Mac 10.14.4) VO (iOS 12.2) TalkBack (7.2) Narrator
Firefox Android (66.0.5) na na na na Pass

May announce as "accessible name, button. accessible name, graphic"
na
Firefox (66.0.5) Pass

Discoverable when navigating by graphic hot key.
Pass na na na na
IE (11) Pass

Discoverable when navigating by graphic hot key.
Pass

Discoverable when navigating by graphic hot key.
na na na na
Safari (12.1) na na Pass na na na
Safari (iOS 12.2) na na na Pass na na
Chrome (74) Pass Pass Pass na na na
Chrome Android (74.0) na na na na Pass na
Edge (42) Pass Pass na na na Pass

Test 5

Test 5: pattern notes

img with alt and almost matching title.

Expected announcement:

"Accessible Name, button", and that the graphic can be discovered by hot key.

Test 5 - Pass: 13. Exception: 1.
NVDA (2019.1) JAWS (2019) VO (Mac 10.14.4) VO (iOS 12.2) TalkBack (7.2) Narrator
Firefox Android (66.0.5) na na na na Pass

May announce as "accessible name, button. accessible name, graphic"
na
Firefox (66.0.5) Exception: Image's alt and title are both announced.

Discoverable when navigating by graphic hot key.
Pass na na na na
IE (11) Pass

Discoverable when navigating by graphic hot key.
Pass

Discoverable when navigating by graphic hot key.
na na na na
Safari (12.1) na na Pass na na na
Safari (iOS 12.2) na na na Pass na na
Chrome (74) Pass Pass Pass na na na
Chrome Android (74.0) na na na na Pass na
Edge (42) Pass Pass na na na Pass

Test 6

Test 6: pattern notes

img with alt and not matching title.

Expected announcement:

"Accessible Name, button", and that the graphic can be discovered by hot key.

Test 6 - Pass: 11. Fail: 3.
NVDA (2019.1) JAWS (2019) VO (Mac 10.14.4) VO (iOS 12.2) TalkBack (7.2) Narrator
Firefox Android (66.0.5) na na na na Pass

May announce as "accessible name, button. accessible name, graphic"
na
Firefox (66.0.5) Pass

Discoverable when navigating by graphic hot key.
Pass na na na na
IE (11) Pass

Discoverable when navigating by graphic hot key.
Pass

Discoverable when navigating by graphic hot key.
na na na na
Safari (12.1) na na Pass na na na
Safari (iOS 12.2) na na na Pass na na
Chrome (74) Pass Pass Pass na na na
Chrome Android (74.0) na na na na Pass na
Edge (42) Fail: Button's title attribute used for accessible name. Fail: Button's title attribute used for accessible name. na na na Fail: Button's title attribute used for accessible name.

Test 7

Test 7: pattern notes

img with empty alt and title with value.

Expected announcement:

"Accessible Name, button", and that the graphic can be discovered by hot key.

Test 7 - Pass: 6. Fail: 8.
NVDA (2019.1) JAWS (2019) VO (Mac 10.14.4) VO (iOS 12.2) TalkBack (7.2) Narrator
Firefox Android (66.0.5) na na na na Pass

May announce as "accessible name, button. accessible name, graphic"
na
Firefox (66.0.5) Pass

Discoverable when navigating by graphic hot key.
Pass na na na na
IE (11) Fail: no accessible name announced. Fail: no accessible name announced. na na na na
Safari (12.1) na na Fail: no accessible name announced. na na na
Safari (iOS 12.2) na na na Fail: no accessible name announced. na na
Chrome (74) Fail: no accessible name announced. Fail: no accessible name. Announced as "unlabelled".
Fail: no accessible name announced. na na na
Chrome Android (74.0) na na na na Fail: no accessible name announced. na
Edge (42) Pass Pass na na na Pass

Test 8

Test 8: pattern notes

img with no alt and title with value.

Expected announcement:

"Accessible Name, button".

Test 8 - Pass: 12. Fail: 2.
NVDA (2019.1) JAWS (2019) VO (Mac 10.14.4) VO (iOS 12.2) TalkBack (7.2) Narrator
Firefox Android (66.0.5) na na na na Pass

May announce as "accessible name, button. accessible name, graphic"
na
Firefox (66.0.5) Pass

Discoverable when navigating by graphic hot key.
Pass na na na na
IE (11) Pass

Discoverable when navigating by graphic hot key.
Pass

Discoverable when navigating by graphic hot key.
na na na na
Safari (12.1) na na Fail: no accessible name announced. na na na
Safari (iOS 12.2) na na na Fail: no accessible name announced. na na
Chrome (74) Pass Pass Pass na na na
Chrome Android (74.0) na na na na Pass na
Edge (42) Pass Pass na na na Pass

Test 19

Test 19: pattern notes

svg with role=img and aria-labelledby pointing to child title element.

Expected announcement:

"Accessible Name, button".

Test 19 - Pass: 11. Exception: 2. Fail: 1.
NVDA (2019.1) JAWS (2019) VO (Mac 10.14.4) VO (iOS 12.2) TalkBack (7.2) Narrator
Firefox Android (66.0.5) na na na na Exception: announces as "button, accessible name, graphic, graphic"
na
Firefox (66.0.5) Exception: Accessible name announced twice.

Discoverable when navigating by graphic hot key.
Fail: no accessible name. Announced as "unlabelled". na na na na
IE (11) Pass

Discoverable when navigating by graphic hot key.
Pass na na na na
Safari (12.1) na na Pass na na na
Safari (iOS 12.2) na na na Pass na na
Chrome (74) Pass Pass Pass na na na
Chrome Android (74.0) na na na na Pass na
Edge (42) Pass Pass na na na Pass

Test 10

Test 10: pattern notes

svg with role=img. Child title element and aria-hidden="true" on use element.

Expected announcement:

"Accessible Name, button", and that the graphic can be discovered by hot key.

Test 10 - Pass: 10. Exception: 1. Fail: 3.
NVDA (2019.1) JAWS (2019) VO (Mac 10.14.4) VO (iOS 12.2) TalkBack (7.2) Narrator
Firefox Android (66.0.5) na na na na Exception:

Announces as "button, accessible name graphic"
na
Firefox (66.0.5) Pass

Discoverable when navigating by graphic hot key.
Fail: no accessible name. Announced as "unlabelled". na na na na
IE (11) Pass

Discoverable when navigating by graphic hot key.
Pass na na na na
Safari (12.1) na na Fail: no accessible name announced. na na na
Safari (iOS 12.2) na na na Fail: no accessible name announced. na na
Chrome (74) Pass Pass Pass na na na
Chrome Android (74.0) na na na na Pass na
Edge (42) Pass Pass na na na Pass

Test 11

Test 11: pattern notes

svg with role=img and child title element. Link and button each have their own title attribute.

Expected announcement:

"Accessible Name, button", button title attribute announced as description.

Test 11 - Pass: 9. Fail: 5.
NVDA (2019.1) JAWS (2019) VO (Mac 10.14.4) VO (iOS 12.2) TalkBack (7.2) Narrator
Firefox Android (66.0.5) na na na na Fail: Button's title attribute provides accessible name.  Also announces "accessible name, graphic"
na
Firefox (66.0.5) Fail: Button's title attribute provides accessible name. Fail: Button's title attribute provides accessible name. na na na na
IE (11) Pass

Discoverable when navigating by graphic hot key.

Button's title attribute displayed on hover.
Pass na na na na
Safari (12.1) na na Fail: Button's title attribute provides accessible name. na na na
Safari (iOS 12.2) na na na Fail: Button's title attribute provides accessible name. na na
Chrome (74) Pass

SVG title element displayed on hover.
Pass

SVG title element displayed on hover.
Pass na na na
Chrome Android (74.0) na na na na Pass na
Edge (42) Pass
Button title attribute displayed on hover and focus of link.
Pass
Button title attribute displayed on hover and focus of link.
na na na Pass
Button title attribute displayed on hover and focus of link.

Test 12

Test 12: pattern notes

svg with role=img and child SVG with aria-label.

Expected announcement:

"Accessible Name, button", and that the graphic can be discovered by hot key.

Test 12 - Pass: 11. Fail: 3.
NVDA (2019.1) JAWS (2019) VO (Mac 10.14.4) VO (iOS 12.2) TalkBack (7.2) Narrator
Firefox Android (66.0.5) na na na na Pass

May announce as "accessible name, button. accessible name, graphic"
na
Firefox (66.0.5) Pass

Discoverable when navigating by graphic hot key.
Pass na na na na
IE (11) Pass

Discoverable when navigating by graphic hot key.
Pass na na na na
Safari (12.1) na na Pass na na na
Safari (iOS 12.2) na na na Pass na na
Chrome (74) Pass Pass Pass na na na
Chrome Android (74.0) na na na na Pass na
Edge (42) Fail: accessible name not announced. Fail: accessible name not announced. na na na Fail: accessible name not announced.

Test 13

Test 13: pattern notes

img with alt and link and button with title attributes..

Expected announcement:

"Accessible Name, button", with button title attributes announced as descriptions, and that the graphic can be discovered by hot key.

Test 13 - Pass: 9. Exception: 2. Fail: 3.
NVDA (2019.1) JAWS (2019) VO (Mac 10.14.4) VO (iOS 12.2) TalkBack (7.2) Narrator
Firefox Android (66.0.5) na na na na Exception: Button's title attribute is not announced as a description.

May announce as "accessible name, button. accessible name, graphic"
na
Firefox (66.0.5) Pass

Discoverable when navigating by graphic hot key.
Pass na na na na
IE (11) Exception: Button's title attribute is not announced as a description.  Otherwise announced correctly.

Discoverable when navigating by graphic hot key.
Pass

Discoverable when navigating by graphic hot key.
na na na na
Safari (12.1) na na Pass na na na
Safari (iOS 12.2) na na na Pass na na
Chrome (74) Pass Pass Pass na na na
Chrome Android (74.0) na na na na Pass na
Edge (42) Fail: Button's title attribute used for accessible name. Announced multiple times.

Button title attribute displayed on hover and focus of link.
Fail: Button's title attribute used for accessible name. Announced multiple times.

Button title attribute displayed on hover and focus of link.
na na na Fail: Button's title attribute used for accessible name.
Button title attribute displayed on hover and focus of link.