Visible focus: why removing outlines hurts, and what WCAG 2.2 asks

The focus indicator is the outline or highlight that shows which link, button or field the keyboard is on. WCAG 2.2 requires it to be visible (2.4.7 Focus Visible, level AA) and requires that the focused item is not completely hidden by things like sticky headers or cookie banners (2.4.11 Focus Not Obscured (Minimum), level AA).¹⁰ Removing the browser's outline with outline: none, and putting nothing in its place, leaves keyboard users unable to see where they are. W3C lists it as a failure.¹

Who relies on it

Anyone who moves through a page without a mouse: people with motor disabilities who use a keyboard or switch device, people with low vision who use a keyboard because a pointer is hard to follow, and plenty of power users. W3C adds people with attention, short-term memory or executive function limitations, who benefit from being able to find focus without effort.¹ Without a visible indicator, pressing Tab is like typing with your eyes closed: something is selected, but you cannot tell what, so you cannot tell what Enter will do.

Why outlines get removed

The usual story: a designer or customer sees a ring around a button after clicking it, thinks it looks like a bug, and a developer adds *:focus { outline: none; } to the stylesheet. The ring disappears for mouse users, and for everyone else too. WebAIM's advice is direct: do not hide the focus indicator with outline: 0 or outline: none; style it if you want, as long as it stays highly visible.⁶

The modern fix for the original complaint is :focus-visible. MDN explains that browsers apply it only when they judge focus should be shown: always for keyboard navigation, but generally not when a button is clicked with a mouse or finger. It has been widely available across major browsers since March 2022.⁵ W3C lists using :focus-visible as a sufficient technique for 2.4.7.¹

What the criteria ask

Sources for the table: the WCAG 2.2 text and W3C's Understanding documents.¹⁰⁴³

2.4.7 Focus Visible

W3C explains that browsers may choose to show focus only when a keyboard is used, which is why the criterion talks about "a mode of operation": it is met if focus is visible when someone uses the keyboard. The indicator must not disappear after a time limit.¹ Failure F78, styling outlines or borders so the focus indicator is removed or made invisible, is listed against 2.4.7, 1.4.11 and 2.4.13.¹

Contrast of the indicator

Focus indicators count as non-text content, so a custom one falls under 1.4.11 too.¹ W3C's own example of a failure is an author-styled focus outline in #AAA on white, at 2.3:1.⁴ Browser default indicators that you have not changed are exempt from 1.4.11, but focus must still be visible.⁴

2.4.11 Focus Not Obscured (Minimum)

New in WCAG 2.2. As someone tabs down the page, the item with focus must not be entirely hidden behind something you put on the page. W3C names sticky headers and footers, cookie banners and non-modal dialogs as the usual causes, and lists CSS scroll-padding as a fix. Partly covered passes at AA; entirely covered fails.² The criterion is about the focused element; if the indicator itself cannot be seen, that is a 2.4.7 problem.² Content the customer opened themselves, such as a chat window, is allowed to cover focus if they can reveal it again without moving focus back, for example by pressing Escape.²

2.4.13 Focus Appearance

Level AAA, so not usually required, but it is the clearest guide to a good indicator. The indicator should cover an area at least as large as a 2 CSS pixel thick perimeter around the element, with a 3:1 contrast change between focused and unfocused states. W3C says the simplest way to pass is a solid outline at least 2 CSS pixels thick around the element; an outline drawn inside the element needs to be thicker.³

A focus style that works

A practical starting point for most stores:

:focus-visible {
  outline: 2px solid #005fcc;
  outline-offset: 2px;
}

• Solid and at least 2px thick, outside the element, which is the simple way to meet the AAA appearance guidance.³
• Contrast checked. #005FCC on white works out at about 6:1 with the WCAG formula, well above 3:1. Check it against every background it will sit on, including dark sections and coloured buttons.⁴
• Two colours for mixed backgrounds. If the same indicator has to work on light and dark sections, W3C's techniques include a two-colour indicator, such as an outline with a contrasting inner ring.¹
• Keep it in sync with the design system. Put it in the theme's main stylesheet so components inherit it, and check custom components that set their own outline.

Add scroll-padding-top on the html element equal to your sticky header's height, so focused items scroll clear of it.²

Platform notes

• Shopify: Theme Store themes must give focusable elements a visible focus state.⁷ Shopify's merchant guidance warns that if you edit your theme's stylesheet, you should keep keyboard focus styles.⁸ Custom code and apps are where they usually go missing.
• WordPress: check any "Additional CSS" or child theme stylesheet for outline: none or outline: 0, and check page-builder buttons, which often set their own focus styles.

How to check your site

1. Tab through the page from the address bar. At every stop, can you see clearly where you are without hunting? Our ten-minute keyboard test walks through it.
2. Watch the sticky header and banners as you tab down. Does focus ever vanish behind them?
3. Search the CSS for outline: none, outline: 0 and :focus rules that remove the outline without adding anything.
4. Check contrast of the indicator against each background; see colour contrast explained.

This is mainly a manual test. axe-core's published rule list, for example, has no rule for 2.4.7 Focus Visible.⁹ Jralo's free check covers what can be measured automatically against WCAG 2.2 A and AA and suggests which countries' accessibility laws are likely relevant to your site; automated testing finds many problems, not all, and focus visibility is one to check yourself.