• Success Criterion 1.3.1
  • Conformance level A

Data Grid Built From Divs Instead of Real Table Markup

1.3.1 — Info and Relationships

Scenario

Setting

A food delivery app's restaurant menu

What’s wrong

Data presented visually as a table (CSS grid / div rows and columns) with no table semantics — never announced as a table.

Example 

<div class="menu-grid">
  <div>Margherita Pizza</div><div>$14</div><div>800 cal</div>
  <div>Caesar Salad</div><div>$9</div><div>350 cal</div>
</div>

Why it matters

A screen reader user hears six unrelated lines in a row, never learning that price and calories both belong to Margherita Pizza.

How to test

Inspect a visual grid of cards/data in DevTools: if it's built from divs with no table/grid ARIA role, a screen reader announces it as plain unstructured text.

How to fix

CSS grid can visually align rows and columns, but only real table markup announces them as related.

<table>
  <tr><th>Dish</th><th>Price</th><th>Calories</th></tr>
  <tr><td>Margherita Pizza</td><td>$14</td><td>800 cal</td></tr>
  <tr><td>Caesar Salad</td><td>$9</td><td>350 cal</td></tr>
</table>

Outcome

Browsing the menu, a diner hears price and calories tied to each dish instead of stray numbers.

Who is affected

Screen reader users browsing the menu can't connect a dish's name to its price or calorie count.

Learn more

Related scenarios