Draw a visible focus indicator

Clearly show keyboard focus without removing the indicator.

Official sourceW3C WCAG 2.2 — Focus VisibleReviewed: 2026-08-26

STEP 1 · LEARN

How it works

:focus-visible selects a focused element when the browser determines a visual indicator is useful. An outline does not consume layout space, while outline-offset separates it from the element edge.

Correct example

.action:focus-visible { outline: 3px solid #f59e0b; outline-offset: 3px; }

The thick, offset outline remains visible around the button.

Common mistake

.action:focus { outline: none; }

Removing the outline without a replacement can make focus impossible to locate for keyboard users.

STEP 2 · APPLY

Your exercise

For .action:focus-visible, set a 3px solid #f59e0b outline and a 3px outline offset.

index.htmlCSS

Safe resultisolated

The draft stays only in this browser.HTML and CSS allowed · scripts and network blocked

STEP 4 · CHECK

What needs to pass

0%not checked

Focus has a 3px solid outline.
The outline is offset by 3px.
The target element is present in the page.

Explain the solution logic

The selector follows browser-indicated focus, and the two properties build a persistent, readable ring.

How it works

Your exercise

Write and see the result

What needs to pass