Definition: A focus state is the visual styling applied to an interactive element — a link, button, form input, dropdown, or custom control — at the moment it receives keyboard focus. When a user navigates a page with the Tab key, the currently focused element displays its focus state — typically an outline, ring, or highlighting effect — to indicate where keyboard input will be directed. Focus states are the visual equivalent of a cursor: they show keyboard users where they are on the page.
Why It Matters: Focus states are a WCAG 2.1 Level AA requirement (Success Criterion 2.4.7: Focus Visible) and one of the most commonly overlooked accessibility needs in web design. Without a visible focus state, keyboard users — including users with motor impairments who cannot use a mouse, power users who prefer keyboard navigation, and screen reader users — have no visual indication of where they are on a page as they tab through it. The most common accessibility violation related to focus states is designers removing the browser’s default focus outline (typically a blue ring) with CSS rule outline: none without providing any replacement — leaving keyboard users effectively navigating blind. Good focus state design is both accessible and aesthetically intentional.
How It Works: Focus states are styled in CSS using the :focus and :focus-visible pseudo-classes. The :focus pseudo-class applies to any focus event (keyboard or mouse click); :focus-visible is the more precise modern approach that applies styling only when focus is achieved via keyboard, allowing mouse click focus to be styled differently or left unstyled. WCAG 2.2 introduced a new success criterion (2.4.11: Focus Appearance — Level AA) with specific minimum size and contrast requirements for focus indicators. Best practice design for focus states includes: using a clearly visible ring or outline with at least 3:1 contrast against the adjacent colour, ensuring the focus indicator is at least 2px in width, and maintaining consistency across all interactive elements. Popular implementations include a 3px outline in the brand’s primary colour offset by 2px from the element boundary.
Related: Keyboard Navigation, WCAG, Accessibility Audit, Colour Contrast, ARIA