WCAG 1.3.2: Meaningful Sequence
WCAG 1.3.2 Meaningful Sequence is a level A success criterion from WCAG 2.0. When the order of content changes the meaning, the programmatic order must match the visual order.
A screen reader may read a price before the product name if the DOM order is wrong.
How to test
Disable CSS or use the accessibility tree and read the page in source order. It should still make sense.
How to fix
Put the name, then the price, then the button in the DOM. Use CSS grid only for visual placement if the source order stays logical.
Example that fails
On mobile the buy button is focused before the product name because the DOM was reordered.
Example that passes the check
Source order is name, price, options, then add to basket at every width.
Shopify
In the product section, keep the title, price and button in that order in the Liquid. Do not reorder them with a script.
WooCommerce
Avoid CSS order hacks on the single product summary that move the button before the title in the accessibility tree.
WordPress
Do not use flex order to put a call to action before the heading in the reading order.
Wix
Check the Editor's DOM order for strips. Move the heading above the button in the layers, not only on the canvas.