A focus indicator is the visual marker that shows a keyboard user which element is currently active; browsers provide it by default as a focus outline. WCAG success criterion 2.4.7 Focus Visible (Level AA) requires the keyboard focus to be visible. Removing the indicator entirely with outline: none in CSS is a common accessibility mistake.
A mouse user always sees where the cursor is; the only reference a keyboard user has is the focus indicator. If it is not visible which link, button or form field is active while tabbing through, the page becomes effectively unusable. This affects people who cannot use a mouse due to motor impairments, screen magnifier users and power users who prefer the keyboard alike. WCAG success criterion 2.4.7 Focus Visible (Level AA) exists precisely for this reason: any keyboard-operable interface must have a visible focus. The most common mistake is finding the default outline unattractive, removing it with outline: none and putting nothing in its place.
The right approach is not to delete the indicator but to fit it to the design: define a focus style aligned with your brand colors, clearly separated from the background and thick enough to notice, and use outline-offset to lift it slightly off the element. The :focus-visible selector in CSS makes this easier by showing the indicator only to keyboard users, not on mouse clicks. WCAG 2.2 added further criteria about the appearance of focus and about focus not being obscured by other elements, increasing the weight of this topic. Testing needs no tools: put the mouse aside and move through the page with Tab only, checking that you can always see where you are and that sticky headers or fixed banners never cover the focused element.
Frequently asked questions
Why is using outline: none a problem?
Because it removes the keyboard user's only wayfinding tool on the page: once the focus outline is deleted, a person navigating with Tab cannot see where they are and the page becomes effectively unusable. This leads to a violation of WCAG 2.4.7 Focus Visible. If the default outline does not fit your design, the fix is replacement, not removal: define a high-contrast custom focus style matching your brand and show it only during keyboard use via :focus-visible.
How do you customize the focus indicator?
In CSS, define thickness, style and color through the outline property on the :focus-visible selector; separating the outline from the element by a pixel or two with outline-offset improves visibility. The color must stand out clearly on both light and dark backgrounds; a thin or pale line may look elegant but disappears on screen. Test the change by navigating with Tab alone across every interactive element: buttons, links, form fields and custom components must all be covered.
This content is for information only and is not legal advice.