Focus State

What is Focus State?

Focus state is the visual appearance of an element when it has keyboard focus – when it's the target of keyboard input. Typically shown as an outline or highlight around links, buttons, and form fields, it tells users where they are on the page.

Think of it as a cursor for keyboard users, showing which element will respond to keyboard actions.

Why Focus States Matter

Essential for Keyboard Users

Without visible focus, keyboard users are navigating blind. They can't see where they are or what they're about to activate.

WCAG Requirement

Visible focus is a Level AA requirement. Focus indicators must be visible and distinguishable.

Multiple User Groups

Focus states serve:

• People with motor disabilities
• Screen magnifier users
• Keyboard power users
• Anyone temporarily without a mouse

The Problem with Default Focus

Browsers provide default focus styles – typically a blue outline. Many designers remove these with outline: none because they consider them ugly.

This is an accessibility disaster. If you remove default focus, you must provide visible alternatives.

Designing Good Focus States

Make It Visible

Focus indicators should be obvious, not subtle. High contrast with both the element and background.

Be Consistent

Use the same focus style throughout your site. Users should always recognise focus.

Don't Rely on Colour Alone

Combine colour with other indicators (outline, underline) for colour-blind users.

Consider Context

Focus on dark backgrounds needs different treatment than focus on light backgrounds.

Match Your Brand

Focus states can be branded – they don't have to be the browser default blue.

CSS Focus Techniques

Basic Outline

:focus {
  outline: 2px solid #005fcc;
  outline-offset: 2px;
}

Focus-Visible

Only show focus for keyboard users, not mouse clicks:

:focus-visible {
  outline: 2px solid #005fcc;
  outline-offset: 2px;
}

Box Shadow Alternative

:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 95, 204, 0.5);
}

Focus State for Different Elements

Links

Outline or underline change, possibly background colour.

Buttons

Outline, shadow, or border change. Ensure distinction from hover state.

Form Fields

Border colour change, outline, or shadow.

Cards and Containers

If the whole card is clickable, show focus on the container.

Testing Focus States

1. Remove your mouse
2. Tab through your site
3. Can you always see where focus is?
4. Does focus contrast sufficiently?
5. Is the focus indicator at least 2px thick?