Organizing tabular data accessibly

How screen readers read tables

A blind visitor cannot glance at a column title. Instead, as they move from cell to cell, the screen reader reads the matching header first. With correct markup, moving through a price table sounds like: Item, Pili nuts. Price, ₱180. Without headers, they only hear ₱180 with no context.

The scope attribute

<table>
  <caption>Bus fares from Legazpi</caption>
  <thead>
    <tr>
      <th scope="col">Destination</th>
      <th scope="col">Regular</th>
      <th scope="col">Aircon</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Naga</th>
      <td>₱180</td>
      <td>₱230</td>
    </tr>
    <tr>
      <th scope="row">Sorsogon</th>
      <td>₱120</td>
      <td>₱150</td>
    </tr>
  </tbody>
</table>

Each destination is a row header, so a screen reader can say Sorsogon, Aircon, ₱150.

Simple tables are accessible tables

• One header row and, if needed, one header column.
• No empty cells used for spacing.
• No tables inside tables.
• A caption that says what the data is and when it is from.

For very complex tables, the headers and id attributes can link cells to headers, but splitting the table is usually better.

Tables on small screens

<div class="table-wrap" style="overflow-x: auto;">
  <table>...</table>
</div>

Wrapping the table lets it scroll sideways instead of breaking the page. The tables in this lesson use exactly this method. Test on a real phone.

Try it: add scope

Add scope=“col” to the column headers, turn each subject into a row header with scope=“row”, and add a caption.

Quick quiz

Common mistakes

• Bold td instead of th. Visual bold does not tell screen readers it is a header.
• Empty spacer cells. They are read aloud as blank.
• Tables inside tables. Nested tables are very hard to navigate.

Your action

Tick each item when you can do it. Your progress saves on this device.