Ensure Links Have Discernible Text

Yotam Flohr
Researcher
Blind Hearing Mobility
WCAG 2.1 Level A

Written and researched for humans by humans

Yotam Flohr
Researcher
Ritvik Shrivastava
Expertly reviewed by
Comments: 0
Your entire domain
Get detailed instructions on how to resolve every accessibility issue on your website

Web accessibility standards require link text and alternate text for images, when used as links, to be discernible by a screen reader. They should also not have a duplicate label and must be focusable.

Why It Matters

Inaccessible link elements can create barriers to accessibility. Website users who rely on keyboard navigation can only click on links that can receive programmatic focus. 

Screen reader users also need to know where a link is pointing. Inner link text provides this information, but screen readers need to be able to access it.

Fixing the Issue

Ensure that all link names are accessible and can receive programmatic focus. Link text cannot be hidden (e.g. with display: none or aria-hidden=”true”).

To ensure all links can receive programmatic focus, avoid device-specific Javascript events such as onmouseover(), mouseover(), hover(), onmouseout(), mouseout(). Replace these with device-independent events such as onfocus(), focus(), onblur(), or blur().

It’s important to also not modify the style of the links to suppress the change in style when a link is in programmatic focus. Modifying link styles removes the ability for sighted keyboard users to know where they are on the page. Lastly, ensure you are creating real links using an element with the href attribute.

Good Code Example

Code example
<h4>Neighborhood News</h4> <p>Seminole tax hike: Seminole city managers are proposing a 75% increase in property taxes for the coming fiscal year. <a href="taxhike.html" aria-label="Read more about Seminole tax hike">[Read more...]</a> </p> <p>Baby Mayor: Seminole voters elect the city's youngest mayor ever by voting in 3 year old Willy "Dusty" Williams in yesterday's mayoral election. <a href="babymayor.html" aria-label="Read more about Seminole's new baby mayor">[Read more...]</a> </p> Copy

Test Cases

For more examples, visit W3C’s GitHub’s ATC Rules library