====== 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.). 

<note astuce>**Tip**

It is a good accessibility practice to duplicate each '':hover'' rule with a '':focus'' rule in the CSS.
</note>

<note attention>**Warning**

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:

<code css>

:active
{
outline: none;
}

:focus
{
outline: 3px dotted green;
}

</code>

In this case, outline is changed with focus to be more visible.

</note>


===== Related recommendations =====

<note bulle>
  * Previous recommendation: [[notices:html-css:mettre-en-place-des-liens-d-evitement]]
  * Next recommendation: [[notices:html-css:prevoir-une-alternative-a-chaque-contenu-multimedia-embarque-video-audio-object-etc]]
</note>