Indicating Link Purpose with ARIA

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>

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

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

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.