WCAG 1.3.2 — Meaningful Sequence (E-commerce Product Card for a Mobile Store )
This example shows how the visual presentation of content can differ from how it is read by screen readers when DOM order and visual order don’t match.
How it looks visually
Smartwatch Series X
$199.00
Stay connected with fitness tracking and voice assistant support.
Battery life: up to 5 days • Water-resistant • Compatible with Android and iOS
Sighted users see product details followed by the Read more button at the bottom of the card — this order looks logical visually.
How it appears for screen reader users
Smartwatch Series X
$199.00
Stay connected with fitness tracking and voice assistant support.
Battery life: up to 5 days • Water-resistant • Compatible with Android and iOS
Screen readers announce Read more first before the product name or price, which breaks the expected logical reading sequence.
When the Read more button is visually positioned at the top but appears first in the DOM, screen readers announce it before essential product details such as the name and price. This mismatch causes confusion and breaks the meaningful reading sequence expected by users relying on assistive technologies.
Best Practices
- Keep the DOM order consistent with the visual reading order.
- Use CSS for styling, not for changing the logical order of content.
- Test with a screen reader to ensure meaningful reading order.
- Maintain consistent content structure across responsive layouts.