Visible Focus: Never Hide the Outline

A keyboard user can only see one thing at a time: which control has focus. That visible marker is called the focus indicator. 👀

By default the browser draws a focus outline around the active element as you Tab. It is your built-in you are here marker.

Designers often hate the outline and delete it. That one rule, outline none, blinds keyboard users instantly. Please never ship it bare.

You may drop the default outline, but only if you add a clear replacement. Never leave a focused control looking exactly like an idle one.

A good indicator is easy to spot: a thick outline, a ring, or a strong color shift. Subtle is the enemy here, not your friend.

The focus-visible selector shows the ring for keyboard users but hides it on plain mouse clicks. You get safety without the visual noise.

An outline that blends into the background helps no one. Your focus style needs enough contrast to stand out against the page.

Watch out for overflow hidden on a parent. It can crop the focus outline so the bottom edge silently disappears.

Use outline-offset to push the ring away from the element. A little gap makes the indicator far easier to notice.

This is not just polish. WCAG demands a visible focus indicator on every interactive element, so hiding it can fail conformance.

The quickest test costs nothing: Tab across your page. If you ever lose track of focus, your indicator needs work.

Pick the safest way to handle focus styling.

Never strip the focus ring without replacing it. Prefer focus-visible, give it strong contrast and offset, and Tab-test it yourself. ✅