Ambiguous Links

What would you think if you encountered a list of links like this?

• here
• Learn More
• Download
• here
• Read More
• Read More
• Read More
• Contact Us

Out of these eight links, only one of them has any real meaning: “Contact Us.” The other seven are absolutely meaningless, and you would have no idea what to expect if you were going to follow the link. What will we find “here”? What will we learn more or read more of? What might download to my computer if I click that download link? Do the repeat ones go to the same place or is each “here” and each “read more” link different?

You might think I’m belaboring the point, but encountering lists of links like this, with what we call “ambiguous anchor text” in Accessibility Checker, is incredibly common. In fact, WebAIM, a nonprofit organization that focuses on website accessibility and that publishes an annual report on the accessibility of the top 1 million websites, lists ambiguous links as one of the top problems they find in their scans. In the 2022 report, WebAIM stated:

“18% of pages had ambiguous link text, such as “click here”, “more”, “continue”, etc. These pages had 5.9 instances of ambiguous links on average resulting in nearly 1.1 million ambiguous links in the sample.” 

Why do Ambiguous Links Matter?

People who are blind use various tricks within their screen reader to quickly find content as they navigate the web. Just as a sighted person “skims” content and doesn’t read every word, a screen reader user doesn’t want to read every word. 

One way they can move through content quickly is by navigating from link to link and skipping content in between. If a screen reader user is searching for a specific link, they might have their screen reader list all links on a page in alphabetical order. In either of these situations, the user would hear only the anchor text of the link itself and would not get any additional context from the surrounding text – either text preceding a link in a sentence or headers above the link.

If your links don’t have meaning alone, then people will not know if they want to follow them because they won’t know where the link goes.

Having meaningful links is a Web Content Accessibility Guidelines requirement (2.4.4 Link Purpose (In Context) – Level A), so if you want your websites to be accessible, you’ll need to pay attention to anchor text and train clients on how to write good anchor text as well.

Writing Better Links

In WordPress, there are two ways that ambiguous anchor links can come into play – one is through the content editor as you add content. These are the easiest links to fix because you can quickly change the visible text. Changing “Read More” to “Read More About Us” or “Download” to “Download the Website Owners Manual (PDF)” is typically a quick fix regardless of if you’re using the block editor or a page builder.

If there are links in your design that need additional context added to them, but you don’t have visual space, then you can add additional information in either an ARIA label or in hidden text that is only visible to screen readers. 

Here are examples of each.

Screen Reader Only Text

<a href=”https://website.com/some-url/”>Read More<span class=”sr-only”> about us</span></a>

ARIA Label

<a href=”https://website.com/some-url/” aria-label=”Read more about us”>Read More</a>

Fixing Hard-Coded Ambiguous Links

The second way ambiguous links might appear on a website is from the theme or plugins. Archive pages or blocks that display lists of posts with a “read more” link are common culprits for adding ambiguous links. In these instances, you want to make sure that the Read More link for each post indicates where it goes by including the post title in an aria-label or with hidden screen reader text. For example:

<a href=”https://website.com/blog-post-1/” aria-label=”Read more of Blog Post 1”>Read More</a>

If the theme developer or plugin author didn’t do this correctly, then you may be able to correct it with a filter in the child theme. Otherwise, you’ll want to choose a different block for displaying a list of posts where the plugin author coded it correctly, or perhaps choose not to use Read More links at all since the post title is likely already linked. 

Additional Resources

We’ll talk more about coding support for screen reader text into your theme next week, but here are some out-of-the-box tools that would be helpful for adding meaning to your links.

• Screen Reader Text Format plugin for the block editor 
• How to add aria-labels in Elementor (look under the ARIA-Labels heading)