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.
Using aria-label for link purpose
- New technique.
- Surveyed by TF 8 Oct 2012
- Added to XML by AWK 2014/1/2
Technologies supporting WAI-ARIA.
User Agent and Assistive Technology Support Notes [To be published separately]
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. In some assistive technologies the aria-label value will show in the list of links instead of the actual link text.
Per the WAI-ARIA specification and the HTML to Platform Accessibility APIs Implementation Guide, 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 recommended to start the text used in aria-label with the text used within the link. This will allow consistent communication between users.
Describing the purpose of a link in HTML using the aria-label element. In some situations, designers may choose to lessen the visual appearance of links on a page by using shorter, repeated link text such as "read more". These situations provide a good use case for aria-label in that the simpler, non-descriptive "read more" text on the page can be replaced with a more descriptive label of the link. The words 'read more' are repeated in the aria-label (which replaces the original anchor text of "[Read more...]") to allow consistent communication between users.
<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> </p> <p>Baby Mayor: Seminole voters elect the city's youngest mayor ever by voting in 3 year old Willy "Dusty" Williams in yesterday's mayoral election. <a href="babymayor.html" aria-label="Read more about Seminole's new baby mayor">[Read more...]</a> </p>
- HTML to Platform Accessibility APIs Implementation Guide: Accessible Name and Description Calculation
- WAI ARIA 1.0 Authoring Practices
- WAI-ARIA Text Alternative Computation
- ARIA-XX: Using aria-label to provide labels for objects
- ARIA-XX: Using aria-label to provide an invisible label
- Using aria-labelledby for link purpose
- G91: Providing link text that describes the purpose of a link
- H30: Providing link text that describes the purpose of a link for anchor elements
For link elements that use
- Check that the value of the
aria-labelattribute properly describes the purpose of the link element.
- #1 is true