Using aria-label to define your links
Another technique for describing a hyperlink's purpose is the aria-label attribute. Let's highlight a couple of examples why this attribute would be used in place of alt text:
- For aesthetic purposes, web developers would like to avoid a long hyperlink text description
- There is no descriptive information available on the web page to use the aria-labelledby attrivbute (we'll cover this shortly)
Expanding on the first example, a common technique used by developers when creating websites is the labeling of links with "Click here" or "Learn more". To understand why this is an issue, you must understand one of the more common ways that screen reader users navigate a website.
Links List (or something like it)
When navigating websites, screen reader users commonly use a feature which allows them to list all of the links on a web page. This feature essentially streamlines the navigation process by allowing the end user to search the list for a specific link as opposed to using the TAB key to manually and sequentially navigate all of the links on the web page.
The example below shows the JAWS Links List with three different "Click here" links:
Here's the problem: Links list features like the example above typically look for the hyperlink text that is provided by the developer. If an end user simply navigates the website by listing the hyperlink text, they would miss the contextual information needed to know where a click here or learn more link would take them.
One remedy for this is the aria-label attribute...