Skip to content
Wiki
Links
Link Purpose

Link Purpose

The purpose of each link can be determined from the link text alone or from the link text together with its programmatically determined link context

WCAG 2.4.4 (opens in a new tab)

Links should be descriptive without having to read the rest of the content. Some users will be using tools that allow them to navigate various landmarks on the page, including links, so having sensible link text benefits them greatly.

Regardless of tools though, having descriptive links is a useful user experience feature for everyone, as "Find out more" or "Click here" links are not very helpful when scanning a page for information.

The lowest level to meet the WCAG requirement is to have clear purpose within the "programmatically determined link context" (opens in a new tab). This means that the link text can be accompanied by nearby paragraph text or similar to provide the missing context.

The examples below aim to highlight the difference between links that are not related to the content, links that are related to the content but require the surrounding text to make sense, and links that can stand alone and still make sense.

For A or AA level, this criterion is sufficient, and the middle example would be fine. However, for AAA level, the link text must be able to stand alone and still make sense, per WCAG 2.4.9 (opens in a new tab).

How to fix

This may need to be a conversation at the design or requirement level, but raising that a link isn't properly descriptive is a good start.

Suggesting alternatives that provide more context, such as "Find out more about [topic]" instead of "Find out more", can help.

Additionally, ensuring that related content is programmatically linked to the link can help meet the requirement. Instead of having links defined like the following:

  <p>This is some text about a really interesting topic!</p>
  <p><a href="/topic">Find out more</a><p>

It is instead better to keep them within the same paragraph tag or similar:

  <p>This is some text about a really interesting topic! <a href="/topic">Find out more</a></p>

Which can then be styled to look exactly the same as the previous example, but is now suitably contained within a paragraph context to ensure it doesn't fail the WCAG requirement, as in this example (opens in a new tab).

References