✎ Technique: Keyboard accessible links
Source: https://accessibility.huit.harvard.edu/technique-keyboard-accessible-links Parent: https://accessibility.huit.harvard.edu/keyboard
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>
See also: