Give links a link text that describes the purpose of the link

Give links on a web page a link text from which the purpose of the link can be easily understood. A descriptive link text is clear to everyone. Make sure that the link text is formulated in such a way that the visitors immediately know what the link refers to.

Do not write:

  • Read more. (unclear)
  • LinkedIn. (unclear)

But write:

  • Read more about digital accessibility.
  • Go to our LinkedIn page.

Tip: If you reference an e-mail address, use the full e-mail address as the link text.

Visitors using a screen reader can use a list of all links to navigate the page.

If there really is no other option, then the context of the link may also be used to describe the purpose of the link. For example, the same sentence, paragraph, or in the same table cell. The link text can also be extended in the code with the aria- label attribute or with the title attribute.

It looks like this in the code:

Wat ook kan is het verbergen van een deel van de linktekst met CSS:

Note: Link texts that are expanded using CSS or the aria-label attribute are only visible to visitors using a screen reader.

A link text should never be left empty. Without a link text it is impossible to determine where the link refers to. An empty link may not be visible on the page, but these links will appear in the focus order. Screen readers will notice these links as well.

In cases where not only text but also an image is used as a link, we speak of functional images. Give images that are also a link a text alternative that describes what the link points to. If an image and a text are used with both the same link purpose, it is better to combine them into one link. For visitors who use assistive technologies, it can be distracting if the same link is read twice in a row.