It's official: Level Access and eSSENTIAL Accessibility are becoming one! Read the Press Release.

An Analysis on Different Screen Reader Behaviors

Authors must avoid using the same text for links that retrieve different resources. Users without disabilities may be able to identify the links differently based on other page content; however, users with cognitive disabilities and users who are blind or visually impaired may have difficulty making the distinction when link text does not adequately describe each link’s purpose.

For example, across a site, you have several links that direct users to view more information on a particular section, such as Read Review for a particular project. When there are multiple links of the same text, users may have difficult identifying which review they are selecting. For users who are blind or visually impaired, this can occur based on how assistive technology such as screen readers access links. For example, users of the JAWS screen reader may navigate to and activate links via a list of links feature. This feature removes the link from the surrounding context and thus each link would appear as “Read Review” (Figure 1). The same is true of the NVDA screen reader, via the Elements List (Figure 2).

Non-Compliant Example:

<div><span>ABC Product</span> <a href="javascript:void(0);">Read Review</a></div>

<div><span>DEF Product</span> <a href="javascript:void(0);">Read Review</a></div>

JAWS Links List dialog box with two links listed, both named "Read Review"

Figure 1. Multiple Read Review links appear the same in JAWS link list

NVDA Elements List displays two links, both named "Read Review"

Figure 2. Multiple Read Review links appear as the same in NVDA Elements List.

WCAG Level AA (SC 2.4.4) conformance requires that link purpose be identifiable within context of the surrounding sentence, paragraph, and table cell or list item, while Level AAA (SC 2.4.9) indicates the link purpose should be identifiable when the link’s text is taken out of context. Even when the link has context within the surrounding content, this context may not be readily apparent to users of assistive technology such as screen readers due to the way the screen readers present the information. However, there are a few ways to solve this issue.  One method is to provide off-screen text with the link that will be seen by screen readers but not displayed on-screen. Another method may be to include a graphic with the link that has alt text. Additional methods include using the title attribute on the link or using Accessible Rich Internet Application Specification (ARIA) attributes.

Developers often want to refrain from using off-screen text, as it can be clunky and difficult to maintain. Using ARIA may be easier for developers to implement and produce cleaner HTML, however this may not always work as expected with assistive technology. There are three ARIA attributes that may be viable alternatives for developers: aria-describedby,aria-labelledby and aria-label. This blog post will review each option and analyze the findings of utilizing these options using JAWS 16.0 with Internet Explorer 11, NVDA 2014.4 with Firefox 34.0, and Mac OS 10.9 Voiceover with Safari 7.1.2.

Using aria-describedby

<div><span id="name0">ABC Product</span> <a href="javascript:void(0);" aria-describedby="name0">Read Review</a></div>

<div><span id="name1">DEF Product</span> <a href="javascript:void(0);" aria-describedby="name1">Read Review</a></div>

Using aria-labelledby

<div><span id="name0">ABC Product</span> <a href="javascript:void(0);" aria-labelledby="name0">Read Review</a></div>

<div><span id="name1">DEF Product</span> <a href="javascript:void(0);" aria-labelledby="name1">Read Review</a></div>

Using aria-label

<div><span id="name0">ABC Product</span> <a href="javascript:void(0);" aria-label="Read Review- ABC Product">Read Review</a></div>

<div><span id="name1">DEF Product</span> <a href="javascript:void(0);" aria-label="Read Review- DEF Product">Read Review</a></div>

Results

Screen Reader Announced Link List Description
aria-describedby JAWS 16.0 with IE 11 When using the tab key, JAWS announces the link text followed by the aria-describedby value. The aria-describedby value is not rendered in the Link list.
NVDA 2014.4 with Firefox 34 When using the tab key, NVDA announces the link text followed by the aria-describedby value. The aria-describedby value is not rendered in the Elements list.
VoiceOver with Safari 7.1.2 VoiceOver appears to ignore the aria-describedby in the item chooser and only announces the link text. However, when navigating to the control and pausing, Voiceover announces “Help tag is: DEF Product.” However, this is after a significant delay. This occurs because VoiceOver is treating the description as a hint. It is possible that the user will turn off VoiceOver’s speaking of hints — and in these cases the user wouldn’t hear the description at all. The aria-describedby is not available through the item Rotor’s link option.
aria-labelledby JAWS 16.0 with IE 11 When using the tab key to navigate to these links, JAWS announces these links as ABC product link, DEF Product link. When using the arrow key to navigate through the page, the links are announced as Read Review. JAWS ignores the aria-labelledby value. Therefore, users will have difficulty identifying these links are Read Review links. Both links are rendered as “Read Review” in the link list
NVDA 2014.4 with Firefox 34 NVDA ignores the “Read Review” text both using the tab key and using the arrow to navigate through the page. NVDA announces these links as “ABC product link,” “DEF Product link.” Therefore, users will have difficulty identifying these links are Read Review links. The Elements list is also reflected as “ABC Product link” and “DEF Product link” in the link list.
VoiceOver with Safari 7.1.2 VoiceOver accurately announces the link text followed by the aria-labelledby value both links within the rotor are rendered as “text1″”- which completely ignores the link text and aria-labelledby value.
aria-label JAWS 16.0 with IE 11 JAWS announces the aria-label value when using the tab key and the arrow key to browse. When reviewing the links in the Links list, JAWS renders the aria-label value as well.
NVDA 2014.4 with Firefox 34 NVDA announces the aria-label value when using the tab key and the arrow key to browse. When reviewing the links in the Links list, NVDA renders the aria-label value as well.
VoiceOver with Safari 7.1.2 VoiceOver announces the text followed by the aria-label value. Therefore, “Read Review” may be announced twice for each link. When retrieving links through the Rotor, VoiceOver displays the links as “text1”

Other Concerns

No matter what solution is used, authors must consider how users of speech recognition software access links by direct voice commands. For example, speech recognition software such as Dragon support use of aria-labelledby and may also be affected by off-screen positioned text. Dragon has been found to work better when the off-screen text is located after the link text, allowing Dragon users to speak the on-screen link text to choose and activate the link.

Similarly, use of these techniques does not reduce the need to make sure a link’s purpose is still understandable within context. For example, users with cognitive disabilities benefit from the link’s context being in close proximity to the actual link, and this user group may or may not be using screen readers to access the content.

In conclusion, using off-screen text, while cumbersome for developers, is the best option to ensure compatibility among multiple screen readers. If using ARIA, developers must use their discretion when utilizing one of the attributes listed.