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 the keyboard focus visibility, in order to keep the default browser style, which is sufficiently contrasted and visible except in special cases. Moreover, this style is implemented with the :focus-visible CSS class, limiting focus display to keyboard users only.

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;
}

Comments

Add a comment

All fields are mandatory.

Updates

20 August 2024
Modification of the “Note” section.

Back to top