12.3. Ensure that keyboard focus is visible

In order to ensure that sighted keyboard users can navigate in the page and know where they are, each interactive element (links, buttons, form fields, etc.) should stand out visually focus ring when it receives focus.

Note

Ensure that this focus indicator has sufficient contrast.

Tip

Good practice is to systematically back up each :hover selector with a :focus rule.

For example:

main a:hover,
main a:focus {
   text-decoration: none;
}

Find out more

Comments

Add a comment

Required fields are marked *.

Back to top