link-name
Links must have discernible text
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
1<!-- Use a text node -->2<a href="./path/to/about-page">3 About Us4</button>5<a href="./path/to/products-page">6 <span>Products</span>7</a>89<!-- 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>1516<!-- 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)