CSS Tutorial: Make Keyboard Focus Easy to See

Focus identifies the control ready for interaction; keyboard users need to see where it is.

Use Tab to move through links, buttons, and inputs, and Shift+Tab to move backwards.

If you remove the default focus outline, replace it with a suitable visible indicator.

The :focus-visible selector targets a focused control when the browser decides an indicator is needed.

Simple example: button:focus-visible { outline: 3px solid #ffd54a; outline-offset: 3px; }

Test the ring against the actual background; a bright color alone does not guarantee visibility.

:focus matches every focused control; :focus-visible depends on the browser’s decision to display an indicator.

Check the contact form, navigation, and login dialog with the keyboard; the ring should not be hidden behind other content.

Suggested exercise: complete a login, form-filling, and submission journey without using a mouse.

Attractive focus styling is only part of accessibility; test that controls actually work with the keyboard too.

Official sources

• MDN — focus-visible
• W3C WAI — Visible keyboard focus with CSS