A link (<a>) or anchor element is a clickable element that links to a URL. Links should always have a href attribute, even when used in Single Page Applications (SPAs). Without a href attribute, the link will not be properly exposed to assistive technology. An example of this would be a link that uses an onclick event, in place of a href attribute.

Make a link stand out

Make sure it's clear that the link is clickable. Color alone is not sufficient to indicate the presence of a link. Underlines are a popular and commonly-understood way to communicate the presence of link content.

Use descriptive and unique link text

Terms like “click here” and “read more” do not provide any context. Some people navigate using a list of all buttons or links on a page or view. When using this mode, the terms indicate what will happen if navigated to or activated.

ARIA label / screen reader only text

ARIA labels (aria-label or aria-labelledby) provide a way to to label links and overwriting their actual content to assistive devices.

Example

aria-label

<a
  href="#"
  aria-label="British Shorthair cats"
>
  Read more
</a>

aria-labelledby

<h2 id="article-title">
    British Shorthair cats
</h2>
<a
  href="#"
  aria-labelledby="article-title"
>
  Read more
</a>

Screen reader only text

<style>
    .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border-width: 0;
    }
</style>
<a href="#">
  Read more<span class="sr-only"> about British Shorthair cats</span>
</a>

target="_blank"

Ideally, avoid links that open in a new tab or window. If a link does, ensure the link's behavior will be communicated in a way that is apparent to all users. Doing this will help people understand what will happen before activating the link. While this technique is technically not required for compliance, it is an often-cited area of frustration for many different kinds of assistive technology users.

Example

<style>
    .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border-width: 0;
    }
</style>
<a href="https://www.redkiwi.nl" target="_blank">
  More about Redkiwi<spab class="sr-only"> (opens in a new window)</span>
</a>