This is an old revision of the document!
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 with a mouse-click, by using the pseudo-class :active.
For example:
:active { outline: none; } :focus { outline: 3px dotted green; }
Dans ce cas, l’outline est alors modifié à la prise de focus afin de le rendre plus visible dans tous les contextes.
Related recommendations
- Previous recommendation: 11.1.2. Include skip links
