2.4.7 Focus Visible

When a user navigates with the keyboard, there must be a visible indicator showing which element currently has focus. Without this, keyboard users are essentially navigating blind.

The focus indicator does not need to meet specific size or contrast requirements at Level AA (those are addressed at Level AAA by 2.4.13), but it must be visible. Completely removing the focus outline with outline: none and providing nothing in its place is a failure.

Never write outline: none or outline: 0 in CSS without providing a custom focus indicator as a replacement.

Custom focus styles should be clearly visible: a solid border, a contrasting outline, or a colour change that is obvious to sighted keyboard users.

Test by navigating your entire site with only the keyboard and checking that you can always see where focus is.

• outline: none applied globally in CSS with no custom focus styles
• Focus styles removed on individual components such as buttons, links, or form fields
• Focus indicators that are so subtle (a very thin or low-contrast outline) that they are effectively invisible