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).
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