WCAG 2.4.7 Focus Visible: what it means and how to fix it

Level AA · Operable · Updated

Short answer: Keyboard users must always be able to see which element has focus. Removing the focus outline with CSS without a replacement fails.

What it requires

Any keyboard-operable interface must have a mode where the keyboard focus indicator is visible.

Who it affects

Sighted keyboard users, including people with motor disabilities. Without a visible focus ring they cannot tell where they are on the page.

How it shows up in ADA website claims

Complaints describe being unable to see where focus was while tabbing through menus and checkout, often caused by themes that set outline: none globally.

How to check your site

Tab through the page. Can you always see which link, button or field is focused, including inside menus and pop-ups? Automated tools largely cannot test this.

How to fix it

/* Common culprit in themes */
*:focus { outline: none; }          /* remove this */

/* Passes: visible for keyboard users, hidden for mouse clicks */
:focus-visible {
  outline: 3px solid #2146C7;
  outline-offset: 2px;
}

Make sure the focus color contrasts with both the element and the background.

Frequently asked questions

Can I hide the outline for mouse users?

Yes. :focus-visible shows the ring for keyboard navigation and usually hides it after a mouse click, which is what most designers want.

Does the browser default outline pass?

Usually yes, if nothing removes it. The problem is almost always CSS that removes it.

What is new in WCAG 2.2 here?

2.4.11 Focus Not Obscured (AA) adds that the focused element must not be completely hidden by sticky headers, cookie banners or chat widgets.

Other commonly cited criteria

Read the official WCAG 2.1 specification at W3C.

Proof of Access provides technical accessibility assessments. We are not a law firm and nothing on this page is legal advice. If you have received a demand letter or a lawsuit, talk to an attorney.