A quick way to rework vague link text

Links are arguably the most important primitive element tying the Web together. They are the “digital bridges” that connect webpages and make navigating between them possible.

As you’d expect, links are important for screen reader users as well. While the primary navigation method for most screen reader users is by headings, navigating by links can be important depending on the context or the user’s preference. In WebAim’s 2024 Screen Reader User Survey, ambiguous links are sited as one of the most problematic items for these users.

So what is a vague link?

Some examples of vague links would be those with descriptive text that reads “Learn more” or “Download.” These don’t offer sufficient context for the user to determine what action will occur when clicking the link. While sighted users have the benefit of observing the contextual information related to a link (e.g. visual design to group content), this is often more difficult or even impossible for screen reader users. Furthermore, UX experts recommend avoiding “Learn more” links as they create uncertainty for all users. Suffice it to say, all users benefit from descriptive link text.

How to fix vague link text

The fix for this accessibility issue is straightforward: provide descriptive text that sufficiently explains the purpose of the link. For example, a link with text that reads “Read more” could be rewritten as “Read more about our community programs.” The rewritten text clearly explains what the user can expect when navigating via that link, while “Read more” begs the question, “Read more about what?” The goal should be to reduce confusion for the user, making it easier for them to navigate your website.

This type of update works fine for most links, but what if you only want to provide the longer description to screen readers? Well, there’s a way to do that too. Longer link descriptions can be formatted within an inline tag that has a “screen reader only” CSS helper class. This will display the shorter link text (“Read more”) visually, while providing the full text to screen readers. Again, research shows that the descriptive link text helps across the board, but sometimes this is a good solution to have in your toolkit.

<a href="/about/community-programs/">Read More<span class="screen-reader-text"> about our community programs</span></a>

You can check out my earlier A11y Quick Wins post for a more detailed explanation of the .screen-reader-text helper class.