• Success Criterion 1.3.3
  • Conformance level A

Instruction Referencing a Table Column With No Real Header Name

1.3.3 — Sensory Characteristics

Scenario

Setting

A food delivery app's restaurant menu

What’s wrong

Instructions referencing visual position in a table/figure ("the third column") when the referent has no header/name.

Example 

<p>Spicy dishes are marked with a flame icon in the third column.</p>
<table>
  <tr><td>Pad Thai</td><td>650 cal</td><td>🌶️</td><td>$14</td></tr>
  <tr><td>Green Curry</td><td>520 cal</td><td></td><td>$13</td></tr>
</table>

Why it matters

A screen reader user hears table cells with no column headers, so "third column" is not something they can query, and cannot tell which dish is spicy.

How to test

Read a table/figure instruction alone (e.g., 'see the third column'): check whether that column also has a name a screen reader user could reference.

How to fix

Give every column a real header, and reference that header name in instructions instead of a column position.

<table>
  <tr><th>Dish</th><th>Calories</th><th>Spice Level</th><th>Price</th></tr>
  <tr><td>Pad Thai</td><td>650 cal</td><td><span aria-label="Spicy">🌶️</span></td><td>$14</td></tr>
</table>

Outcome

A screen reader user asks for the "Spice Level" column directly and hears which dishes are marked spicy.

Who is affected

Screen reader users navigating tables by column header, and anyone on a narrow screen where columns no longer line up as first, second, third.

Learn more

Related scenarios