Items are shown in a different order from the page's HTML

Why does it matter?

Page builders make it easy to swap columns on screen with CSS, for example to put an image left on desktop and right on phones. Screen readers and the Tab key still follow the HTML, so the steps of a how-to or the parts of a price table can be heard in a different order from the one people see.

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?

Checked in review mode's Whole page tab: flex and grid containers whose items are shown in a different order from the HTML because of the CSS order property, a reversed flex direction or grid placement. Only items with text, or something to focus, count. Each is for review, since the order often does not change the meaning (a row of equal cards); similar containers are grouped, up to ten per page.

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

How do I fix it in WordPress?

Put the items in the order they are shown, for example by moving the block in the editor, instead of reordering them with CSS (order, row-reverse or grid placement). In page builders, check the column's "reverse on mobile" or order settings. If the order does not change the meaning, dismiss the item.

Example

.steps { display: flex; flex-direction: row-reverse; }

.steps { display: flex; } /* steps moved into order in the editor */

How do I check the 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.