Focus State
A focus state identifies the element that is currently receiving keyboard input.
A visible focus indicator lets someone navigating with a keyboard see where their next action will occur.
What It Means in Practice
As someone presses Tab through a page, focus moves between interactive elements such as links, buttons, and form controls.
The focused element may be shown with an outline, border, background change, or another visible treatment.
That indicator needs to remain clear enough for the user to follow their position through the interface.
How It Works
Browsers provide default focus behaviour for native interactive elements.
CSS can customize the appearance of that focus indicator, but removing it without providing an effective replacement can make keyboard navigation extremely difficult.
Focus also has a programmatic state that can be managed when necessary in dynamic interfaces.
Why It Matters
A mouse pointer shows a pointer user where they are about to interact.
Keyboard users need an equivalent signal.
Without visible focus, someone may still technically be able to tab through the page while having no reliable way to know which control is active.
Common Problems
Common focus problems include:
outline: nonewithout a replacement- Focus indicators with weak colour contrast
- Indicators that are difficult to distinguish from normal styling
- Focus moving in an unexpected order
- Dialogs or menus sending focus to the wrong location
- Focus disappearing after dynamic changes
How to Improve
Keep the browser's default focus treatment unless there is a good reason to replace it.
When customizing focus, make it visually clear and test it across different backgrounds and components.
Then perform keyboard navigation through complete user flows rather than checking controls individually.