WCAG 2.4.7: Focus Visible
Any keyboard-operable user interface must have a visible focus indicator. Users navigating with a keyboard need to see which element currently has focus. Removing the default outline without providing an alternative is a common and serious failure.
What is WCAG 2.4.7 Focus Visible?
WCAG 2.4.7 Focus Visible is a Level AA web accessibility success criterion under the Operable principle. Any keyboard-operable user interface must have a visible focus indicator. Users navigating with a keyboard need to see which element currently has focus. Removing the default outline without providing an alternative is a common and serious failure. Common failures include using outline: none or outline: 0 without providing an alternative focus style and focus indicators with insufficient contrast against the background. Meeting this criterion is essential for accessible, inclusive web design.
How to Test
- ✓ Tab through the page and verify every focusable element has a visible focus indicator
- ✓ Check that the focus indicator has sufficient contrast (at least 3:1)
- ✓ Verify custom focus styles are visible on all backgrounds
- ✓ Check that focus indicators are not only visible on :focus-visible (keyboard) but also on :focus when needed
- ✓ Test in multiple browsers — focus styles may differ
Common Failures
- ✗ Using outline: none or outline: 0 without providing an alternative focus style
- ✗ Focus indicators with insufficient contrast against the background
- ✗ Focus indicators that are only visible on certain background colors
- ✗ Custom components that do not show any focus indicator
- ✗ Overriding browser default focus styles without replacement
✓ Good Example
/* Good: Custom focus style with strong visibility */
:focus-visible {
outline: 2px solid #2563eb;
outline-offset: 2px;
}
/* Good: Enhanced focus for dark backgrounds */
.dark :focus-visible {
outline: 2px solid #60a5fa;
outline-offset: 2px;
box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.3);
} The focus indicator uses a visible 2px outline with offset for clear visibility. The dark theme variant uses a lighter blue with an additional box-shadow glow for enhanced visibility.
✗ Bad Example
/* Bad: Removes focus outline entirely */
*:focus {
outline: none;
}
/* Bad: Focus style with no visible change */
button:focus {
outline: none;
border-color: #e5e7eb; /* too subtle */
} The first rule removes all focus indicators globally. The second replaces the outline with a border color change that has insufficient contrast and is nearly invisible.
Test Your Site for 2.4.7 Compliance
Use our free accessibility tools to check your website against WCAG 2.4.7.
Open Testing Tool