- Success Criterion 1.3.2
- Conformance level A
- W3C reference F49
Layout Table That Reads in a Nonsensical Order When Linearized
1.3.2 — Meaningful Sequence
Scenario
Setting
A food delivery app's restaurant menu
What’s wrong
A layout table reads in a nonsensical order when linearized — the reading order scrambles the content.
Example
Open a food delivery app's restaurant menu and this is what you'll see: a layout table reads in a nonsensical order when linearized — the reading order scrambles the content.
Why it matters
Screen-reader and keyboard users who encounter content in DOM order. The practical effect on a food delivery app's restaurant menu: they can't tell how the page is organized.
How to test
Disable CSS on a layout table and read top to bottom: if the reading order doesn't match the intended content flow, it fails.
How to fix
Make the layout linearize sensibly, or replace the layout table with CSS.
Outcome
That one change on a food delivery app's restaurant menu means they understand how the page is organized.
Who is affected
Screen-reader and keyboard users who encounter content in DOM order.
Learn more
- Understanding Understanding document (opens in a new tab)
- Technique Related technique (opens in a new tab)
Related scenarios
- CSS Layout Changes That Scramble the Screen Reader’s Reading Order
- Word Spelled Out Letter by Letter Instead of Read as a Word
- Text Columns Faked With Spaces Read Aloud Out of Order
- CSS Reordering That Makes Code Order Differ From Visual Order
- Multi-Column Article Whose Code Order Interleaves the Columns
- Prices or Labels Positioned Visually Near the Wrong Product in Code