Skip to main content

SimpleAccess.io | Accessibility is Already Here

"Accessibility isn't extra work. Accessibility is already here, waiting for you to notice."

← Back to Sensory Lab

Sensory Lab Experiment 4: Empty Links

The Mystery Destination

Imagine navigating a busy airport where every sign is blank. That is the reality of navigating the web with empty links.

According to the 2026 WebAIM Million report, empty links are present on 46.3% of home pages, making them the fourth most common accessibility failure on the internet.

Empty links occur when an anchor tag (<a>) contains no readable text. This usually happens in one of two ways: developers wrap an image that lacks alt text in a link, or they use icon fonts (like a social media bird or camera) without providing a text fallback. When a screen reader user encounters these links, they don't know where the link will take them. The screen reader will often attempt to read the raw, messy URL to give the user a clue, resulting in auditory chaos.

Read the full Links data in the WebAIM Million Report.

The Digital Twins: Navigate by Context

To demonstrate WCAG Success Criterion 2.4.4 (Link Purpose), we've built a typical e-commerce product card featuring icon-only action buttons. You'll experience how adding hidden context transforms a guessing game into a clear path.

What Good Looks Like

This layout uses visual icons, but pairs them with visually hidden text or aria-label attributes. Screen reader users know exactly what action they are about to take.

Experience Accessible Links

The Inaccessible Twin

This layout relies purely on visual SVG icons. Non-visual users are forced to click blindly or decipher raw URLs to figure out the button's purpose.

Experience Empty Links

How to Fix Empty Links

There are two robust, standards-based ways to ensure your icon links are always accessible without compromising your minimalist design:

1. The SR-Only Class

Insert a <span class="sr-only"> inside the anchor tag next to your icon. This text is visually hidden using CSS but is perfectly readable by screen readers. (We use this exact technique for our "Skip to main content" link!)

2. The ARIA Label

Add an aria-label="Action Description" attribute directly to the <a> tag. This overrides whatever is inside the link and speaks the label aloud to the screen reader user.