Focus Indicator
Definition
Browsers draw a focus ring by default, and the default is usually good enough. The relevant rule is success criterion 2.4.7 Focus Visible, at Level AA since WCAG 2.0: any keyboard-operable interface has a mode of operation where the focus indicator is visible. WCAG 2.2 sharpened the picture with two more criteria. 2.4.11 Focus Not Obscured (Minimum), at AA, says the focused element must not be entirely hidden by other content, which is aimed squarely at sticky headers, floating chat bubbles and cookie banners. 2.4.13 Focus Appearance, at AAA, puts numbers on it: an indicator at least as large as a 2 CSS pixel thick perimeter around the control, with a contrast ratio of at least 3:1 between its focused and unfocused states.
Why It Matters
Without an indicator, a keyboard user is pressing Tab blind. They can still move, but they cannot tell where they are, so every action is a guess and a wrong guess may submit a form or delete a row. The usual cause is a single line of CSS copied in to tidy up a button's appearance on click — one line that breaks the page for everyone who does not use a mouse, and that goes unnoticed in design review because a designer clicks. There is a middle path that costs nothing: keep the ring, but show it only for keyboard interaction. Note too that a faint ring can fail even when it exists — 1.4.11 Non-text Contrast asks for 3:1 against adjacent colours, so a light grey outline on white does not count.
How It Works
Two CSS pseudo-classes do the work. The :focus selector matches whenever an element has focus, including after a mouse click; :focus-visible matches only when the browser judges that an indicator should be shown, which in practice means keyboard and similar input. Styling :focus-visible therefore gives clean buttons under the mouse and a clear ring under the keyboard, with no scripting. Build the indicator from outline rather than border, because outline does not affect layout, and use outline-offset to lift it clear of the control's own edge. A two pixel outline in a colour that contrasts with both the control and the page behind it satisfies the AA requirements and most of the AAA one. If you also use a sticky header, add scroll-margin-top so a focused element is not parked underneath it.
Real-World Example
A studio publishes a dark-themed landing page at launch.99helpers.site with a navy background of #0B1B3A. The buttons carry a one pixel focus outline in #1E3A8A, which is close enough to the background that the ring is invisible, and the header stays fixed at the top so the first two links receive focus underneath it. Changing the outline to a two pixel #F5F5F5 with an offset of two pixels puts it well over the 3:1 non-text contrast requirement, and adding scroll-margin-top of 96 pixels keeps focused links clear of the header. The revised file is uploaded to 99helpers and live at the same address in seconds.
Common Mistakes
- ✕Setting outline to none and adding nothing in its place — the page still works with a mouse and becomes unnavigable with a keyboard
- ✕Indicating focus with a colour change alone — a shift in background tint of a fraction of a ratio point is not a visible indicator, and it is invisible to anyone with a colour vision deficiency
- ✕Using :focus instead of :focus-visible and then removing the ring because it looked wrong on click — the narrower selector solves the appearance problem without breaking keyboard use
- ✕Letting a sticky header cover the focused element — that is a straight failure of 2.4.11 Focus Not Obscured (Minimum) in WCAG 2.2
Related Terms
Keyboard Navigation
Keyboard navigation is operating a page without a mouse: Tab and Shift+Tab to move between controls, Enter and Space to activate them, arrow keys inside composite widgets such as menus and radio groups.
Tab Order
Tab order is the sequence in which pressing Tab moves focus through a page's interactive elements. By default it follows the order those elements appear in the HTML source.
Contrast Ratio
A contrast ratio is a single number between 1:1 and 21:1 describing how far apart two colours are in relative luminance. It is what a contrast checker reports, and it is calculated rather than estimated.
Colour Contrast
Colour contrast is the difference in luminance between text and the surface behind it. WCAG asks for at least 4.5:1 for normal text and 3:1 for large text at Level AA.
Landing Page
A page built for one purpose, which people reach directly from an ad, an email or a shared link. It is judged by the share of visitors who do the one thing it asks.
Put a file online in seconds
Drop in a document, an image, a page or a whole static website and share the link — free, with no build step and no server to set up.
Host a file free →