One often overlooked yet crucial element in web accessibility is discernible text in links. In this blog post, we'll consider the significance of having discernible text in links, explore why it is essential for an inclusive online experience, and provide practical tips for testing for and remediating links lacking discernible text.
What exactly is discernible text as it relates to links?
Discernible text is text that can be seen, perceived, and understood by website users while conveying the purpose of the link - its destination, function, or action.
Why is discernible text important?
People with visual impairments, cognitive disabilities, or those who rely on assistive technologies depend on discernible text in links to help them comprehend the purpose and destination of the link. Screen readers, for example, announce links to users, and having meaningful text ensures that users understand the context and relevance of the link.
Discernible text in links plays a crucial role in search engine optimization. Search engines utilize link text to understand the content and context of a webpage. Meaningful link text enhances the search engine's ability to index and rank content accurately.
Links with discernible text contribute to a better overall user experience. Clear and concise link text aids all users, not just those with disabilities. Discernible link text facilitates efficient navigation, allowing users to make informed decisions about the content they are about to access.
How to Test Links for Discernible Text
Using an automated scanning tool like DubBot will enable you to expose links on your website that lack discernible text.
DubBot has a Custom Policy that exposes instances of "Click Here" and "Read More," both of which are problematic as neither conveys the purpose of the link.
Manual testing, specifically screen reader software, can assess how links are announced by screen reading software. This will allow you to hone in on discernible text that may need to be edited or rewritten to convey better the link's destination, function, or action. For example, a link
<a href="chocolatepierecipe.html">Pie Recipe</a> can be improved by adding the word chocolate: <a href="chocolatepierecipe.html">Chocolate Pie Recipe</a>
Navigate through your webpage using the keyboard's tab key to ensure all links can receive programmatic focus. Verify that each link receives focus and that the discernible text is presented to the user.
How to Fix Your Links
Link text and alternate text for images, when used as links, must be discernible by a screen reader, must not have a duplicate label, and must be focusable.
- Ensure that all link names are accessible. It may be possible that the inner link text is not visible to a screen reader, that there are duplicate link labels, or that the link is not focusable.
- Ensure all links can receive programmatic focus; for example, avoid device-specific events (for example, onmouseover).
- To ensure all link text is visible to screen readers, 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().
- Do not modify the style of the links to suppress the change in style when a link is the object of programmatic focus. Modifying link styles removes the capability for sighted keyboard users to know where they are on the page. Furthermore, ensure you are creating real links using an element with the href attribute.
~ Courtesy of Deque University
The importance of discernible text in links cannot be overstated. It is a fundamental element of web accessibility, fostering inclusiveness and improving user navigation, SEO, and overall user satisfaction.
For more information on discernible text and making your links readable for all users, see the Help Center document titled Making your links "readable" for screen readers.
