Accessibility Weekly

Ambiguous Links

Published:

amber-200

Amber Hinds

Equalize Digital

Amber Hinds is the CEO of Equalize Digital, Inc., a Certified B Corp specializing in WordPress accessibility, maker of the Accessibility Checker plugin, and lead organizer of the WordPress Accessibility Meetup and WP Accessibility Day conference.

Week 4

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.

Share this article!
amber-200

Amber Hinds

Equalize Digital

Amber Hinds is the CEO of Equalize Digital, Inc., a Certified B Corp specializing in WordPress accessibility, maker of the Accessibility Checker plugin, and lead organizer of the WordPress Accessibility Meetup and WP Accessibility Day conference.

Through her work at Equalize Digital, Amber is striving to create a world where all people have equal access to information and tools on the internet, regardless of ability. Since 2010, she has led teams building websites and web applications for nonprofits, K-12 and higher education institutions, government agencies, and businesses of all sizes. Through this journey, she learned about the importance of making websites accessible to everyone, and it has been her passion to bring awareness to accessibility and make website accessibility easier, ever since. 

Brought to you by:

Make your WordPress website accessible and ensure all people have equal access to your products or services, regardless of ability. Reach more customers, reduce liability, and increase conversions.

Come Join Us!

Join the #1 WordPress Community and dive into conversations covering every aspect of running an agency!

Kyle Van Deusen

Community Manager

More from Accessibility Weekly

Week 5

Adding Theme Support for Screen Reader Text and Ideas for Using It

Last week we talked about ensuring that links are meaningful and how adding hidden text that …

Week 3

Heading Order

One of the easiest accessibility improvements you can make to a website with big impact is …

Week 2

Reading Level + AI Generated Summaries

One of the easiest ways to make your website more accessible is by testing your content …