Priority 1 Item 13

1.13

Priority 1 Item 13

For data tables, identify row and column headers. Use markup to associate data cells with header cells for data tables that have two or more logical levels of row or column headers.

Proper markup of a data table

(Example Data Table) Daily Time Schedule
Name	Morning	Afternoon
Bob	9:00 - 11:30	2:00 - 3:30
Sue	11:30 - noon	4:00 - 6:30

The two examples below illustrate the importance of declaring column and row headers for data tables.

How Bob's schedule is read by a screen reader with the proper data table markup.

Caption: Daily Time Schedule
Summary: This table shows the morning and afternoon time schedules for Bob and Sue.
Name: Bob, Morning: 9:00 - 11:30, Afternoon: 2:00 - 3:30
Name: Sue, Morning: 11:30 - noon, Afternoon: 4:00 - 6:30

 
<table summary="This table shows the morning 
and afternoon time schedules for Bob and Sue.">
<caption>Daily Time Schedule</caption>
 <tr>
  <th scope="col">Name</th>
  <th scope="col">Morning</th>
  <th scope="col">Afternoon</th>
 </tr>
 <tr>
  <th scope="row">Bob</th>
  <td>9:00 - 11:30</td>
  <td>2:00 - 3:30</td>
 </tr>
 <tr>
  <th scope="row">Sue</th>
  <td>11:30 - noon</td>
  <td>4:00 - 6:30</td>
 </tr>
</table>

How Bob's schedule is read by a screen reader without the proper data table markup.

Morning, Afternoon, Bob, 9:00 - 11:30, 2:00 - 3:30, Sue, 11:30 - noon, 4:00 - 6:30

<table>
<tr>
  <td>&nbsp;</td>
  <td>Morning</td>
  <td>Afternoon</td>
 </tr>
 <tr>
  <td>Bob</td>
  <td>9:00 - 11:30</td>
  <td>2:00 - 3:30</td>
 </tr>
 <tr>
  <td>Sue</td>
  <td>11:30 - noon</td>
  <td>4:00 - 6:30</td>
 </tr>
</table>

More Resources

Using TH and TD to identify table headers - WAI recommended technique.

Identifying rows and column information - WAI recommended technique.

Separating structure and presentation - WAI recommended technique.

View WAI checkpoint 5.1 - For data tables, identify row and column headers.

View WAI checkpoint 5.2 - For data tables that have two or more logical levels of row or column headers, use markup to associate data cells and header cells.

View WAI checkpoint 5.3 - Do not use tables for layout unless the table makes sense when linearized. Otherwise, if the table does not make sense, provide an alternative equivalent.

View WAI checkpoint 5.5 - Provide summaries for tables.

View WAI checkpoint 5.6 - Provide abbreviations for header labels.

Web Content Accessibility Guidelines