Empty links: what they are and how to fix them

Updated 2026-10-24 · Altlark guides

An empty link is an <a href> element with no accessible name: no text inside it, no aria-label, no title, and no image with alt text or SVG with a title. Visually it might be a perfectly clear icon. To a screen reader it's just "link", sometimes followed by the URL read out character by character. Voice-control users can't say "click Facebook" because the link has no name to match.

Empty links are one of the most common issues on small-business sites. In a static scan of 333 small-business home pages that we ran in October 2026, 171 (51%) had at least one link with no text, no image alt and no aria-label or title. That scan read raw server HTML, so some of those were icon links that get a name from CSS or JavaScript, and the true number may be somewhat lower. It's still the single most frequent problem we see.

Which WCAG criteria apply

• 2.4.4 Link Purpose (In Context), Level A: "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." A link with no text has no purpose a user can determine.
• 4.1.2 Name, Role, Value, Level A: interactive elements need a name that assistive technology can read.

Where empty links come from

• Social media icons in the header or footer, built with an icon font or an inline SVG and no text.
• Icon-only links like a cart, search or phone icon.
• Card links that wrap an image or a background image, where the image has no alt or the link uses CSS for the image.
• Empty anchors left behind by page builders or WYSIWYG editors, like <a href="#"></a>.
• Duplicate links around an image next to a text link, where the image link is empty.

Bad vs fixed: social icons

<a href="https://facebook.com/acme"><i class="fa fa-facebook"></i></a>
<a href="https://instagram.com/acme"><span class="icon-instagram"></span></a>

The icon font puts a glyph on screen with CSS, but there's no text in the HTML. Fix it with an aria-label on the link, or with visually hidden text:

<a href="https://facebook.com/acme" aria-label="Acme on Facebook">
  <i class="fa fa-facebook" aria-hidden="true"></i>
</a>
<a href="https://instagram.com/acme">
  <span class="icon-instagram" aria-hidden="true"></span>
  <span class="visually-hidden">Acme on Instagram</span>
</a>

The visually-hidden class is the common "screen-reader only" pattern: it hides text visually but keeps it in the accessibility tree. Don't use display:none for this, because that hides the text from screen readers too.

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

Bad vs fixed: inline SVG icons

<a href="/cart"><svg viewBox="0 0 24 24"><path d="..."/></svg></a>

<a href="/cart">
  <svg viewBox="0 0 24 24" role="img"><title>Shopping cart</title><path d="..."/></svg>
</a>
<!-- or -->
<a href="/cart" aria-label="Shopping cart">
  <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="..."/></svg>
</a>

Altlark counts an SVG <title> inside the link as a name, so the first version won't be flagged. The aria-label version is more robust across screen readers, and it's what we'd recommend for icon-only links.

Bad vs fixed: leftover empty anchors

<p>Call us today. <a href="#"></a></p>
<a href="/services"></a>

These are usually editor leftovers. Delete them. If a link should be there, give it real text.

<p>Call us today at <a href="tel:+15555550123">555-555-0123</a>.</p>
<a href="/services">Our services</a>

What Altlark checks exactly

For each <a> that has an href and isn't hidden from assistive technology, Altlark computes an approximate accessible name from, in order: aria-label, aria-labelledby, title, then the text inside, including image alt text and SVG titles, while ignoring children marked aria-hidden="true". If the name is empty:

• and the link contains an image, it's reported as a linked image with no alt text;
• otherwise it's reported as an empty link.

Each issue shows the element's CSS selector and an HTML snippet, so you can search your theme or template for it. Anchors without an href (old <a name="top"> targets) aren't links and aren't flagged.

Limits

Altlark reads the HTML your server sends. If your theme fills in link text with JavaScript after the page loads, the scan can report a link as empty when a browser user would hear a name. Check a flagged link in your browser's accessibility inspector (in Chrome or Firefox dev tools, inspect the element and look at the "Accessibility" pane for its computed name). If it shows a name, you can ignore that result, though putting the name in the HTML is still more reliable.

Checklist

1. Run the free scan on your home page and a page with a footer.
2. For each empty link, decide: is it needed? Delete it if not.
3. Icon-only links get an aria-label that says where they go ("Acme on Facebook", not "Facebook icon").
4. Hide the decorative icon itself with aria-hidden="true".
5. Re-scan to confirm, then check the same pattern in your theme template so new pages don't repeat it.