Focus states, keyboards and the people who use them

Try this: open your website, put the mouse aside, and press the Tab key. Keep pressing it. Can you see where you are on the page? Can you reach the menu, the contact form and the main button? Can you get out of the cookie banner?

For many sites the honest answer is "sort of". The focus jumps somewhere invisible, a menu won't open, or a pop-up swallows the keyboard entirely. This post explains why that matters and how to fix it with a handful of design and build decisions.

Who uses a keyboard to browse

It's easy to imagine keyboard navigation as a niche concern. In practice, a wide range of people rely on it, permanently or temporarily:

• People with motor impairments who find a mouse or trackpad difficult or painful.
• People who use screen readers, which are typically driven from the keyboard.
• People using switch devices, voice control or other assistive technology that moves focus in a similar way.
• People with a broken wrist, a dead trackpad battery or a laptop on a train table with no room for a mouse.
• Power users who simply find the keyboard faster, especially in forms.

All of these people depend on one thing: being able to see where the keyboard focus is and move it predictably.

What a focus state is

When an interactive element such as a link, button or form field is ready to receive keyboard input, it has focus. Browsers draw a default focus indicator, usually an outline or ring, around it.

The problem is that designers sometimes find these default outlines ugly and remove them without adding anything in their place. The result is a page where keyboard users are effectively navigating blindfolded. WCAG asks for a visible focus indicator for exactly this reason.

The fix isn't to keep the browser default forever. It's to design a focus state on purpose, one that fits your site and is clearly visible.

Designing a good focus indicator

A good focus style is obvious, consistent and doesn't depend on colour alone.

Make it visible against every background

A thin pale blue outline might show up on a white page but disappear on a navy footer or a photo banner. Choose a style that contrasts with all the backgrounds it might sit on. A common approach is a two-tone ring: a dark outline with a light gap, or the reverse, which stays visible on both light and dark areas.

Make it thick enough to notice

A one pixel dotted line is technically visible but easy to miss. A solid outline of two or three pixels, slightly offset from the element, reads clearly without looking heavy.

Don't rely only on subtle colour changes

Shifting a button from dark green to slightly darker green on focus is not enough. Many people won't perceive the difference. Pair colour changes with a shape change such as an outline, underline or border.

Keep it consistent

Every focusable element should share the same basic focus treatment. If links get an underline, buttons get a ring and form fields get a glow, people have to relearn the signal as they move around. One style, applied everywhere, is easier to follow.

Show it for keyboard users without annoying mouse users

Some designers removed focus outlines because they appeared when clicking buttons with a mouse. Modern CSS solves this with :focus-visible, which lets browsers show the focus style when it's useful, typically for keyboard navigation, and skip it for most mouse clicks.

:focus-visible {
  outline: 3px solid #1a1a1a;
  outline-offset: 3px;
  box-shadow: 0 0 0 6px #ffffff;
}

This gives a dark ring with a white halo, which holds up on most backgrounds.

Focus order: where Tab goes next

Visibility is half the job. The other half is order. Pressing Tab should move through the page in a sequence that matches how it reads: top to bottom, and in left to right languages, left to right.

Order problems usually come from layout tricks. If CSS visually moves a sidebar to the left but it comes last in the HTML, the keyboard will visit it last, which is confusing. Where possible, keep the source order of the HTML aligned with the visual order.

Avoid setting positive tabindex values to force a custom order. It tends to create more confusion than it solves and becomes fragile as the page changes.

The usual trouble spots

Some components cause keyboard problems far more often than others. Check these first.

Skip links

A "Skip to main content" link at the very top of the page lets keyboard users jump past a long header and menu. It can be visually hidden until it receives focus, then appear in the corner. It costs very little and saves a lot of tabbing on every page.

Dropdown menus

Menus that only open on mouse hover lock keyboard users out of everything inside them. Make sure the menu trigger is a real button that opens the menu on Enter or Space, and that Escape closes it.

Modals and pop-ups

When a dialog opens, focus should move into it, stay within it while it's open, and return to the element that opened it when it closes. A newsletter pop-up that appears but leaves focus behind on the page means a keyboard user can't reach the close button. Escape should close it too.

Custom controls

A styled div that looks like a button isn't a button to the keyboard. It won't receive focus or respond to Enter unless extra work is done. Use real button, a, input and select elements whenever possible; they come with keyboard behaviour built in.

Carousels and sliders

Auto-advancing carousels can move content out from under keyboard focus. If you use one, give it visible controls that can be reached and operated with the keyboard, and a way to pause it.

How to test in ten minutes

You don't need special software to catch most problems.

1. Load a page and press Tab repeatedly. Watch for any moment where you can't see the focus.
2. Check the order. Does it follow the visual layout?
3. Open every menu, accordion and dialog with Enter or Space. Close them with Escape.
4. Fill in and submit your main form using only the keyboard.
5. Use Shift and Tab to go backwards and make sure nothing traps you.
6. Repeat on a page with a dark section or image banner to check focus visibility there.

If you build with a website tool, check its templates the same way. A good builder should ship visible focus styles by default, but it's always worth a quick test of your own pages, especially after adding custom sections.

Keyboard checklist

• Every interactive element shows a clear, consistent focus indicator.
• The indicator is visible on light, dark and image backgrounds.
• Focus order follows the visual reading order.
• A skip link lets people bypass the header.
• Menus, dialogs and accordions open, close and contain focus correctly.
• Native HTML controls are used instead of clickable divs.
• You've completed your main task on the site without touching a mouse.

Keyboard support is one of those areas where a little care removes a real barrier. The people who rely on it will notice, even if nobody else does.