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.
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.
| 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. |
img with alt, with .svg src with role="img".
Expected announcement:
"Accessible Name, button", and that the graphic can be discovered by hot key.
| 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. |
img with alt.
Expected announcement:
"Accessible Name, button", and that the graphic can be discovered by hot key.
| 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. |
img with alt and exact matching title.
Expected announcement:
"Accessible Name, button", and that the graphic can be discovered by hot key.
| 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 |
img with alt and almost matching title.
Expected announcement:
"Accessible Name, button", and that the graphic can be discovered by hot key.
| 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 |
img with alt and not matching title.
Expected announcement:
"Accessible Name, button", and that the graphic can be discovered by hot key.
| 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. |
img with empty alt and title with value.
Expected announcement:
"Accessible Name, button", and that the graphic can be discovered by hot key.
| 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 |
img with no alt and title with value.
Expected announcement:
"Accessible Name, button".
| 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 |
svg with role=img and aria-labelledby pointing to child title element.
Expected announcement:
"Accessible Name, button".
| 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 |
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.
| 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 |
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.
| 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. |
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.
| 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. |
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.
| 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. |