• Success Criterion 1.3.1
  • Conformance level A
  • W3C reference F48

Tabular Data Placed Inside a Preformatted Text Block

1.3.1 — Info and Relationships

Scenario

Setting

An online clothing store's product listing page

What’s wrong

Tabular data is shown inside a <pre> block (fixed-width text) instead of a real table — no headers or cell navigation for screen readers.

Example 

<pre>
Size   Chest   Stock
S      36in    12
M      40in    5
</pre>

Why it matters

A shopper using a screen reader hears the whole size chart as one block of spaced text. They can't check a single row's stock on its own.

How to test

Inspect any pre block holding column-aligned data: if it's meant to be a table, a screen reader reads it as one run-on line with no cell/header navigation.

How to fix

A pre block only fixes visual spacing; it carries none of the row and column meaning a real table provides.

<table>
  <tr><th>Size</th><th>Chest</th><th>Stock</th></tr>
  <tr><td>S</td><td>36in</td><td>12</td></tr>
  <tr><td>M</td><td>40in</td><td>5</td></tr>
</table>

Outcome

A shopper checks the stock for size M on its own, without re-reading the whole chart from the top.

Who is affected

Screen reader users checking sizing and stock on a product page can't navigate the chart cell by cell.

Learn more

Related scenarios