:focus-visible & interaction states

Keep keyboard focus visible

Lesson 16 of 20 · 12 min · Module 5: Interfaces people can operate

People using a keyboard need to know which control will respond next. A visible focus indicator makes that position easier to follow.

Start this lesson →

Free. No installation: you write and run the code in your browser, and it is checked automatically.

By the end, you’ll be able to…

Use native keyboard-operable controls
Declare an explicit focus indicator

The idea

Style :focus-visible to show an indicator when the browser determines it is useful, commonly during keyboard navigation. Keep controls native and use a clear outline with some separation from the element.

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

01Start with a real control

A button is focusable and keyboard-operable by default. A generic div would need additional semantics and interaction handling.

02Keep focus separate from hover

Hover describes a pointing-device state. It does not replace keyboard focus. A focus-visible selector addresses a different need.

03Verify the experience manually too

In your own page, press Tab to move between controls and check that the indicator remains visible. The exercise checks the declaration and computed cascade in a synthetic focus state; it does not perform a complete accessibility audit.

Your turn

Create a native button with class action and text Start learning. Give it 12px padding. Add an explicit .action:focus-visible CSS rule with a solid 3px outline and 3px outline-offset. The checks apply a synthetic focus state and use the browser’s CSS cascade, including overrides. Also test keyboard navigation yourself.

What the checks look for

Uses a native button with a clear name
Button has 12px padding
Focus rule declares a 3px outline
Focus outline is solid
Focus rule separates the outline by 3px

Try it in the editor →

Take this with you

A clear interaction state helps people understand where they are.

Go a little further

Apply a consistent focus indicator to both buttons and links, and test with Tab in a normal browser page.