Testing screen reader label and description announcement on a elements with href

Last updated 18 December 2015

tests

1. element
2. element with aria-label
3. element with title
4. empty element with title
5. element with aria-label and title

Expected announcement

1. "element"
2. "test label"
3. "element with title, test description"
4. "test label"
5. "test label, test description"

Notes

Latest versions of 3 windows screen readers:

• JAWS
• NVDA
• Window Eyes

Latest versions of 3 browsers:

• Firefox
• Chrome
• Internet Explorer

3 ways to interact with the links were tested:

• cursor: using the up/down arrow keys
• nav key: using the screen readers link navigation keys (U/V for JAWS and NVDA, U/L for Window Eyes)
• tab key: using the tab key

Results Overview

The announcement of label and description for links varies across screen reader, interaction method and browser.

• All screen readers announce the link label correctly across all browsers independent of interaction method (except NVDA does not announce the label when provided via aria-label (test 2) when Chrome is used).
• Window Eyes does not announce the description at all, but has the most consistent label announcement across interaction methods and browsers.
• JAWS only announces the description when a user tabs to a link.
• NVDA only announces the description when using the link nav keys or tab keys in Firefox and Chrome. It does not announce the description at all with IE.
• Results in the tables that differ from the expected output are marked

Screen reader output

Using Firefox 42

test	JAWS cursor	JAWS nav key	JAWS tab key	NVDA cursor	NVDA nav key	NVDA tab key	Window Eyes cursor	Window Eyes nav key	Window Eyes tab key
1	"element"	"element"	"element"	"element"	"element"	"element"	"element"	"element"	"element"
2	"test label"	"test label"	"test label"	"test label"	"test label"	"test label"	"test label"	"test label"	"test label"
3	"element with title"	"element with title"	"element with title, test description"	"element with title"	"element with title, test description"	"element with title, test description"	"element with title"	"element with title"	"element with title"
4	"test label"	"test label"	"test label"	"test label"	"test label"	"test label"	"test label"	"test label"	"test label"
5	"test label"	"test label"	"test label, test description"	"test label"	"test label, test description"	"test label, test description"	"test label"	"test label"	"test label"

Using Chrome 47

test	JAWS cursor	JAWS nav key	JAWS tab key	NVDA cursor	NVDA nav key	NVDA tab key	Window Eyes cursor	Window Eyes nav key	Window Eyes tab key
1	"element"	"element"	"element"	"element"	"element"	"element"	"element"	"element"	"element"
2	"test label"	"test label"	"test label"	"test label"	"test label"	"element with aria-label"	"test label"	"test label"	"test label"
3	"element with title"	"element with title"	"element with title, test description"	"element with title"	"element with title, test description"	"element with title, test description"	"element with title"	"element with title"	"element with title"
4	"test label"	"test label"	"test label"	"test label"	"test label"	"test label"	"test label"	"test label"	"test label"
5	"test label"	"test label"	"test label, test description"	"test label"	"test label, test description"	"element with aria-label and title, test description"	"test label"	"test label"	"test label"

Using IE 11

test	JAWS cursor	JAWS nav key	JAWS tab key	NVDA cursor	NVDA nav key	NVDA tab key	Window Eyes cursor	Window Eyes nav key	Window Eyes tab key
1	"element"	"element"	"element"	"element"	"element"	"element"	"element"	"element"	"element"
2	"test label"	"test label"	"test label"	"test label"	"test label"	"test label"	"test label"	"test label"	"test label"
3	"element with title"	"element with title"	"element with title, test description"	"element with title"	"element with title"	"element with title"	"element with title"	"element with title"	"element with title"
4	"test label"	"test label"	"test label"	"test label"	"test label"	"test label"	"test label"	"test label"	"test label"
5	"test label"	"test label"	"test label, test description"	"test label"	"test label"	"test label"	"test label"	"test label"	"test label"

Code

<ol>
	<li><a href="#the-a-element">element</a></li>
	<li><a href="#the-a-element" aria-label="test label">element with aria-label</a></li>
	<li><a href="#the-a-element" title="test description">element with title</a></li>
	<li><a href="#the-a-element" title="test description"></a> empty element with title</li>
	<li><a href="#the-a-element" aria-label="test label" title="test description">element with aria-label and title</a></li>
</ol>

Reference

HTML5 a element