Skip to main content

Whole page

Tab order jumps back up the page

WCAG 2.2 success criterion 2.4.3 Focus Order (Level A)

WCAG 2.2
2.4.3 Focus Order
Also maps to
1.3.2 Meaningful Sequence
Level
A
Default severity
Needs review
Available in
Free

Updated for Lumtera 1.2.2 and Lumtera Pro 1.1.1.

Why does it matter?

Keyboard and screen reader users move through a page in the order of its HTML. When a positive tabindex or CSS positioning makes focus leap from the footer back up to the header, they lose their place and may skip content they wanted, or go through the same links twice.

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"): two stops in a row, in the same column, where focus jumps back up the page by more than one screen height. Fixed and sticky elements are left out. Up to five jumps per page, each for review, since a jump can be intended.

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

How do I fix it in WordPress?

Make the order in the HTML match the order on screen. Remove positive tabindex values (tabindex="1" and higher), and move blocks in the editor rather than reordering them with CSS order or absolute positioning. Then press Tab through the page to check the order makes sense.

Example

Flagged on the rendered page
<a href="/cart" tabindex="1">Cart</a>
Fixed
<a href="/cart">Cart</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.

Check your pages with Lumtera

This check is free. Open any post, choose Accessibility in the admin bar, then the Keyboard tab: Lumtera numbers every Tab stop and checks the page with the keyboard, theme, menus and footer included, one page at a time. Lumtera Pro's Page checks screen (Lumtera → Checks → Page checks) runs the same keyboard walk on every page you select, at desktop width and, with "Also check at phone width", again at 390 pixels, and saves the results with the page; scheduled checks have no browser, so they do not run it.

Download Lumtera free (downloads lumtera.zip from WordPress.org) Read the documentation

All checks

Start with the free plugin today

All 69 content checks and 33 whole-page checks, fixes you approve with undo, and the site report — free, with no account and no page limits.

Download free (downloads lumtera.zip from WordPress.org)See Pro plans