Trying to navigate a website without a mouse shouldn’t feel like a game of hide-and-seek. Focus indicators make sure that doesn’t happen. Without them, keyboard users are left guessing where they are on the page. Try pressing Tab on a site with no focus styles, and you’ll see how frustrating it can be.
In this tutorial, you’ll learn what WCAG 2.2 says about focus indicators, how to identify issues on your site, how to properly implement them, and common components that often need special attention.
Jump Into The Good Stuff
What WCAG Says About Focus Indicators
Let’s start with what the Web Content Accessibility Guidelines (WCAG) 2.2 require:
When Should A Focus Focus indicator be used?
“Any keyboard-operable user interface has a mode of operation where the keyboard focus indicator is visible.”
This means that when users navigate via keyboard (using the Tab key, for example), the element currently in focus must have a visible indicator like an outline, border, or background change.
Reference: SC 2.4.7 Focus Visible (Level AA)
How Should A Focus Indicator Look?
New in WCAG 2.2, this requirement gets more specific. Your focus indicator should:
- It must have a contrast ratio of at least 3:1 against adjacent colors
- It must have a minimum area that is at least as large as a 2px border around the entire element (entire element is Level AAA specific)
Although the guidance was for Level AAA compliance, it is the only guidance given to us. It seems reasonable to use the width and contrast requirements as a best practice.
Reference: SC 2.4.13 Focus Appearance (Level AAA)
What If My Focus Ring Is Hidden Or Partially Hidden?
Make sure the focus indicator is actually visible—meaning it is not:
- Hidden behind a sticky header
- Off-screen
- Tucked under another element
If a user can’t see the focused item because something’s blocking it, that’s a problem. For Level AA, there is some wiggle room on how much can be shown, but for Level AAA the entire element and it’s focus indicator must be visible.
Reference: SC 2.4.11 Focus Not Obscured (Minimum) (Level AA)
Reference: SC 2.4.12 Focus Not Obscured (Enhanced) (Level AAA)
How to Identify Missing or Poor Focus Styles
Here are a few simple ways to audit your site:
1. Use Your Keyboard
- Press the Tab key and cycle through links, buttons, inputs, and other interactive elements.
- You should see a visible change around each focused item—like a box outline, background color, or border effect.
2. Use the WAVE Tool or axe DevTools
- These tools will notify you of missing focus indicators or elements that cannot receive keyboard focus at all.
3. Check Contrast and Visibility
- Even if a focus style exists, it may not meet WCAG 2.2’s visibility thresholds.
- Tools like the Contrast Grid or WebAIM Contrast Checker can help test contrast.
How to Add Custom Focus Styles with CSS
Most browsers provide their own default focus styles (often a blue outline), however this can break accessibility since you can’t rely on them to always meet WCAG 2.2’s contrast and visibility requirements. Instead, we recommend replacing the default style with a custom one that ensures strong visibility and compliance.
W3’s Example Focus Ring
This is a blessed approach by W3, although there might be examples where it doesn’t work. Like if there is a while button with a black background. At that point, there would not be a minimum contrast of 3:1 to the 2px outline added around the button.
*:focus {
/* inner indicator */
outline: 2px #F9F9F9 solid;
outline-offset: 0;
/* outer indicator */
box-shadow: 0 0 0 4px #193146;
}
Reference: Creating a two-color focus indicator to ensure sufficient contrast with all components
And an inverse example of that for something like a button that might be white inside of a container with a dark background.
inverse-focus:focus {
/* inner indicator */
outline: 2px #193146 solid;
outline-offset: 0;
/* outer indicator */
box-shadow: 0 0 0 4px #F9F9F9;
}
Best Catch All Focus Ring
If you want a belt and suspenders type of protection, you really make sure its visible
*:focus {
/* inner indicator */
outline: 2px #F9F9F9 solid;
/* outer indicator */
box-shadow: 0 0 0 6px #193146;
/* outer indicator */
outline-offset: 2px;
}
Inset Focus Ring
There may be situations your focusable element’s indicator wont be visible like if it’s in a container with overflow: hidden. You may consider moving the focus indicator to be inside of the element.
.inset-focus:focus {
outline: 2px #F9F9F9 solid;
box-shadow: inset 0 0 0 6px #193146;
outline-offset: -4px;
border: none;
/* if there is a border that you want to keep,
you will need to modify this */
}
Common Interactive Elements That Need Focus Styles
Focus styles should be added to any element that users can interact with. That includes:
- Buttons – especially those with custom styles
- Links – even when styled to look like buttons
- Form Elements – inputs, checkboxes, radio buttons
- Navigation Menus – particularly dropdowns and mobile navs
- Tabs and Carousels – often created with JavaScript and lacking defaults
- Custom Widgets – sliders, modals, or anything built from divs
If you can tab to it, it needs a visible focus indicator. If you can interact with it with a mouse, it needs to be focusable first and then it needs a visible focus indicator.
Final Thoughts
Focus indicators are an essential part of accessibility. They allow people to navigate your site with confidence and ease, especially those who rely on keyboards or assistive technology.
Before you move on, take a moment and try navigating your site using only your keyboard. You might be surprised how easy—or difficult—it is without visible focus cues.