2.4.7 Focus Visible
Level AA · added in WCAG 2.0
When you move through a page with the keyboard, you must be able to see which element has focus. Links, buttons, form fields and custom widgets all need a visible focus indicator.
Who it helps
Keyboard users, including many people with motor disabilities, need to see where they are before they press Enter or Space. Screen magnifier users and people with attention or memory difficulties also rely on a clear focus position.
How to meet it
- Never remove the browser focus outline unless you replace it with a visible style of your own.
- Style :focus-visible with a solid outline and an outline-offset so it stands out from the element.
- Pick a focus color that contrasts with both the element and the background around it.
- Check custom widgets, such as menus and tabs, that move focus with JavaScript or use tabindex.
- Tab through every page yourself and confirm you can always see where focus is.
Examples
*:focus {
outline: none;
}.button {
background: #1a5fb4;
color: #fff;
}
.button:focus {
outline: 1px dotted #1d62b8;
}:focus-visible {
outline: 3px solid #1a5fb4;
outline-offset: 2px;
}.button {
background: #1a5fb4;
color: #fff;
}
.button:focus-visible {
outline: 3px solid #111;
box-shadow: 0 0 0 6px #fff;
}Can a scanner detect this?
No
axe-core has no rule for focus visibility, because a script cannot reliably judge whether a focus style is visible to a person. You need to tab through the page and look at each focused element.
No automated rule tests this criterion. Check it by hand.
Common mistakes
- Adding outline: none in a CSS reset or framework theme and never adding a replacement.
- Showing focus only as a subtle color shift that is hard to notice.
- Letting overflow: hidden on a parent clip the focus outline off the element.
- Testing only with a mouse, so missing focus styles go unnoticed.
Related criteria
Check your own page
See which automated WCAG checks your page fails, with the failing elements and how to fix them.
Reviewed November 2, 2026