• Success Criterion 1.3.1
  • Conformance level A

Table Semantics Wrongly Applied to Non-Tabular Layout Content

1.3.1 — Info and Relationships

Scenario

Setting

A used-car marketplace's listing filter

What’s wrong

Table semantics applied to non-tabular content for layout, announcing a false data table.

Example 

<table>
  <tr><td><input type="checkbox"> Toyota</td></tr>
  <tr><td><input type="checkbox"> Honda</td></tr>
  <tr><td><input type="checkbox"> Ford</td></tr>
</table>

Why it matters

A screen reader user opens the filter sidebar and hears "table with 1 column" before every checkbox, adding confusing noise.

How to test

Inspect a layout-only grid (used purely for visual arrangement) for table or role="table"/"row"/"cell": if present, it falsely announces as a data table to screen readers.

How to fix

Reserve table markup for genuinely tabular data; a checkbox list is a form group, not a table.

<fieldset>
  <legend>Make</legend>
  <label><input type="checkbox"> Toyota</label>
  <label><input type="checkbox"> Honda</label>
  <label><input type="checkbox"> Ford</label>
</fieldset>

Outcome

A buyer hears Make, Toyota checkbox cleanly, with no stray table announcement in the way.

Who is affected

Screen reader users trying to filter car listings get a false table announcement around a plain checkbox list.

Learn more

Related scenarios