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.


Ensure that this focus indicator has sufficient contrast.


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


Add a comment

Required fields are marked *.

Back to top