Keyboard focus goes somewhere invisible

Why does it matter?

A closed off-canvas menu or a hidden slide that stays in the tab order swallows keyboard focus. A keyboard user presses Tab and the focus seems to vanish, sometimes for dozens of presses, with no idea where they are on the page.

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 does Lumtera flag?

Found by the keyboard walk: in review mode's Keyboard tab, "Check keyboard access" moves focus to every stop the Tab key reaches (up to 300) and measures each one after it takes focus. A stop that has no size on screen, is clipped out of sight, stays off the screen or is fully transparent is an error. Custom checkboxes and switches that draw their focus ring on a label, a neighbouring element, a parent or an inner element count as visible, and elements are scrolled into view as the Tab key would. Stops that look the same are grouped with a count. A skip link that appears when focused passes, because it is measured after it takes focus.

Check ID page-focus-ghost, as shown in review mode and saved results.

How do I fix it in WordPress?

Take hidden content out of the tab order while it is hidden. Use display: none or visibility: hidden (or the inert attribute) on closed menus, drawers and slides, and show them again when they open. Moving a menu off the screen with a transform or a negative left position leaves its links reachable with Tab. If a theme or slider plugin causes it, check its settings or ask its author.

Example

.offcanvas-menu { transform: translateX(-100%); } /* closed, but its links still take focus */

.offcanvas-menu:not(.is-open) { visibility: hidden; }

How do I check the fix?

1. Reload the page in review mode and run the Keyboard tab again (or Test menus and pop-ups for menus, dialogs and tabs). The finding disappears once the 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.