Link with an accessible label

Links should make sense out of context. Phrases such as "click here," "read more," and so on are ambiguous when read out of context, and do not convey the purpose of destination of a link. 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". It is best practice to create link text that conveys the links purpose, however, developers and designers often choose to limit the amount of text on a page, in particular when there is sufficient contextual information about an element, it is redundant, or repeating information.

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 when read out of context. 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.

[Read more...]


<a href="gotcha.html" aria-label="Read more about the gotcha page">[Read more...]</a>

In this example, the ARIA label overwrites the link text for screen reader users. This information is not visually rendered to the page (on hover or otherwise).

Accessible Rich Internet Applications (ARIA) is used to provide developers with the option to add additional semantic information to Web pages. It can be helpful when creating custom components (adds state and property information), communicating dynamic page changes (ARIA alerts will be used in our Javascript section), and in the case of this link example, to add more descriptive information to an element (link purpose). In this case, ARIA labels can provide descriptive information about an element without taking up a lot of space (this can also be achieved by using the aria-labelledby attribute).

A note about keyboard accessibility: The most common source of keyboard inoperable links is when a developer decides to create custom elements and components (like a dynamic menu) by using JavaScript event handlers that do not permit keyboard access (eg on mouse over, or on hover). Links like this often have a pound sign as the link destination, which means that the link destination is the same page; clicking on the link accomplishes nothing.

We will use links or anchor tags shortly. But first, let's learn a bit about how links can be used to create multipage sites.

Next: Multipage Sites
Previous: Link example 2