Make keyboard focus clear and visible

A visitor moving with Tab must always know which link or button is active.

Removing the outline without a replacement makes keyboard navigation invisible.

Open a test page and press Tab several times without using the mouse.

If the indicator is weak, define a strong outline for :focus-visible.

A small outline-offset keeps the ring from colliding with button text.

The focus color should remain obvious on both light and dark backgrounds.

Tab order should match the visual and logical order of the page.

Test the reverse route with Shift+Tab as well.

Check menus, forms, dialogs, and close buttons separately.

The test passes when you can finish the page’s main task without a mouse.

Official sources

• web.dev — Focus
• web.dev — Keyboard focus