Links 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 <a href="#!"> elements.
These tests do are not intended to include methods other than using img or svg elements to provide the link with an accessible name. Some tests do use the title attribute on a link, though the expectation here is that it would provide an accessible description.
These results do not necessarily match what is exposed to the accessibility API of each browser, but rather illustrate what people using these screen reader and browser pairings will experience.
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, link", and that the graphic can be discovered by hot key.
Test 1 - Pass: 10. Exception: 4.
|
NVDA (2019.1) |
JAWS (April 2019) |
VO (Mac 10.14.4) |
VO (iOS 12.2) |
TalkBack (7.2) |
Narrator |
| Firefox Android (66.0.5) |
na |
na |
na |
na |
Pass |
na |
| Firefox (66.0.5) |
Pass |
Pass |
na |
na |
na |
na |
| IE (11) |
Pass |
Pass |
na |
na |
na |
na |
| Safari (12.1) |
na |
na |
Exception: Accessible name announced.
Image not discoverable. |
na |
na |
na |
| Safari (iOS 12.2) |
na |
na |
na |
Exception: Accessible name announced.
Image not discoverable. |
na |
na |
| Chrome (74) |
Pass |
Exception: Graphic not discoverable with hot key. |
Pass |
na |
na |
na |
| Chrome Android (74.0) |
na |
na |
na |
na |
Pass |
na |
| Edge pre-Chromium (42) |
Pass |
Exception: JAWS + Edge have bugged announcement when navigating by graphics. |
na |
na |
na |
Pass (no graphic announcement)
|
Test 2
Test 2: pattern notes
img with alt, with .svg src with role="img".
Expected announcement:
"Accessible Name, link", and that the graphic can be discovered by hot key.
Test 2 - Pass: 12. Exception: 2.
|
NVDA (2019.1) |
JAWS (April 2019) |
VO (Mac 10.14.4) |
VO (iOS 12.2) |
TalkBack (7.2) |
Narrator |
| Firefox Android (66.0.5) |
na |
na |
na |
na |
Pass |
na |
| Firefox (66.0.5) |
Pass |
Pass |
na |
na |
na |
na |
| IE (11) |
Pass |
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 |
Exception: Graphic not discoverable with hot key. |
Pass |
na |
na |
na |
| Chrome Android (74.0) |
na |
na |
na |
na |
Pass |
na |
| Edge pre-Chromium (42) |
Pass |
Exception: JAWS + Edge have bugged announcement when navigating by graphics. |
na |
na |
na |
Pass (no graphic announcement)
|
Test 3
Test 3: pattern notes
img with alt.
Expected announcement:
"Accessible Name, link", and that the graphic can be discovered by hot key.
Test 3 - Pass: 12. Exception: 2.
|
NVDA (2019.1) |
JAWS (April 2019) |
VO (Mac 10.14.4) |
VO (iOS 12.2) |
TalkBack (7.2) |
Narrator |
| Firefox Android (66.0.5) |
na |
na |
na |
na |
Pass |
na |
| Firefox (66.0.5) |
Pass |
Pass |
na |
na |
na |
na |
| IE (11) |
Pass |
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 |
Exception: Graphic not discoverable with hot key. |
Pass |
na |
na |
na |
| Chrome Android (74.0) |
na |
na |
na |
na |
Pass |
na |
| Edge pre-Chromium (42) |
Pass |
Exception: JAWS + Edge have bugged announcement when navigating by graphics. |
na |
na |
na |
Pass (no graphic announcement)
|
Test 4
Test 4: pattern notes
img with alt and exact matching title.
Expected announcement:
"Accessible Name, link", and that the graphic can be discovered by hot key.
Test 4 - Pass: 11. Exception: 3.
|
NVDA (2019.1) |
JAWS (April 2019) |
VO (Mac 10.14.4) |
VO (iOS 12.2) |
TalkBack (7.2) |
Narrator |
| Firefox Android (66.0.5) |
na |
na |
na |
na |
Pass |
na |
| Firefox (66.0.5) |
Pass |
Pass |
na |
na |
na |
na |
| IE (11) |
Pass |
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) |
Exception: image's alt and title attribute both announced when navigating to link by graphic or tab key. |
Exception: Graphic not discoverable with hot key. |
Pass |
na |
na |
na |
| Chrome Android (74.0) |
na |
na |
na |
na |
Pass |
na |
| Edge pre-Chromium (42) |
Pass |
Exception: JAWS + Edge have bugged announcement when navigating by graphics. |
na |
na |
na |
Pass (no graphic announcement)
|
Test 5
Test 5: pattern notes
img with alt and almost matching title.
Expected announcement:
"Accessible Name, link", and that the graphic can be discovered by hot key.
Test 5 - Pass: 7. Exception: 7.
|
NVDA (2019.1) |
JAWS (April 2019) |
VO (Mac 10.14.4) |
VO (iOS 12.2) |
TalkBack (7.2) |
Narrator |
| Firefox Android (66.0.5) |
na |
na |
na |
na |
Pass |
na |
| Firefox (66.0.5) |
Exception: Alt and title attribute both announced for graphic within link. |
Pass |
na |
na |
na |
na |
| IE (11) |
Pass |
Pass |
na |
na |
na |
na |
| Safari (12.1) |
na |
na |
Exception: title attribute announced as description |
na |
na |
na |
| Safari (iOS 12.2) |
na |
na |
na |
Exception: title attribute announced as description |
na |
na |
| Chrome (74) |
Exception: image's alt and title attribute both announced when navigating to link by graphic or tab key. |
Exception: Graphic not discoverable with hot key. |
Exception: title attribute announced as description |
na |
na |
na |
| Chrome Android (74.0) |
na |
na |
na |
na |
Pass |
na |
| Edge pre-Chromium (42) |
Pass |
Exception: JAWS + Edge have bugged announcement when navigating by graphics. |
na |
na |
na |
Pass (no graphic announcement)
|
Test 6
Test 6: pattern notes
img with alt and not matching title.
Expected announcement:
"Accessible Name, link", and that the graphic can be discovered by hot key. Graphic description may be announced.
Test 6 - Pass: 12. Exception: 2.
|
NVDA (2019.1) |
JAWS (April 2019) |
VO (Mac 10.14.4) |
VO (iOS 12.2) |
TalkBack (7.2) |
Narrator |
| Firefox Android (66.0.5) |
na |
na |
na |
na |
Pass |
na |
| Firefox (66.0.5) |
Pass |
Pass |
na |
na |
na |
na |
| IE (11) |
Pass |
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 |
Exception: Graphic not discoverable with hot key. |
Pass |
na |
na |
na |
| Chrome Android (74.0) |
na |
na |
na |
na |
Pass |
na |
| Edge pre-Chromium (42) |
Pass |
Exception: JAWS + Edge have bugged announcement when navigating by graphics. |
na |
na |
na |
Pass (no graphic announcement)
|
Test 7
Test 7: pattern notes
img with empty alt and title with value.
Expected announcement:
"Accessible Name, link", and that the graphic can be discovered by hot key.
Test 7 - Pass: 6. Exception: 1. Fail: 7.
|
NVDA (2019.1) |
JAWS (April 2019) |
VO (Mac 10.14.4) |
VO (iOS 12.2) |
TalkBack (7.2) |
Narrator |
| Firefox Android (66.0.5) |
na |
na |
na |
na |
Pass |
na |
| Firefox (66.0.5) |
Pass |
Pass |
na |
na |
na |
na |
| IE (11) |
Fail: Image title does not provide link accessible name.
Graphic not discoverable with hot keys. |
Pass |
na |
na |
na |
na |
| Safari (12.1) |
na |
na |
Fail: Image title does not provide link accessible name.
Image not discoverable with hot keys. |
na |
na |
na |
| Safari (iOS 12.2) |
na |
na |
na |
Fail: Image title does not provide link accessible name.
Image not discoverable when navigating by images. |
na |
na |
| Chrome (74) |
Fail: Image title does not provide link accessible name.
Graphic not discoverable with hot keys. |
Pass |
Fail: Image title does not provide link accessible name.
Image not discoverable with hot keys. |
na |
na |
na |
| Chrome Android (74.0) |
na |
na |
na |
na |
Fail: No accessible name announced.
Link announces URL. |
na |
| Edge pre-Chromium (42) |
Exception: Not discoverable by graphic hot key. |
Fail: Accessible name only announced if using Tab key.
JAWS + Edge have bugged announcement when navigating by graphics. |
na |
na |
na |
Pass (no graphic announcement)
|
Test 8
Test 8: pattern notes
img with no alt and title with value.
Expected announcement:
"Accessible Name, link", and that the graphic can be discovered by hot key.
Test 8 - Pass: 12. Exception: 2.
|
NVDA (2019.1) |
JAWS (April 2019) |
VO (Mac 10.14.4) |
VO (iOS 12.2) |
TalkBack (7.2) |
Narrator |
| Firefox Android (66.0.5) |
na |
na |
na |
na |
Pass |
na |
| Firefox (66.0.5) |
Pass |
Pass |
na |
na |
na |
na |
| IE (11) |
Pass |
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 |
Exception: Graphic not discoverable with hot key. |
Pass |
na |
na |
na |
| Chrome Android (74.0) |
na |
na |
na |
na |
Pass |
na |
| Edge pre-Chromium (42) |
Pass |
Exception: JAWS + Edge have bugged announcement when navigating by graphics. |
na |
na |
na |
Pass (no graphic announcement)
|
Test 9
Test 9: pattern notes
svg with role=img and aria-labelledby pointing to child title element.
Expected announcement:
"Accessible Name, link", and that the graphic can be discovered by hot key.
Test 9 - Pass: 8. Exception: 3. Fail: 3.
|
NVDA (2019.1) |
JAWS (April 2019) |
VO (Mac 10.14.4) |
VO (iOS 12.2) |
TalkBack (7.2) |
Narrator |
| Firefox Android (66.0.5) |
na |
na |
na |
na |
Fail: Link announced without accessible name.
|
na |
| Firefox (66.0.5) |
Exception: Accessible name announced twice. |
Fail: Accessible name announced with graphic hot key or navigating by virtual cursor, followed by URL string.
Navigating by Tab key announces URL string and may not announce accessible name. |
na |
na |
na |
na |
| IE (11) |
Fail: Announced if navigating with Tab key. Ignored if navigating by graphic hot key or virtual cursor. |
Exception: Graphic not discoverable with 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 |
Exception: Graphic not discoverable with hot key. |
Pass |
na |
na |
na |
| Chrome Android (74.0) |
na |
na |
na |
na |
Pass |
na |
| Edge pre-Chromium (42) |
Pass |
Pass |
na |
na |
na |
Pass (no graphic announcement)
|
Test 10
Test 10: pattern notes
svg with role=img, title element provides accessible name, use set to aria-hidden="true".
Expected announcement:
"Accessible Name, link", and that the graphic can be discovered by hot key.
Test 10 - Pass: 9. Exception: 2. Fail: 3.
|
NVDA (2019.1) |
JAWS (April 2019) |
VO (Mac 10.14.4) |
VO (iOS 12.2) |
TalkBack (7.2) |
Narrator |
| Firefox Android (66.0.5) |
na |
na |
na |
na |
Fail: Link announced without accessible name. |
na |
| Firefox (66.0.5) |
Pass |
Pass |
na |
na |
na |
na |
| IE (11) |
Fail: Announced if navigating with Tab key. Ignored if navigating by graphic hot key or virtual cursor. |
Exception: Graphic not discoverable with 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 |
Exception: Graphic not discoverable with hot key. |
Pass |
na |
na |
na |
| Chrome Android (74.0) |
na |
na |
na |
na |
Pass |
na |
| Edge pre-Chromium (42) |
Pass |
Fail: Accessible name only announced if using Tab key. |
na |
na |
na |
Pass (no graphic announcement)
|
Test 11
Test 11: pattern notes
svg with role=img and child title element. Link has its own title attribute.
Expected announcement:
"Accessible Name, link", link/button title attr announced as description, and that the graphic can be discovered by hot key.
Test 11 - Pass: 5. Exception: 2. Fail: 7.
|
NVDA (2019.1) |
JAWS (April 2019) |
VO (Mac 10.14.4) |
VO (iOS 12.2) |
TalkBack (7.2) |
Narrator |
| Firefox Android (66.0.5) |
na |
na |
na |
na |
Fail: Link title attribute provides accessible name to link, not child SVG. |
na |
| Firefox (66.0.5) |
Fail: Link gets accessible name from title attribute, not SVG.
Graphic not discoverable with hot key.
SVG title element shown on hover as tooltip. |
Fail: Link's title attribute used for accessible name.
Graphic not discoverable with hot key.
SVG title element shown on hover as tooltip. |
na |
na |
na |
na |
| IE (11) |
Fail: Announced if navigating with Tab key. Ignored if navigating by graphic hot key or virtual cursor. |
Exception: Graphic not discoverable with hot key. |
na |
na |
na |
na |
| Safari (12.1) |
na |
na |
Fail: Link's title attribute provides accessible name.
SVG title element shown on hover as tooltip. |
na |
na |
na |
| Safari (iOS 12.2) |
na |
na |
na |
Fail: Link's title attribute provides accessible name. |
na |
na |
| Chrome (74) |
Pass
However, SVG title element shown on hover as tooltip. |
Exceptions: Graphic not discoverable with hot key.
Title attribute announced as description. SVG title element shown on hover as tooltip. |
Pass
However, SVG title element shown on hover as tooltip.
|
na |
na |
na |
| Chrome Android (74.0) |
na |
na |
na |
na |
Pass |
na |
| Edge pre-Chromium (42) |
Pass
Link title attribute displayed on hover and focus of link. |
Fail: Accessible name only announced if using Tab key. |
na |
na |
na |
Pass (no graphic announcement)
Link title attribute displayed on hover and focus of link. |
Test 12
Test 12: pattern notes
svg with role=img and child title element.
<a href="#!"><svg role="img" aria-label="Accessible Name" focusable="false" width="66" height="66">
<use xlink:href="#pull2" aria-hidden="true"></use>
</svg></a>
Expected announcement:
"Accessible Name, link", and that the graphic can be discovered by hot key.
Test 12 - Pass: 10. Exception: 2. Fail: 2.
|
NVDA (2019.1) |
JAWS (April 2019) |
VO (Mac 10.14.4) |
VO (iOS 12.2) |
TalkBack (7.2) |
Narrator |
| Firefox Android (66.0.5) |
na |
na |
na |
na |
Pass |
na |
| Firefox (66.0.5) |
Pass |
Pass |
na |
na |
na |
na |
| IE (11) |
Fail: Announced if navigating with Tab key. Ignored if navigating by graphic hot key or virtual cursor. |
Exception: Graphic not discoverable with 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 |
Exception: Graphic not discoverable with hot key. |
Pass |
na |
na |
na |
| Chrome Android (74.0) |
na |
na |
na |
na |
Pass |
na |
| Edge pre-Chromium (42) |
Pass |
Fail: Accessible name only announced if using Tab key. |
na |
na |
na |
Pass (no graphic announcement)
|
Test 13
Test 13: pattern notes
img with alt and link and button with title attributes..
Expected announcement:
"Accessible Name, link", with link title attributes announced as descriptions, and that the graphic can be discovered by hot key.
Test 13 - Pass: 11. Exception: 3.
|
NVDA (2019.1) |
JAWS (April 2019) |
VO (Mac 10.14.4) |
VO (iOS 12.2) |
TalkBack (7.2) |
Narrator |
| Firefox Android (66.0.5) |
na |
na |
na |
na |
Pass |
na |
| Firefox (66.0.5) |
Pass |
Pass |
na |
na |
na |
na |
| IE (11) |
Exception: description not announced from title attribute on link.
Link's title attribute displayed on hover and focus of link. |
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 |
Exception: Graphic not discoverable with hot key. |
Pass |
na |
na |
na |
| Chrome Android (74.0) |
na |
na |
na |
na |
Pass |
na |
| Edge pre-Chromium (42) |
Pass
Link title attribute displayed on hover and focus of link. |
Exception: JAWS + Edge have bugged announcement when navigating by graphics. |
na |
na |
na |
Pass (no graphic announcement)
Link title attribute displayed on hover and focus of link. |
