Focus indicators: making keyboard focus visible

What WCAG asks of the focus indicator

The focus indicator is whatever shows which link, button or field the keyboard is on: usually a ring, sometimes an underline or a change of colour. WCAG's own definition is plainer still: the pixels that change to show a component is focused. Two Level AA criteria set the floor for it.

"A mode of operation" is there because browsers decide when to show the ring, and many show it only when you use the keyboard. That is allowed. What is not allowed is a ring that never appears, or one that flashes and fades: W3C's note on this criterion says the indicator must stay visible for as long as the item has focus.

2.4.7 says the ring must exist; it says nothing about how strong it is. That job falls to 1.4.11 Non-text Contrast, also Level AA, which asks for a contrast of at least 3:1 against adjacent colours for what identifies a control and its states. W3C's note on 1.4.11 says this covers the focus indicator: a ring drawn outside a button must stand out 3:1 against the background the button sits on. You can test any ring colour against its background with our contrast check; read its 1.4.11 row.

When something covers the focus

New in WCAG 2.2, this is the sticky-header rule. W3C names the usual culprits: sticky headers, sticky footers, non-modal dialogs and cookie banners. As a visitor tabs down a page the browser scrolls the focused link into view, often right under a fixed header that then sits on top of it. The AA version fails only when the item is entirely covered; its AAA twin, 2.4.12 Focus Not Obscured (Enhanced), allows no part of it to be hidden.

The fix W3C lists as sufficient is one CSS property. Scroll padding tells the browser to keep a strip clear when it scrolls something into view, so a focused item lands below the header instead of under it. This site uses it: the bar at the top is sticky on wider screens, and the page keeps 5.5rem clear beneath it.

html {
  scroll-padding-top: 5.5rem; /* at least the header's height */
}

Cookie banners are the other half. Either make the banner take focus until it is answered, or pad the bottom of the page the same way while it is open. Note that the rule is about where the item ends up on screen, not about the code: a banner that covers the "Send" button of your contact form fails even if the button is reachable.

Focus Appearance is Level AAA, not AA

Say it plainly, because many pages get it wrong: 2.4.13 Focus Appearance is a Level AAA criterion. A site that meets WCAG 2.2 Level AA does not have to meet it. It is still the best written description of a good ring, which is why it is worth knowing.

The confusion has a history. In W3C's September 2022 Candidate Recommendation of WCAG 2.2, focus appearance was criterion 2.4.11 at Level AA. By the final Recommendation of October 2023 it had moved to 2.4.13 at Level AAA, and the number 2.4.11 went to Focus Not Obscured (Minimum). Articles and checklists written from the drafts still say "2.4.11 Focus Appearance, AA". If a report or a vendor quotes that, it is reading a draft. Our summary of what changed in WCAG 2.2 lists the final numbers.

In plain words it asks two things. The ring must be at least as big as a solid 2px outline drawn round the control, and the pixels that change must change by 3:1, comparing the focused state with the unfocused one. W3C's guidance says the simplest way to pass is exactly that: a solid outline at least 2px thick, in a colour that contrasts 3:1 with what was there before. A ring drawn on the page background, as most are, changes those pixels from the background colour to the ring colour, so the 3:1 check is ring against background.

The common fails

• outline: none with nothing in its placefails 2.4.7

  A reset stylesheet or a theme removes the browser's ring to tidy up mouse clicks and draws no replacement. W3C's failure F78 uses this exact line as its first example.

• A ring too faint to seefails 1.4.11

  A 1px light grey or a pale brand tint on white. It exists, so 2.4.7 is arguably met, but it falls under 3:1 against the background.

• A ring that matches what is already therefails 2.4.7

  A dark outline on buttons that already have a dark border of the same weight, or a focus colour equal to the hover colour. F78 also names outlines that look the same as the focus outline.

• A sticky bar on top of the focusfails 2.4.11

  The header or a cookie banner covers the focused link completely as you tab past it (W3C failure F110).

• Focus removed by scriptfails 2.4.7

  A script calls blur() as soon as something gets focus, usually to stop rings after a click. The keyboard user can never land anywhere (F55).

On a small business site the first one is by far the most likely, and it is usually in the theme, not in anything the owner wrote. Our comparison of accessible Shopify themes checks the focus ring theme by theme for that reason.

CSS that works

:focus {
  outline: none;
}

Deleting that rule brings the browser's own ring back, which is better than nothing. Replacing it with your own ring is better still, and :focus-visible is the selector to use. The CSS specification lets the browser decide when focus should be shown: always after a keyboard press, always in a text field, usually not after a mouse click on a button. So a :focus-visible ring appears for keyboard users without appearing every time someone clicks.

:focus-visible {
  outline: 3px solid #EA580C; /* 3.56:1 on white */
  outline-offset: 3px;
}

Two details matter. Use outline, not box-shadow alone: W3C's technique C40 warns that browsers commonly drop box-shadow in forced-colour (high contrast) modes, so a shadow-only ring can vanish for exactly the people who switched those modes on. And use outline-offset to set the ring a few pixels away from the control, so it does not merge with a dark border.

:focus-visible {
  outline: 3px solid #171717;   /* dark band */
  outline-offset: 0;
  box-shadow: 0 0 0 6px #FFFFFF; /* light band outside it */
}

The idea behind the two-colour ring: if its two colours contrast at least 9:1 with each other, W3C notes that one of them will reach 3:1 against any solid background. Dark ink and white are about 17.9:1, well clear. The outline carries the ring in forced-colour modes; the white band is the extra.

Try it: four rings, good and bad

Check your own site

Put the mouse away and press Tab from the address bar. On every stop, ask whether you can see where you are at a glance, from a normal distance. Then tab down a long page with the cookie banner still open and watch for the moment the focus slips under something. Our focus order checklist walks you through it step by step and keeps a printable record, and the first stop on most good sites is a skip link, which needs a visible ring like everything else. Then tab through your contact or booking form: a field with no ring leaves the visitor typing blind, and our guide to accessible forms covers the labels and error messages around it. To see the ring at work beside the other habits of a well-built site, read accessible website examples.

Which version applies to you matters here. The DOJ's rule for state and local government sites names WCAG 2.1 Level AA, which already includes 2.4.7 and 1.4.11 but not the WCAG 2.2 additions. This site recommends WCAG 2.2 Level AA, which adds 2.4.11 and covers 2.1 and 2.0 as well. For your own obligations, ask a lawyer; for the ring, the CSS is the same either way.