• 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 

<table>
 <tr><td rowspan="3"><img alt="Margherita Pizza" src="pizza.jpg"></td>
     <td rowspan="3"><img alt="Classic Burger" src="burger.jpg"></td></tr>
 <tr><td>Margherita Pizza</td><td>Classic Burger</td></tr>
 <tr><td>$12.99</td><td>$9.99</td></tr>
</table>

Why it matters

Linearized, this reads as image, image, then both dish names together, then both prices together, so no price is ever paired with its own dish.

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

Build visual grids with CSS grid or flexbox on real containers, and reserve table markup for genuinely tabular data.

<div class="menu-item">
  <img alt="Margherita Pizza" src="pizza.jpg">
  <p>Margherita Pizza</p>
  <p>$12.99</p>
</div>
<div class="menu-item">
  <img alt="Classic Burger" src="burger.jpg">
  <p>Classic Burger</p>
  <p>$9.99</p>
</div>

Outcome

Now every dish's name and price are announced together, one item at a time.

Who is affected

Screen reader users and anyone using a linearized or reflowed view lose the pairing between a dish, its image, and its price.

Learn more

Related scenarios