11.2.1. Ensure visibility of focus when set from the keyboard
To help users who navigate with the keyboard know where they are on the page, each interactive element must be visually highlighted when the focus is set on it (links, form fields, buttons, etc.).
It is a good accessibility practice to duplicate each :hover rule with a :focus rule in the CSS.
The outline: none; rule must never be applied by default to the focus in the CSS, except in the specific case where the visibility of the focus is then overwritten later in the style sheet.
If the styles applied to the focus position are considered to be intrusive when navigating with a mouse, it is possible to cancel them at mouse-click, by using the pseudo-class :active.
For example:
:active { outline: none; } :focus { outline: 3px dotted green; }
In this case, outline is changed with focus to be more visible.
Related recommendations
- Previous recommendation: 11.1.2. Include skip links
