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

Tip

It is a good accessibility practice to duplicate each :hover rule with a :focus rule in the CSS.

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: 

:active
{
outline: none;
}
 
:focus
{
outline: 3px dotted green;
}

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