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>34<!-- If not using the anchor element, add `role="link"` -->5↘ <span class="link" role="link" data-href="/about">About</span>
Link name
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>56<!-- 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>
ARIA owns
If the link should contain elements that cannot be implemented as descendants of the link,
the aria-owns attribute can be used to indicate that the link owns the elements.
However, since the aria-owns attribute is not supported by some assistive technologies,
it is best practice to avoid it. If it must be used, the aria-owns attribute should be set
on the link and should point to the IDs of the owned elements.
Forbidden interactive children
A link 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 handler2const 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.