a11yTips

Structure tabular information using table markup

no. 028

Make sure header cells and data cells are properly coded using table markup

Information is considered tabular when a logical relationship between different data pieces is represented in columns and rows. In order for the logical relationships to be perceived, columns and rows must be recognizable by users. The relationship presented between information in data tables must be preserved even when users cannot see the table or the presentation format is changed.

To do so, simply make sure that whenever content calls for tabular information, that the markup used can reliably convey the structure and semantics of the table to users of assistive technologies. Properly coding tables header cells as TH elements and table data cells as TD elements in simple data tables will naturally convey information about the table’s structure, making its content easier to digest for users.

User Story

As a visually impaired user using assistive technology, I want header cells and data cells in data tables to be properly marked up, so that the relationship between cells can be reliably conveyed to my tools.

Simple Code Example

<tr>
<th>Fruits</th>
<th>Vegetables</th>
</tr>
<tr>
<td>Apple</td>
<td>Carrot</td>
</tr>

Testing Methodology

Using the Web Developer Toolbar for Firefox, select the “Outline Table Cells” test under “Outline” to highlight all available data cells in the page. Then verify that each header cell is marked up as TH while each data cell is marked up as TD.

Specification Details