CSS Focus Ring Acessível

Accessible focus rings: the keyboard user's lifeline

The focus ring is the visible outline that appears around an interactive element — a link, button, input or custom widget — when it receives keyboard focus. It is what tells a user pressing Tab "you are here, press Enter to activate". Browsers ship default rings (Chrome's blue solid, Firefox's dotted, Safari's subtle glow), but those defaults clash with most designs and developers historically reached for outline: none. Doing that without a replacement destroys keyboard accessibility for every person who cannot or does not use a pointing device — including screen-reader users, motor-impaired users and power users who simply prefer the keyboard.

The modern, standards-compliant pattern uses :focus-visible instead of :focus. The browser exposes focus-visible only when the focus came from the keyboard or assistive technology — never from a mouse click. That means buttons stop showing the ugly ring after every click but still light up when tabbed to. Support is universal in evergreen browsers (Chrome 86+, Firefox 85+, Safari 15.4+) and graceful degradation to :focus is a one-line fallback.

Two ways to draw the ring

Use outline + outline-offset when the element has no border-radius — outline is cheap, fast and respects Windows High Contrast Mode out of the box:

button:focus-visible {
  outline: 2px solid #0ea5e9;
  outline-offset: 2px;
}

Use box-shadow when the element is rounded — box-shadow follows border-radius on every browser, while outline only does so since Chrome 94 and Safari 16.4:

.pill:focus-visible {
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.5);
  outline: 2px solid transparent; /* High Contrast Mode fallback */
}

WCAG requirements you must hit

• 2.4.7 Focus Visible (AA): every interactive element must expose a visible focus indicator.
• 2.4.11 Focus Not Obscured (AA, WCAG 2.2): the indicator cannot be hidden by a sticky header, cookie banner or overlay.
• 1.4.11 Non-text Contrast (AA): the ring needs at least 3:1 contrast against the adjacent background.
• 2.4.13 Focus Appearance (AAA, WCAG 2.2): the ring must be at least 2 CSS pixels thick and surround the entire component.

Tailwind, design systems and Windows High Contrast

Tailwind ships focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 utilities that compile to the same box-shadow pattern. For Windows High Contrast Mode and forced-colors users, add @media (forced-colors: active) { :focus-visible { outline: 2px solid CanvasText; } } so the system ink color always wins.

Testing methodology

Tab through every interactive element on the page from top to bottom. Watch for: (a) elements that never light up (likely outline: 0 with no replacement), (b) rings that disappear under fixed headers (fix with scroll-margin-top), (c) pastel rings invisible on white. Automated tools — axe DevTools, WAVE, Lighthouse — catch the obvious offenders; NVDA and VoiceOver catch the rest.

FAQ

Outline or box-shadow — which one should I pick? Outline is faster, respects High Contrast Mode by default and never affects layout. Box-shadow is the right call for rounded buttons and pills because it follows border-radius reliably across browsers. Many design systems combine both: a transparent outline as a fallback plus the visible box-shadow ring.

Can I just remove the focus ring on a button? Never without a replacement. outline: none alone breaks WCAG 2.4.7 and makes the button unusable for keyboard users. If a designer asks for it, push back with a ring that matches the brand instead.

How do I show the ring only when the user is using the keyboard? Use :focus-visible. The browser tracks the most recent input modality and exposes the pseudo-class only when the focus came from the keyboard or assistive tech, not from a mouse click or touch.

Is the generated CSS sent to a server? No. The CSS is built in your browser. Nothing leaves the page — you can copy the result and paste it directly into your stylesheet.