Link

A link is a widget that allows the user to navigate to another resource. It is strongly recommended to implement links using the HTML anchor (a) element, with an href attribute that specifies the resource to navigate to. This may also be referred to as a semantic HTML link.

A semantic HTML link (anchor with an href attribute) should not be confused with the HTML link element, which is used to link to external resources such as stylesheets.

Role

A link widget must have a role of link. The best way to achieve this is to use the semantic HTML anchor element. If you are using a non-semantic element, you must add the role="link" attribute to the element.

1<!-- Better to use the anchor element with an href attribute -->
2<a href="/about">About</a>
3
4<!-- If not using the anchor element, add `role="link"` -->
5<span class="link" role="link" data-href="/about">About</span>

A link must have an accessible name. The accessible name is the text that is read by screen readers to describe the element. Links support name from content, so its accessible name could be given from a direct text node child, an image with an alternative text, or even multiple children elements with an accessible name. Othewise, the accessible name can be provided in a couple of ways:

1<!-- The img tag's alt attribute constitutes the link's accessible name -->
2<a href="/about">
3 <img src="./about.png" alt="About" />
4</a>
5
6<!-- Link gets its accessible name from the aria-label attribute -->
7<a href="/about" aria-label="About">
8 <img src="./about.png" aria-hidden="true" />
9</a>

For clarity, the title attribute should not be used to provide the accessible name for a link. This is because the title attribute is not uniformly supported accross all screen readers and even when supported, it is intended to provide additional information about the link, not the accessible name.

Focus sequence

A link must be focusable. This is important for keyboard users who need to be able to navigate the link.

Semantic HTML links are always focusable. Non-semantic links can be made focusable by adding the tabindex="0" attribute to the link element.

1<span class="link" data-href="/about" role="link" tabindex="0">About</span>

Forbidden interactive children

A button must not contain any interactive children such as links or buttons. Such children would be inaccessible to screen reader users since they will be excluded from the accessibility tree.

Keyboard activation

Unless disabled, links must be activated by pressing the enter key or the space key. This is important for keyboard users. Semantic HTML links have build-in keyboard activation. Non-semantic links can be activated by adding an event handler.

1// Non-semantic HTML link is activated by adding an event handler
2const navigateToLink = (linkTarget) => {
3 window.location.href = linkTarget;
4}
5const nonSemanticLinks = document.querySelectorAll('[role="link"]');
6nonSemanticLinks.forEach((link) => {
7 const linkTarget = link.getAttribute('data-href');
8 link.addEventListener('click', navigateToLink(linkTarget));
9 link.addEventListener('keyup', (event) => {
10 if (event.key === 'Enter' || event.key === ' ') {
11 navigateToLink(linkTarget);
12 event.preventDefault();
13 }
14 });
15});

Href

A semantic HTML link must have an href attribute that specifies the resource to navigate to. It is highly inadvisable to implement a non-semantic link using a HTML anchor (a) without an href attribute. Such an anchor would not be interpreted as a link by screen readers and not be focusable by keyboard users.

Summary of Tests

NameConformance LevelWCAG Success Criteria
RoleA4.1.2 Name, Role, Value
Link nameA4.1.2 Name, Role, Value, 2.4.4 Link Purpose (In Context)
Focus sequenceA2.1.1 Keyboard, 2.4.3 Focus Order
Forbidden interactive childrenA4.1.2 Name, Role, Value
Keyboard activationA2.1.1 Keyboard
HrefA4.1.2 Name, Role, Value, 2.1.1 Keyboard