This Wiki page is edited by participants of the WCAG Working Group. It does not necessarily represent consensus and it may have incorrect information or information that is not supported by other Working Group participants, WAI, or W3C. It may also have some very useful information.

Difference between revisions of "Using aria-label for link purpose"

Jump to: navigation, search
(Related Techniques)
Line 52: Line 52:
=== Related Techniques ===
=== Related Techniques ===
*[ ARIA-XX: Using aria-label]
*[ ARIA-XX: Using aria-label to provide labels for objects]
*[ ARIA-XX:  Using aria-label to provide an invisible label]
*[ ARIA-XX:  Using aria-label to provide an invisible label]
*[ G91: Providing link text that describes the purpose of a link]
*[ G91: Providing link text that describes the purpose of a link]

Revision as of 16:32, 23 July 2013



Technologies supporting WAI-ARIA.

WCAG references

User Agent and Assistive Technology Support Notes [To be published separately]

Support of aria-label on links:

  • Jaws V.11 and greater has complete support.
  • ChromeVox V.1 and greater has complete support
  • VoiceOver V.3 and greater  ??


The objective of this technique is to describe the purpose of a link using the aria-label attribute. The aria-label attribute provides a way to place a descriptive text label on an object, such as a link, when there are no elements visible on the page that describe the object. If descriptive elements are visible on the page, the aria-labelledby attribute should be used instead of aria-label. Providing a descriptive text label lets a user distinguish the link from links in the Web page that lead to other destinations and helps the user determine whether to follow the link.

Per the WAI-ARIA specification, the aria-label text will override the text supplied within the link. As such the text supplied will be used instead of the link text by AT. Due to this it is best practice to start the text used in aria-label with the text used within the link. This will allow consistent communication between users.


Example 1:

Describing the purpose of a link in HTML using the aria-label element. The words 'read more' are repeated in the aria-label because the original anchor text 'read more' will be replaced by the aria-label.

 <h4>Neighborhood News</h4>
 <p>Seminole tax hike:  Seminole city managers are proposing a 75% increase in 
 property taxes for the coming fiscal year.
 <a href="taxhike.html" aria-label="Read more about Seminole tax hike">[Read more...]</a>


Related Techniques



For link elements that use aria-label

  1. Check that the value of the aria-label attribute properly describes the purpose of the link element.

Expected Results

  • #1 is true