In this WCAG Fix It guide, we’re looking at a critical usability requirement: making sure users can clearly see which element currently has keyboard focus.
When navigating with a keyboard, users move through interactive elements using the Tab key.
But if the focused element isn’t visually highlighted, users quickly lose track of where they are on the page. When users lose track of focus, navigation becomes confusing and frustrating.
What Is WCAG 2.4.7?
WCAG 2.4.7 – Focus Visible requires that any keyboard-operable user interface has a visible focus indicator.
This means when a user tabs to a link, button, or form field, there must be a clear visual indicator showing which element is currently active. This indicator allows keyboard users to understand where they are as they move through the page.
What Is Keyboard Focus?
Keyboard focus refers to the element currently selected while navigating using the keyboard. When users press Tab, the focus moves from one interactive element to the next.
Common elements that receive focus include:
- Links
- Buttons
- Form inputs
- Checkboxes
- Radio buttons
- Dropdown menus
- Interactive components
The focused element must be clearly visible.
The Human Impact of Invisible Focus
Imagine navigating a website without using a mouse. You press the tab key on your laptop, but nothing changes visually, so you press Tab again, but still nothing. All of a sudden, you are at the bottom of the page, navigating to somewhere you dont want to be.
When nothing changes, visibility on tab you don’t know:
- Which link you’re on
- Which button is active
- Which form field you’re about to type into
Now imagine trying to complete a checkout or form submission like this. Without visible focus indicators, keyboard navigation becomes guesswork. This leads to errors, frustration, and abandonment.
Common WCAG 2.4.7 Failures
Here’s what we typically see when scanning websites:
- CSS removing the browser’s default focus outline
- Focus styles that are too faint to see
- Focus indicators hidden behind other elements
- Buttons that show hover states but no focus states
- Custom components without visible focus styling
All of these can fail WCAG 2.4.7.
How to Fix Missing Focus Indicators
Here are a few different methods you can use to fix missing focus indicators:
Do Not Remove the Default Focus Outline
One of the most common mistakes is removing the browser’s default focus outline.
Bad example:
:focus {
outline: none;
}
This removes the only visible focus indicator.
If you remove the default outline, you must replace it with a stronger visible style.
Add a Clear Focus Style
Example:
:focus {
outline: 3px solid #005fcc;
outline-offset: 2px;
}
This creates a clear border around the focused element.
The focus indicator should be:
- Clearly visible
- High contrast
- Consistent across the site
Style Focus for Interactive Elements
Make sure focus styles apply to:
- Links
- Buttons
- Form fields
- Navigation items
- Custom components
For example:
button:focus,
a:focus,
input:focus {
outline: 3px solid #005fcc;
}
This ensures users can always see where focus is located.
If You’re Using a CMS or Website Builder
Focus issues often appear when:
- Themes remove default outlines
- Designers override browser styles
- Custom UI components are added
To fix:
- Check your theme’s CSS for outline: none
- Add custom focus styles
- Test interactive components
- Retest after design updates
Focus styling should be considered part of your design system.
How to Test WCAG 2.4.7
The easiest test:
Put your mouse away.
Use only the keyboard.
Press Tab repeatedly and watch the focus indicator move across the page.
Ask:
- Can I clearly see where focus is?
- Does focus move logically through the page?
- Are buttons and links clearly highlighted?
If you ever lose track of focus, the page fails. After updates, re-run your accessibility scan and confirm the issue is resolved.
Why WCAG 2.4.7 Matters Beyond Compliance
Visible focus indicators:
- Improve keyboard usability
- Support screen reader users
- Help users with motor impairments
- Improve navigation clarity
- Reduce user frustration
- Reduce legal risk
Focus visibility is not just a technical requirement. It supports basic usability of a website with clear visual feedback, making navigation predictable and accessible.
WCAG 2.4.7 Quick Fix Checklist
WCAG 2.4.7 compliance doesn’t have to be difficult. Use this checklist to get started:
- Keyboard focus indicators are clearly visible
- Default browser outlines are not removed without replacement
- Focus styles are high contrast
- Focus indicators appear on links, buttons, and form inputs
- Custom components include visible focus styling
- Keyboard navigation tested across the site
- Issues re-tested after updates
WCAG 2.4.7 Focus Visible FAQs
Looking for a quick recap? Here are answers to some of the most frequently asked questions on this topic:
WCAG 2.4.7 requires that keyboard users can clearly see which element currently has focus when navigating a webpage.
It allows keyboard users to understand where they are on the page while navigating using the Tab key.
Only if you replace it with a clearly visible alternative focus style.
Focus indicators primarily support keyboard users, but they can also improve usability for anyone navigating interactive elements.