Focus outline removed in CSS

Why it matters

Keyboard users follow the focus outline to know where they are on the page, the way mouse users follow the pointer. Themes and plugins sometimes remove it with "outline: none" because it looks untidy on click, and give nothing in its place — leaving keyboard users lost.

Who it affects: Keyboard, screen reader and low-vision users — every visitor meets the page title, language, landmarks, keyboard focus, target sizes and zoom settings on every page.

What Lumtera flags

Checked in review mode's Whole page tab, by reading the page's stylesheets: :focus rules that remove the outline (outline: none, outline-style: none or a zero outline width) without an obvious replacement such as a box-shadow, border, background, underline or color change, and that apply to something on this page keyboard users can reach. Up to five rules are listed with the stylesheet they come from. Stylesheets loaded from another domain cannot be read.

How to fix it in WordPress

Press Tab through the page and check you can always see which item has focus. If not, remove "outline: none" from these rules, or replace it with a clear style on :focus-visible (for example outline: 2px solid; outline-offset: 2px).

Example

.main-navigation a:focus { outline: none; }

.main-navigation a:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

How to check your fix

1. Reload the page in review mode and run the Whole page tab again. The finding disappears once the rendered page passes.
2. Load the page and press Tab: a "Skip to content" link should appear first, and you should always see where focus is, even under a sticky header. Pinch-zoom on a phone, and check the browser tab shows a meaningful title.