Restored article:This article was restored on April 18, 2025. It was originally published on January 2, 2013.
There’s an old programming saying: Garbage in, Garbage out. This helps people explain why all sorts of things don’t work. Concentrate on using the best content possible if you want a successful product, web page, mobile app, or chocolate covered cream puff. I’ve seen a new inaccessibility pattern appear with links that are not keyboard accessible. This article will explain the problem, solution, and provides a helpful bookmarklet for finding these neutered links on your page.
The Basics
HTML, at its most basic, is a markup language that allows linking; within a document and to an external document. These links use the <a> tag. The early HTML standards defined two functions for this tag.
Placing an href attribute into the tag converts it to a link, which can take the user to new content. This also places the link into the normal tab flow and makes it clickable.
<a href="#apples">Apples</a>
The <a> tag was also used as an anchor to define a section of content that could be targetted by those links. To create an anchor, the link would include the name attribute and avoid the href attribute. These anchors were typically empty and are neither in the natural tab flow or clickable. This avoids confusing the user by introducing link behavior on an item that does not trigger an action.
<a name="apples">Apples are great!</a>
While links are meant to take the user to new content, the <button> tag is meant to trigger an action, such as submitting a form.
The Problem
Neutered links (clickable links without href attribute) are becoming common as engineers use JavaScript to attach event handlers and don’t pay attention to the basic standards.
It’s too easy to create a button that looks great and can be clicked via a mouse. This mindset ignores those who depend on the keyboard.
Sample Neutered Link
The following button looks great and would work well with a mouse. However, it won’t receive focus via a keyboard, hence it is not accessible. Try clicking with a mouse, you’ll get an alert with the event and target.
Neutered Link
<a class="btn">Neutered Link</a>
We could allow it to receive focus by adding a tabindex attribute.
Neutered Link with tabindex=”0″
<a class="btn" tabindex="0">Neutered Link with tabindex="0"</a>
Tabindex=”0″ takes an item that normally does not receive focus and places it in the natural tab flow. Tabindex=”-1″ keeps the item out of the natural tab flow, but it can receive focus via JavaScript. Tabindex greater than 0 places a specific position in the tab flow. For instance, tabindex=”1″ would make something the first item to receive focus on the page.
Now we have a link that looks good and can receive focus. However, its lack of href attribute prevents it from receiving the click event from the keyboard.
The Solution
Fortunately this can be easily solved. First, we can go back to our standards and use a <button> instead of an <a>.
<button class="btn">A real button</button>
Alternatively, we could fix our links by adding the href and optional role=”button” attributes.
<a class="btn" role="button" href="#">Link with role="button"</a>
Neutered Link Bookmarklet
This bookmarklet will place a big red border around links that do not include an href attribute. Simply drag the link to your browser’s bookmark bar and then click it when you want to test a page. It will draw a red border around any links that do not have an href attribute.
Test Link
Test the above function by triggering a border around this: Neutered Link.
Bookmarklet Code
javascript: (function (a) {
var b = "a:not([href]) {border:3px solid red; padding:2px; } ",
c = a.getElementById("a11y-neutered-highlight");
if (c) {
c.disabled = !c.disabled
} else {
c = a.createElement("style");
c.id = "a11y-neutered-highlight";
c.type = "text/css";
if (c.styleSheet) {
c.styleSheet.cssText = b
} else {
c.appendChild(a.createTextNode(b))
}
a.getElementsByTagName("head")[0].appendChild(c)
}
})(document)
More Information
- Links and Hypertext – WebAim
- Making Accessible Links: 15 Golden Rules For Developers – Gian Wild
- Link Behavior – NC State University – IT Accessibility