2.4.7: Focus Visible

What it means

Any keyboard-operable element must show a visible focus indicator. Users need to see which link, button, or field is active as they tab through the page.

Removing focus outlines without replacing them is a common accessibility failure.

How to fix it

• Style :focus and :focus-visible with a clear ring or border change.
• Ensure focus styles meet non-text contrast (3:1) against adjacent colours.
• Do not set outline: none without providing an alternative indicator.
• Check focus visibility on custom buttons and component libraries.

Quick examples

• Good: Links show a thick outline when tabbed to, visible on light and dark backgrounds.
• Bad: Global CSS removes all focus rings and adds no replacement.
• Good: Custom checkbox components mirror browser focus styling.
• Bad: Focus moves but nothing on screen changes during keyboard navigation.