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

Table Layout Faked With Spaces Instead of Real Table Code

1.3.1 — Info and Relationships

Scenario

Setting

A webinar platform's registration form

What’s wrong

Spaces/tabs are used to fake a table in plain text — there are no real rows, columns, or headers for a screen reader to navigate.

Example 

<p>
Session        Speaker       Time
Kickoff        A. Reyes      10:00
Deep Dive      J. Chen       11:30
</p>

Why it matters

A registrant using a screen reader hears the whole schedule as one run-on paragraph. There's no way to move between sessions or speakers.

How to test

Copy the 'table' into a plain text editor: if it was built with spaces/tabs instead of table, thead, tr, td tags, structure is lost and a screen reader can't navigate cells.

How to fix

Only real table markup gives a screen reader rows, columns, and headers to navigate by.

<table>
  <caption>Webinar sessions</caption>
  <tr><th>Session</th><th>Speaker</th><th>Time</th></tr>
  <tr><td>Kickoff</td><td>A. Reyes</td><td>10:00</td></tr>
  <tr><td>Deep Dive</td><td>J. Chen</td><td>11:30</td></tr>
</table>

Outcome

A registrant moves cell by cell through the session list and picks the right time slot with confidence.

Who is affected

Screen reader users signing up for a webinar lose all row and column boundaries in the session list.

Learn more

Related scenarios