Ensure Links Have Discernible Text
Blind
Hearing
Mobility
WCAG 2.1 Level A
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.
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.
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.
<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
For more examples, visit W3C’s GitHub’s ATC Rules library.