What is a focus state in UX design?
A focus state is the visual treatment applied to an interactive element when it receives keyboard focus, indicated by the browser or operating system when a user navigates the interface using the Tab key, arrow keys, or other keyboard navigation. It tells keyboard users which element is currently active and will respond to keyboard input. Without a visible focus state, keyboard users cannot determine where they are in the interface, making the product effectively unusable for anyone who cannot use a mouse.
Why are focus states frequently removed from interfaces?
Focus states are commonly suppressed by designers and developers who find the default browser focus ring visually disruptive within a polished design. The CSS declaration outline: none removes the browser's default focus indicator entirely. This is one of the most common and consequential accessibility mistakes in web development. The users affected are not just those who use keyboards exclusively: power users who prefer keyboard navigation, users with motor disabilities who cannot use a mouse, screen reader users, and anyone navigating a form without lifting their hands from the keyboard all depend on visible focus states.
How to design accessible focus states?
Rather than removing focus states, design custom focus indicators that are visually appropriate for the product while meeting color contrast requirements. WCAG 2.2 introduces a new Focus Appearance success criterion that specifies the minimum size and contrast of focus indicators. A focus indicator should have at least a 3:1 contrast ratio against the adjacent colors, should be at least 2 CSS pixels in perimeter, and should clearly distinguish the focused element from its unfocused state. Custom focus rings using a combination of outline and outline-offset allow designers to create focus states that are both visible and visually integrated with the product's design system.