Code Fix Guide

How to Fix Empty Links and Buttons

Links and buttons without discernible text are found on 50%+ of websites. Icon-only buttons, image links without alt text, and links that just say 'click here' are meaningless to screen reader users who navigate by link and button lists.

Common Errors and How to Fix Them

Icon-only link with no text

Problem

<a href="/cart"><i class="icon-cart"></i></a>

Fix

<a href="/cart" aria-label="Shopping cart">
  <i class="icon-cart" aria-hidden="true"></i>
</a>

Button with only an SVG icon

Problem

<button><svg>...</svg></button>

Fix

<button aria-label="Close menu">
  <svg aria-hidden="true">...</svg>
</button>

Vague link text — not descriptive

Problem

<a href="/docs">Click here</a>

Fix

<a href="/docs">View API documentation</a>

Image link with no alt text

Problem

<a href="/report.pdf">
  <img src="pdf-icon.png">
</a>

Fix

<a href="/report.pdf">
  <img src="pdf-icon.png" alt="Download annual report (PDF)">
</a>

Why This Matters

Empty links and buttons violate WCAG 2.4.4 (Link Purpose) and 4.1.2 (Name, Role, Value). Screen reader users often pull up a list of all links or buttons on a page to navigate. Without descriptive text, these lists are filled with 'link', 'button', or silence — making navigation impossible.

Related WCAG Criteria

2.4.4Link Purpose (In Context)

Level A — Operable

4.1.2Name, Role, Value

Level A — Robust

Find All Your Accessibility Issues Automatically

ADA CodeFix scans your website for WCAG 2.1 AA violations and generates AI-powered code fixes — not vague descriptions, actual code you can copy-paste.

Scan Your Site Free

No credit card required AI-generated code fixes

More Code Fix Guides

How to Fix Missing Alt Text on Images

Missing alt text is the #1 accessibility violation. Learn how to add proper alt attributes to images with code examples and an automated scanner.

How to Fix Low Color Contrast in CSS

Low color contrast is found on 80%+ of websites. Learn the WCAG contrast ratios, test your colors, and fix CSS contrast issues with code examples.

How to Fix Missing Form Input Labels

Form fields without labels are inaccessible to screen reader users. Learn how to properly label inputs with HTML label elements and ARIA attributes.

How to Fix HTML Heading Structure

Skipped heading levels and missing H1 tags hurt both SEO and accessibility. Learn how to create a proper H1-H6 hierarchy with code examples.

How to Fix Keyboard Navigation and Focus Issues

If your website can't be navigated with a keyboard, it's inaccessible. Learn how to fix tab order, focus styles, keyboard traps, and custom components.

How to Fix ARIA Attribute Errors

Incorrect ARIA attributes can make accessibility worse, not better. Learn the most common ARIA mistakes and how to fix them with proper code examples.