✎ Technique: Keyboard accessible links

Links (<a> elements) are focusable by default, so it should normally be possible to activate them using the keyboard. However, under certain circumstances, they are not focusable: Unless you are deliberately trying to "disable" a link, make sure it does not take the form of any of these examples.

Examples

href removal

Sometimes <a> elements are used as if they're <button> elements, removing the href attribute because it is redundant. This will make the link unfocusable and inoperable by keyboard. Unless you want that to happen, don’t remove the href.


<a>click me to execute JavaScript event</a>

You can use the following CSS in your developer tools to highlight links that do not have an href. The CSS produces a red highlight around links that do not work using a keyboard.


a:not([href]) {
  border: 2px solid #c00;
}

Inclusion of tabindex="-1"

You can control the focusability of any element with the tabindex attribute. The value -1 will make the element unfocusable by the user. However, the element will still be focusable through JavaScript using the focus() method.


<a href="path/to/url" tabindex="-1">I'm currently unfocusable</a>