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>