Digital Accessibility Knowledge Base

link-name

Links must have discernible text

Who might be affected
Screen Reader
Voice Control

Description

HTML <a> elements (anchors/links) require an accessible name so that screen readers can accurately read and convey their purpose to the user and help him to effectively predict where the link will take him to. All of the above also apply to links that were defined with the role attribute (e.g. <div role="link">).

Quick Fixes

Give the <a> element an accessible name using one of the following techniques:
1<!-- Use a text node -->
2<a href="./path/to/about-page">
3    About Us
4</button>
5<a href="./path/to/products-page">
6    <span>Products</span>
7</a>
8

9<!-- Use "aria-label" -->
10<a href="./path/to/contact-page"
11    aria-label="contact us">
12    <img src="telephone-icon.png"
13         role="presentation" />
14</a>
15

16<!-- Use "aria-labelledby" -->
17<p id="twitter-link-title">See Us On Twitter</p>
18<a  href="https://twitter.com/accountname"
19    aria-labelledby="twitter-link-title">
20    <img src="twitter-icon.png"
21         role="presentation" />
22</a>

How Users Are Affected

The accessible name is used by assistive technologies to label, announce and trigger actions of interactable UI elements (e.g. buttons, links, input fields). When interactable elements don’t have a valid accessible name, assistive technologies lack the hook they are designed to use to parse and read the content accurately.

WCAG Success criteria

This issue might cause elements to fail one or more of the following Success criteria:
2.4.4 Link Purpose (In Context) (A) | 4.1.2 Name, Role, Value (A)