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".
<a href="#!"><img src="icon.svg" alt="Accessible Name"></a>
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".
<a href="#!"><img src="icon.svg" role="img" alt="Accessible Name"></a>
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.
<a href="#!"><img src="earth.jpg" alt="Accessible Name"></a>
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.
<a href="#!"><img src="earth.jpg" alt="Accessible Name" title="Accessible Name"></a>
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.
<a href="#!"><img src="earth.jpg" alt="Accessible Name" title="accessible name"></a>
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.
<a href="#!"><img src="earth.jpg" alt="Accessible Name" title="title attr"></a>
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.
<a href="#!"><img src="earth.jpg" alt="" title="Accessible Name"></a>
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.
<a href="#!"><img src="earth.jpg" title="Accessible Name"></a>
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.
<a href="#!"><svg viewBox="0 0 1024 1024" height="66" width="66" role="img" focusable="false" aria-labelledby="t1">
<title id="t1">Accessible Name</title>
<path d="M832 320c-8.75 0-17.125 1.406-25.625 2.562C757.625 208.25 644.125 128 512 128c-132.156 0-245.562 80.25-294.406 194.562C209.156 321.406 200.781 320 192 320 85.938 320 0 405.938 0 512s85.938 192 192 192c20.531 0 39.875-4.25 58.375-10.375C284.469 731.375 331.312 756.75 384 764.5v-65.25c-49.844-10.375-91.594-42.812-112.625-87.875C249.531 629 222.219 640 192 640c-70.656 0-128-57.375-128-128 0-70.656 57.344-128 128-128 25.281 0 48.625 7.562 68.406 20.094C281.344 283.78099999999995 385.594 192 512 192c126.5 0 229.75 92.219 250.5 212.75 20-13 43.875-20.75 69.5-20.75 70.625 0 128 57.344 128 128 0 70.625-57.375 128-128 128-10.25 0-20-1.5-29.625-3.75C773.438 677.125 725.938 704 672 704c-11.062 0-21.625-1.625-32-4v64.938c10.438 1.688 21.062 3.062 32 3.062 61.188 0 116.5-24.625 156.938-64.438C830 703.625 830.875 704 832 704c106.062 0 192-85.938 192-192S938.062 320 832 320zM576 512H448v320H320l192 192 192-192H576V512z"></path>
</svg></a>
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".
<a href="#!"><svg role="img" focusable="false" width="66" height="66">
<title>Accessible Name</title>
<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 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.
<a href="#!" title="link title"><svg role="img" focusable="false" width="66" height="66">
<title>Accessible Name</title>
<use xlink:href="#pull2" aria-hidden="true"></use>
</svg></a>
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..
<a href="#!" title="title link"><img src="earth.jpg" alt="Accessible Name"></a>
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. |
