Empty Links: What They Are and How to Fix Them

TL;DR

Empty links are clickable elements with no text that screen readers can announce. Blind users hear 'link' but don't know where it goes or what it does.

10+ years experience
Houston, TX
Enterprise experience

What This Violation Means

Empty links occur when a link or button has no accessible text - often because it only contains an icon, an image without alt text, or whitespace characters. Screen readers cannot tell users what the link's purpose is, announcing only 'link' or 'button' with no additional context. This is frustrating for screen reader users and violates the fundamental principle that all interface elements must have accessible names.

Why Demand Letters Cite This Violation

Empty link violations appear in demand letters because:

- Extremely common across all types of websites (we find 20-50 empty links on most sites)
- Easy to detect with automated scanners
- Clearly violates WCAG 2.4.4 (Link Purpose in Context)
- Easy to demonstrate in legal proceedings (play recording of screen reader saying 'link' repeatedly)
- Prevents blind users from navigating effectively - they must guess what each link does
- Often affects critical functionality: shopping cart, social media, navigation menus

Real-World Example from Actual Demand Letters

A typical demand letter states: "Multiple links throughout the site contain no discernible text, making it impossible for screen reader users to determine their purpose or destination. For instance, the shopping cart icon link in the header announces only as 'link' with no indication it leads to the shopping cart. Social media icon links in the footer similarly provide no information about which social platform they link to. These violations of WCAG Success Criterion 2.4.4 (Link Purpose) prevent blind users from effectively navigating the website."

What the Law Says

WCAG 2.1 Level AA (Success Criterion 2.4.4 - Link Purpose in Context) requires:

- Link purpose can be determined from link text alone, OR
- Link purpose can be determined from link text together with its programmatically determined link context

Success Criterion 4.1.2 (Name, Role, Value) additionally requires:
- All user interface components have accessible names that can be programmatically determined

In practice: every link and button must have text that screen readers can announce, either visible text, alt text on an image, or an aria-label attribute.

Code Examples: Incorrect vs. Correct

Incorrect Implementation

<a href="/cart"><img src="cart-icon.png"></a>
(No alt text - screen reader says "link")

<button><i class="fa fa-search"></i></button>
(Icon font with no label - screen reader says "button")

<a href="/contact">   </a>
(Whitespace only - screen reader says "link")

Correct Implementation

<a href="/cart"><img src="cart-icon.png" alt="Shopping cart"></a>
(Screen reader says "Shopping cart link")

<button aria-label="Search"><i class="fa fa-search"></i></button>
(Screen reader says "Search button")

<a href="/contact" aria-label="Contact us"><i class="icon-mail"></i></a>
(Screen reader says "Contact us link")

How to Fix This Violation

DIY Approach

1. Find all links and buttons on your site (use browser dev tools or automated scanner)
2. Check if each has visible text that describes its purpose
3. For icon-only links, add one of these solutions:
  - Alt text to the icon image: Facebook
  - aria-label to the link:
  - Visually hidden text: Home

4. Test with a screen reader to verify each link announces correctly

Common icon-only links to check:
- Social media icons (Facebook, Twitter, LinkedIn, Instagram)
- Shopping cart icon
- Hamburger menu icon (three horizontal lines)
- Search icon (magnifying glass)
- User account icon
- Close/X buttons on modals

Professional Remediation

We use automated scanners to identify every link and button without accessible names, then manually review each to determine the appropriate fix. For icon libraries (Font Awesome, Material Icons), we implement consistent aria-label patterns. For image links, we add proper alt text. For sites with hundreds of links, we create systematic fixes that can be applied across the entire platform. Most sites take 1-3 hours to fix all empty links. We verify fixes with screen reader testing and provide documentation for maintaining accessibility as new content is added.

Cost to Fix

Our Experience Fixing This Violation

Legal Disclaimer

This guide provides technical information about website accessibility violations based on our experience remediating WCAG issues. It is not legal advice and should not be relied upon as such. If you have received an ADA demand letter or are facing legal action, consult with an attorney who specializes in ADA defense. Laws regarding digital accessibility vary by jurisdiction and are subject to change. While we provide accurate technical guidance, we make no guarantees about legal compliance or outcomes.

Need Professional Help Fixing This Violation?

Our Houston-based team has 10+ years of experience remediating this exact violation across hundreds of websites. Get a free scan or book a call for a fixed-price quote.

Written by Houston Web Compliance

Our team has over 10 years of hands-on experience fixing website accessibility violations for enterprise e-commerce sites, complex web applications, attorney websites, and businesses nationwide. We've remediated WCAG violations on platforms including React, WordPress, Drupal, HubSpot, and custom applications.

Based in Houston, Texas | Serving businesses nationwide | Learn more about our team