Hyperlinks can create accessibility issues for users with disabilities. You can avoid those issues by using hyperlinks carefully and following the World Wide Web Consortium’s (W3C) guidance.
Unfortunately, most websites don’t follow the rules. Each year, WebAIM (Web Accessibility In Mind) publishes an accessibility analysis of the internet’s top 1 million home pages.
In 2023, their report showed that 50.1% of those websites had empty links, while 17.3% of pages had ambiguous link text (such as “click here" or “learn more").
Links are crucial for navigation, and basic errors can impact the experiences of all users — regardless of their abilities. Here’s an overview of the most common mistakes.
1. Empty Links with No Link Text
Empty hyperlinks are links that do not have any associated content. There’s no text or label to explain what will happen when the link is activated, but the hyperlink still exists in the page’s HTML.
So, why is that a problem? Screen readers, which convert text to audio or braille, will inform users of the link’s presence. The user will have no idea what the link does, which can be frustrating.
An empty hyperlink might occur if you link an image without writing alternative text (also called alt text) or if you delete an element without adjusting the underlying HTML.
Fortunately, this is a fairly easy problem to address with automated tools. The Bureau of Internet Accessibility’s free web accessibility report searches content for empty links, and AudioEye’s digital accessibility platform can find (and in many cases, fix) the issue.
Related: What Are Empty Hyperlinks?
2. Ambiguous Link Text
Many assistive technology (AT) users will navigate to links without reading every bit of the content surrounding the link. Whether or not you use AT, you probably do something similar: You “scan" content for important elements, and hyperlinks are certainly important.
Your link text must provide users with enough information to decide whether they want to activate the hyperlink. The W3C’s Web Content Accessibility Guidelines (WCAG) addresses this issue in Success Criterion 2.4.4, “Link Purpose (In Context)”:
The purpose of each link can be determined from the link text alone or from the link text together with its programmatically determined link context, except where the purpose of the link would be ambiguous to users in general.
In other words, your text shouldn’t be vague. Quickly describe the destination of the link, using simple terms where possible. When in doubt, use the page’s title tag as the link text.
Related: “Click Here" Isn’t Enough Context for Hyperlinks
3. Too Much Link Text
As we’ve established, AT users may navigate directly to links when browsing your website. Your link text should give a clear, unambiguous description of what will happen when they activate the link — but you don’t want to overload the user with too much information.
For example, if your link text reads something like this:
Click here to learn about our selection of used cars, which includes the latest models from Ford and Chevrolet.
That’s too much information. Screen reader users will need to listen to all of the text before taking further action, which can be exhausting. Better link text might simply read “learn about our selection of used cars.”
Related: Quick Guide to Accessible Hyperlinks
4. Low-contrast Hyperlink Text
In-text hyperlinks should be visually distinct from the rest of your content. On most websites, unvisited links are underlined and blue, while visited links are purple.
Wherever possible, do not change the CSS (Cascading Style Sheets) for your hyperlinks. However, you may need to make changes to either the links or the website’s background to follow WCAG’s requirements for color contrast.
Low-contrast text may be unreadable for people with vision disabilities, including users with color vision deficiencies (color blindness). We provide the a11y® Color Contrast Accessibility Validator to help authors choose color-pairs that meet WCAG’s requirements.
Related: Use of Color for Accessibility Explained
5. Redundant Hyperlinks
A hyperlink is redundant if it’s located right next to another link that leads to the same address. This is a common issue cited in web accessibility lawsuits, because it’s especially annoying for screen reader users: The software may announce both links, confusing the user.
The issue often occurs when a linked image sits right next to (or above) an in-text hyperlink. For examples and remediation guidance, read: How Redundant Links Impact Accessibility.
To see how your website stacks up against WCAG, get started with a free automated web accessibility analysis. And if you’re ready to build a long-term digital accessibility strategy, we’re here to help. Send us a message to connect with an expert.
