Neutered Links: A.K.A removing the href attribute

Restored Article:
Originally published: January 2, 2013
Restored: April 18, 2025

Introduction

There’s an old programming saying: Garbage in, Garbage out. Bad input leads to bad results. Whether you’re building a website, app, or even a chocolate-covered cream puff, good practices are essential.

Recently, a pattern has emerged where links are not keyboard accessible. This article explains the issue, provides a solution, and offers a bookmarklet to help identify these problematic links.

The Basics

HTML uses the <a> tag to create links. Historically, it served two purposes:

With href: Creates a link users can activate via mouse or keyboard.
With name only: Creates a target anchor within the page, not a link.

Example of a standard link:

<a href="#apples">Apples</a>

Example of an anchor without navigation behavior:

<a name="apples">Apples are great!</a>

To trigger an action (like submitting a form), use the <button> element instead of a link.

The Problem

A frustrated looking person representing Moliere's Rough Day — Even Molière had rough days with bad HTML!

Some developers create neutered links — <a> tags without an href attribute — relying solely on JavaScript to trigger actions. These work with a mouse but not with a keyboard.

Example of a Neutered Link

<a class="btn">Neutered Link</a>

Neutered Link Example

Attempt to Fix with tabindex

You can make it focusable by adding tabindex="0":

<a class="btn" tabindex="0">Focusable Neutered Link</a>

However, even with focus, it won’t activate properly using the keyboard without an href.

The Real Solution

Use the Right Element

Use a button for actions:

<button class="btn">A real button</button>

Or fix the link: Add href="#" and role="button" to the <a> tag:

<a href="#" role="button" class="btn">Link acting as a button</a>

Link acting as a button

Bookmarklet: Find Neutered Links

Drag this link to your bookmarks bar:

Highlight Neutered Links

Test it:

Neutered Link to Test

Bookmarklet Code

javascript:(function(document){
    var css = "a:not([href]) {border:3px solid red; padding:2px;}",
        style = document.getElementById("a11y-neutered-highlight");
    if (style) {
      style.disabled = !style.disabled;
    } else {
      style = document.createElement("style");
      style.id = "a11y-neutered-highlight";
      style.type = "text/css";
      if (style.styleSheet) {
        style.styleSheet.cssText = css;
      } else {
        style.appendChild(document.createTextNode(css));
      }
      document.getElementsByTagName("head")[0].appendChild(style);
    }
})(document);