Restore the focus outline your reset deleted

My buttons look fine, until I try tabbing through them.

BeginnerRead 6 minDoing: an hour6 steps

What you'll have at the end

Every interactive element in the app gets back a focus ring driven by the browser's own keyboard-versus-mouse heuristic instead of a rule that hides it for everyone, in a color proven to clear the accessibility contrast rule against whatever sits behind it.

Before you start

You need

A stylesheet already shipped to the app, with a rule somewhere in it that turns the browser's own focus ring off, whether by name or through a broader reset.

Not covered

Giving a custom widget keyboard behavior it never had, such as making a plain div respond to the keyboard at all. This recipe restores a ring for elements the keyboard can already reach.

Leans on

Find the reset and prove the ring is gone

Find every rule that kills the ring
Confirm it with a real keyboard pass

Bring the ring back and prove its color holds

Bring the ring back for keyboard users only
Prove the ring's color actually clears the bar

Free the clipped ring and confirm the whole page

Free the ring from a clipped container
Recheck the whole page beyond these two

Where to go next

Trap keyboard focus inside a modal so Tab can't escape it

for keeping focus inside an open dialog once the keyboard reaches it, a different problem from making an existing ring visible

Scan an entire site for accessibility bugs from a terminal

for finding every remaining silenced ring across a much larger site than one manual keyboard pass can cover

Checked 22 Aug 2026

Part of the Web Accessibility cookbook