12.1. Ensure that keyboard focus is visible
Keyboard focus visibility is defined by the CSS outline property. It must not be degraded in relation to the browser’s native focus style.
In particular, all properties that suppress or reduce focus visibility (e.g. outline: none; and outline: 0; applied in CSS to all interactive elements) should be removed.
Each interactive element (links, buttons, form fields, etc.) must stand out visually when it receives focus, in order to ensure that users navigating using the keyboard know where they are on the page.
Note
Ensure that this focus indicator has sufficient contrast.
We strongly recommend that you don’t customize keyboard focus visibility, in order to leave the default browser style, which is sufficiently contrasted in the vast majority of cases.
The use of the box-shadow CSS property to customize keyboard focus visibility is strongly discouraged, as it is not visible in high-contrast mode, unlike the outline property.
Tip
Good accessibility practice is to systematically back up each :hover rule with a :focus rule in CSS.
For example:
main a:hover,
main a:focus {
text-decoration: none;
}