An empty hyperlink is a hyperlink that does not have any associated content. It doesn’t have text that explains what will happen if the user selects the link, or an image with a text alternative that describes the function of the link.
The HTML (HyperText Markup Language) for a typical hyperlink looks something like this:
<a href=”https://www.boia.org">The Bureau of Internet Accessibility</a>
An empty hyperlink doesn’t have the relevant link text:
<a href=”https://www.boia.org"></a>
While empty hyperlinks are easy to fix, they’re one of the most common accessibility issues. In their 2023 Million report, WebAIM (Web Accessibility In Mind) found that 50.1% of the internet’s top 1 million home pages had empty links.
Below, we’ll explain how empty links may impact users with disabilities and how to fix them.
Empty hyperlinks cause issues for keyboard-only users
Many people use their keyboards alone (with no mouse) to navigate the internet. This is particularly true for people who use screen readers (software that converts text to audio or braille) and other assistive technologies.
Hyperlinks are important content, so they receive keyboard focus. When a user moves their keyboard focus to an empty link, their focus indicator may disappear. The user may not know where they are on the page.
Screen readers may announce the presence of the hyperlink, but without link text, the user won’t understand what will happen if they activate the link. That can be frustrating — and it’s a clear indication that the website doesn’t prioritize accessibility.
Related: What Is Keyboard Accessibility?
How do empty hyperlinks occur?
An empty hyperlink may occur if you use an image as a link without adding alternative text (also called alt text). If that’s the case, you’ll simply need to add alt text, following the best practices for writing alt text.
Empty hyperlinks might also occur if you delete an element (such as an image or text) without adjusting the underlying HTML.
For example, if you’re building your website in a content management system (CMS), you might decide to delete a linked image through the page builder. The CMS may leave the HTML hyperlink intact — and you’ve just created an accessibility barrier for your users.
To fix the problem, you’ll either need to remove the HTML hyperlink or add relevant link text. Since the hyperlink isn’t visible, the best course of action is usually to remove the HTML.
Related: How Many Hyperlinks Are Too Many for Accessibility?
What does WCAG say about empty hyperlinks?
Empty hyperlinks can prevent conformance with the Web Content Accessibility Guidelines (WCAG), the international standards for digital accessibility.
WCAG addresses hyperlinks in two success criteria (SC):
- WCAG 2.1 SC 1.1.1, “Non-text Content" - All non-text content that is presented to the user has a text alternative that serves the equivalent purpose, with several exceptions.
- WCAG 2.1 SC 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.
Both of these guidelines are Level A criteria, which means that websites cannot be considered reasonably accessible if they contain empty hyperlinks.
Related: “Click Here" Isn’t Enough Context for Hyperlinks
Regularly audit your hyperlinks for accessibility
Most automated accessibility tools will check for empty links, along with other common hyperlink issues such as redundant link text and broken links.
The Bureau of Internet Accessibility’s free website analysis checks for empty links, and AudioEye’s digital accessibility platform can find and remediate many common issues as the page loads.
To provide your users with the best possible experience, it’s a good idea to occasionally audit your hyperlinks and look for opportunities. Some tips:
- Review your link text. Make sure it’s descriptive — the user should be able to understand exactly what happens when they activate the link (and “click here" certainly isn’t enough context).
- Make sure linked images have appropriate alternative text (also called alt text). The alt text should describe the link destination.
- Make sure hyperlinks are visually distinct, and don’t rely on color alone. Generally, hyperlinks should be underlined or obviously different from the other content in another way.
For additional guidance, read our Quick Guide to Accessible Hyperlinks. To test your content for common accessibility issues, get started with our free WCAG Level A/AA website analysis.
