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.
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.
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.
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.
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.
We could allow it to receive focus by adding a tabindex attribute.
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.
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.
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 the above function by triggering a border around this: Neutered Link.