A customer emails to say they cannot use your site. They do not use a mouse, and when they press Tab, they cannot tell which part of the page they are on. You try it yourself and see the same thing: the page scrolls, something somewhere is selected, but nothing on screen shows what.
That is a missing focus indicator, and it is one of the first things worth checking on any WordPress site. This post explains what WCAG asks for, why so many themes break it, how sticky headers and banners make it worse, and what a good WCAG focus indicator looks like. If you want a step-by-step way to test a whole site by keyboard, our keyboard navigation testing guide covers the method; here we stay with the outline itself.
What focus is, and who relies on it
When you press Tab on a web page, the browser moves “focus” to the next link, button or form field. Whatever has focus is what Enter or Space will activate. The focus indicator is the visual mark that shows which item that is, usually an outline or ring around it.
People who rely on it include keyboard users with motor disabilities, people using switch devices, many screen magnifier users, people with tremors who find a mouse hard to control, and power users who simply prefer the keyboard. Screen reader users who are blind do not need to see the outline, but sighted people helping them, and partially sighted screen reader users, do.
Without a visible indicator, a keyboard user is guessing. They press Enter and something happens, but they did not know what they were about to click.
WCAG focus indicator requirements
Two Level AA success criteria apply directly.
2.4.7 Focus Visible
Any part of the page that can be operated by keyboard must have a mode where the focus indicator is visible. In plain terms: when you tab to something, you can see that it is the thing you tabbed to. This has been part of WCAG since 2.0, so it is not new, yet plenty of sites still fail it.
2.4.11: focus must not be covered up
Added in WCAG 2.2, this says that when an item receives keyboard focus, it must not be entirely hidden by other content the site itself put there. An outline that exists but sits underneath a sticky header fails the user just as badly as no outline at all. Partial covering is allowed at this level, though it is still worth avoiding.
Contrast matters too
A faint indicator that blends into the background is technically present but practically useless. Under 1.4.11 Non-text Contrast, the visual cues people need to identify a control’s state, which includes a focus indicator, should reach 3:1 against the adjacent colors. A pale blue glow on a white page or a thin dark ring on a dark button does not get there. Our post on WCAG contrast ratios explains how to measure it.
WCAG 2.2 also has a Level AAA criterion on focus appearance that sets a minimum size and contrast for the indicator. It is not part of an AA target, but it makes a sensible design rule because it removes any argument about whether an outline is visible enough.
Why so many themes remove the outline
Browsers draw a default focus ring. Some designers dislike how it looks when someone clicks a button with the mouse, so they add a single line of CSS that removes the outline everywhere. Many older themes, page builder kits and starter templates shipped with exactly that line, and it gets copied from project to project.
The usual offenders on WordPress sites:
- A global reset in the theme stylesheet that sets the outline to none on links, buttons or all elements.
- Button styles in a page builder or a theme’s custom CSS box that remove the outline for a cleaner look.
- Form plugins that restyle inputs and drop the focus state with it.
- Custom menus built with scripts where the clickable item is not a real link, so it never takes focus at all.
- Sliders and tab widgets where the visible control is a decorative element and focus lands on something invisible.
A modern CSS selector answers the designer’s complaint as well. The :focus-visible selector lets browsers show the indicator when someone is using a keyboard and usually hide it after a mouse click. You get a clean look for mouse users and a clear ring for keyboard users, with no trade-off.
Sticky headers, cookie bars and chat buttons
Even with a good outline, items can vanish underneath other things on the page. On business sites, three culprits cover most cases:
- Sticky headers. As you tab down a long page, the browser scrolls to keep the focused item in view, but it does not know a fixed header is covering the top of the screen. The focused link ends up hidden underneath.
- Cookie and consent bars. A bar pinned to the bottom of the screen, still waiting for a choice, can cover links at the bottom of the viewport. Our post on accessible cookie banners covers the rest of what these bars get wrong.
- Floating chat and WhatsApp buttons. A large round button in the corner hides whatever focusable item scrolls under it. See chat widget accessibility for how to choose and configure these.
The fixes are usually small. For sticky headers, CSS scroll padding equal to the header height tells the browser to stop the focused item below the header. For bottom bars, the same idea works at the bottom, or the bar can be made non-sticky once a choice is made. Some sites also shrink or unstick the header while the user is tabbing. Whatever the approach, test it by tabbing through a long page from top to bottom and back up with Shift+Tab.
What a good focus style looks like
There is no single required design for a WCAG focus indicator, but good focus styles share a few traits:
- Thick enough to notice. A two or three pixel solid outline is far easier to spot than a one pixel dotted line.
- Contrasting with both the item and the background. A two-color ring, such as a dark outline with a thin white gap or a light inner line, stays visible on light and dark sections alike. This matters on sites that alternate white and brand-colored bands.
- Offset from the item. A small gap between the element and its outline keeps the ring visible on buttons whose background color would otherwise swallow it.
- Consistent across the site. The same style on links, buttons, form fields and menu items, so people learn what it looks like once.
- Not color-only. Changing a link from blue to purple on focus is easy to miss. Add an outline or underline.
- Not clipped. Containers with hidden overflow, common in sliders and cards, can cut the outline off. Check that the full ring shows.
On WordPress, the best place for this is the child theme stylesheet or the theme’s global styles, not individual pages. One well-written rule for :focus-visible on interactive elements covers most of a site, and it survives content changes. Theme updates can overwrite edits made directly to a parent theme, so keep it in a child theme or a site-specific CSS area that updates leave alone.
Checking your own site in five minutes
You do not need tools for a first look. Open your home page, click once in the address bar, then press Tab repeatedly. Watch for:
- Any point where you cannot see which item has focus.
- An outline you can see on white sections but not on colored ones.
- Focus disappearing behind the header as the page scrolls.
- Focus going somewhere invisible, such as an offscreen menu, before coming back.
- Buttons or links in the footer hidden under a cookie bar or chat button.
Repeat on a product or service page, a blog post and your contact page, since each template can behave differently. Write down the page and the item each time. That list is what a developer needs.
Focus visibility sits alongside the other criteria in the WCAG 2.2 AA set, and fixing it is usually part of broader theme work. Our WordPress accessibility services page explains what that covers, and the main hub for ADA website accessibility help walks through the whole process.
Frequently asked questions
Is it a WCAG failure to remove the focus outline?
Removing the browser’s default outline is only a failure if nothing replaces it. If you provide your own visible focus style, that meets the focus visible criterion. The problem is removing the outline and adding nothing, which leaves keyboard users unable to see where they are.
Will a visible focus outline make my design look worse?
Usually not, if it is designed on purpose. Using the focus-visible selector means mouse users rarely see it, while keyboard users get a clear ring. A focus style in your brand’s darker shade, with a small offset, tends to look deliberate rather than accidental.
Does focus need to be visible on mobile?
The requirement applies to anything operable by keyboard, and people do connect keyboards to phones and tablets, or use switch access and screen readers on them. Responsive styles that hide the outline on small screens can cause failures, so test focus styles at mobile widths too.
Can an accessibility widget add focus outlines for me?
Some overlay toolbars offer a button that highlights focus, but visitors have to find and turn it on first, and it does not fix hidden focus under sticky headers or focus landing on invisible elements. Fixing the theme’s CSS is simpler and works for everyone by default.
Focus problems are usually quick to fix once someone has found every place they occur. If you want each template tested by keyboard and the findings written up with the criterion and the fix, our WCAG audit is built to do that.
Next in this series: WCAG Target Size: The 24 by 24 Pixel Rule in Plain Words
