What’s the problem? Learn more
What is the purpose of a website link? The utilitarian answer is that it’s what you click on to get from one page (or place) to another. But most of us don’t just automatically click on all the links we see. We rely on the link itself to give us more information about what we will see and receive if we choose to click on the link. This is why generic or ambiguous link text like Learn more or Click here can impact your site’s performance, usability and accessibility.
In this post, we explain why ambiguous links make your site harder to use and provide potential solutions including code samples to fix your links once and for all.
Users view links out of context
Usability research has shown that most users first scan websites without reading carefully. If you have designed your links correctly, they should stand out from the surrounding text. Our goal here is for users to notice our links and click through on the relevant ones.
Unsurprisingly, the same behavior holds for screen reader users. Screen readers have many features to accelerate the page browsing process so that users do not have to listen to the full page text in order to find what they want. It’s very common for users to tab from link to link on a page or even go through a list of all page links alphabetized by the screen reader.
If you saw a list of links (or even just one) like this, would you have a good idea of what you might find on the other side of that link?
- Click here
- Here
- Learn more
- more
- Read more
- Download
- Continue
Using ambiguous link labels will almost certainly have a negative impact on your links’ click through rates (CTR) as well as your site’s accessibility to screen reader users.
Subscribe to our Newsletter
Repetitive link content is a problem for screen readers
If you thought the list above was confusing, what would you think if you saw a list of links like this?
- Read more
- Read more
- Read more
- Read more
Assuming those 4 links went to different destinations, how on earth would you know what to do? This is a very common usability challenge for screen reader users especially on pages like blog listings that often have multiple identically labeled links. And if the links are organized in alphabetical order, there is no additional context available to even offer a clue short of navigating through the entire page contents from beginning to end.
How to fix your link descriptions
Rewrite the link text
Luckily this is a big problem with relatively simple fixes. The easiest solution is to rewrite the link text. This is straightforward for inline links or other page content that you have full control over editing.
For example, we commonly see B2B companies build solution or product landing pages that end each section or component with a “Learn more” link. They could make these links far more usable and useful by creating more informative links.
Here are some examples of how you might try to rewrite common generic link labels:
- Instead of “Click here”, try something like “View our 2023 sustainability report”
- Instead of “Learn more”, you can say “Learn more about our solutions” or even just “Solutions”.
- Instead of “Download”, try “Download the white paper (PDF)”
Add visually hidden link metadata in code
Rewriting the link text does not require you to write a single line of code and has the benefit of being useful for all users. But there are cases when the design or template structure make it difficult to modify the link text. In these cases, especially when the design offers other cues for sighted users to make the link destination more clear, you can add additional information for screen reader users via code.
This option is appropriate for templated listing pages like a blog or news listing that frequently include a link like “Read more” with each post in the listing. As we described above, this scenario is especially difficult to navigate for screen readers as there are multiple seemingly identical links on the same page.
Supplement with screen-reader only text
The first option is supplementing the link text with additional screen reader-only text. This is text that is not visible on screen, but that exists on the page in a format that screen readers can detect. Note that screen reader-only text does not override the on-screen visible link text.
To add screen reader-only text, you will need to create a CSS class that positions the text offscreen so that it cannot be seen.
Here is an example of what the CSS styles could look like:
.sr-only {
position:absolute;
left:-10000px;
top:auto;
width:1px;
height:1px;
overflow:hidden;
}Many frameworks like Bootstrap and most WordPress themes support an sr-only CSS class out of the box. In this case, you only need to take note of the second step.
<a href=”/blog/post-title-goes-here/”> Read more <span class=”sr-only”> about Post Title Goes Here</span></a>The sr-only text serves as a continuation of the generic “Read more” link label.
Overwrite with ARIA labels
The other option is to use an ARIA label to override the visible link label text. Screen readers will announce the contents of the ARIA label instead of the visible link label. However, it is an accessibility best practice to include the visible link text in the accessible name (i.e. the ARIA label).
<a href=”/blog/post-title-goes-here/” aria-label=”Read more about Post Title Goes Here”> Read more</a>Does your site have ambiguous links?
It very well might. The WebAim Million project tests the top million site homepages on the internet each year. These are the most highly trafficked and well-resourced sites that exist. The 2023 report found that over 17% of tested homepages contained ambiguous link label text with over 5 instances of ambiguous links per site.
And with these simple fixes, your site can be more accessible than theirs!
