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

neutered link

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.


Apples

Apples

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.


Apples are great!

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

Moliere's Rough DayNeutered 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

Neutered Link

We could allow it to receive focus by adding a tabindex attribute.

Neutered Link with tabindex=”0″

Neutered Link with tabindex="0"

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>.


Alternatively, we could fix our links by adding the href and optional role="button" attributes.

Link with role=”button”

Link with role="button"

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.

Link !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-css-highlight");
    if (c) {
        c.disabled = !c.disabled
    } else {
        c = a.createElement("style");
        c.id = "a11y-css-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


5 thoughts on “Neutered Links: A.K.A removing the href attribute”

  1. The misuse of the <a> element is rife, really baffles me why developers don’t think to use the correct element for an actionable button; the element. When I ‘Inspect element’ on other people’s sites to check this & see a element is being used I get a shock as it just never happens. Simple stuff really that is important for accessibility.

Leave a Reply

Your email address will not be published. Required fields are marked *