Focusing an element changes the page

Why does it matter?

Keyboard users reach a link or field before they decide to use it. If merely landing on it opens a new window, loads another page or pops up a dialog, they are thrown somewhere they did not choose, and screen reader users may not realize the page changed at all.

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 (review mode's Keyboard tab, "Check keyboard access"). Focusing an element that tries to open a new window is an error; Lumtera records it and never opens the window. Focusing one that changes the page address, opens a modal dialog, or reloads the page is for review. If the page reloads mid-check, the Keyboard tab says which element did it and offers "Continue the check". Up to ten per page.

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

How do I fix it in WordPress?

Change the page only when someone activates a control (a click, Enter or Space), never when it merely receives focus. Look for focus or focusin handlers in the theme or plugin scripts, often in pop-up, menu or tracking plugins, and check their settings or ask their author.

Example

<a href="/shop" onfocus="location.href = this.href">Shop</a>

<a href="/shop">Shop</a>

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.