Explicit link

Impact: Major

Users mainly impacted: Blind, severely visually impaired, visually impaired, motor impaired.

Explanation

A link allows you to navigate between the pages of a site or to link to another site. A link is defined by two important elements:

its link text, the text visible and clickable by users;
its context

For a link to be explicit, it is necessary that the link text and/or the link context make it possible to understand its function and destination.

A link must be explicit by itself (its link text alone) or through its context :

By itself (accessible name)

What is an accessible name?

The accessible name is the name of an interface element (link, button, form field…) returned to assistive technologies and therefore to the user. It can be composed of several elements such as the visible text of the interactive element but also other non-visible texts (aria-label, aria-labelledby, title) that belong to the interactive element or its children (alt, sr-only).

The accessible name is determined according to a specific order.

In the case of an HTML link, the accessible name is provided in the following order.

The content related to the aria-labelledby attribute.
Otherwise, the content of the aria-label attribute.
Otherwise, the content of an <a> element (text, alt…).
Otherwise, the content of the title attribute (see particularity about the title attribute).

For example, for an aria-label attribute and link content, it is the content of the aria-label attribute that is considered as the accessible name.

As some properties override others, it is necessary to ensure that the entire content is rendered in the accessible name.

In the exemple below the aria-label attribute takes priority over the content of the link. The content of the link “Weather” must be filled in the aria-label attribute.

Weather:

<a href="#" aria-label="Weather Cloud and rain">
    <span class="text">Weather:</span>
    <span class="fas fa-cloud-rain" aria-hidden="true" title="Cloud and rain"></span>
</a>

About the title attribute

The purpose of the title attribute is to provide additional information to clarify or describe more precisely the purpose of a link.
If the additional information is important to the user as a warning then it must be provided in the link text. In addition, due to the possible configuration of technical assistance to force the restitution of the accessible name from the content of the title attribute to the detriment of the accessible name, its value must at least include the accessible name of the link.
The title attribute is not a robust way to create an explicit link, it cannot be considered as visual information. On a touchscreen devices, for example, the tooltip is not visible. When element receive the focus, the title attribute is not displayed.

By itself, added by its context

It is always better to have explicit links out of context, i.e. understandable by themselves. Indeed, screen reader users are used to navigating from title to title, from iframe to iframe or from link to link and in this case they do not have the context. However, it is not always possible to make explicit links out of context, in which case it is necessary to ensure that the context makes the link explicit. To make an explicit link, it is necessary to understand its function (the nature of the link) and its destination. A link that is not explicit without its context can be of the type:

“See the RSS feed”, the RSS feed of what?
“More information”, information about what?
“Click here to see the personal data management policy”, click to go where?
“Download” Download what?

In these different cases, you have to make sure that the context allows you to understand the meaning. The context is defined as follows:

The content of the sentence enclosing the link;
The content of the paragraph (p tag) containing the link;
The content of the list item (li tag), or the content of a parent list item (li tag) of the list item, containing the link;
The content of the heading (hx tags) that is the closest ascendant of the link;
The content of the table header cell(s) (th tags) associated with the table data cell (td tag) containing the link;
The content of the table data cell (td tag) containing the link;

Image used alone as a link

In the case of a link on an image, the text of the link is the image’s alternative. This alternative must indicate the function and destination and not the description of the image.

<a href="https://www.gov.uk">
    <img src="govuk.png" alt="gov.uk home page">
</a>