Priority 1 Item 14
Provide summaries for data tables. If a table is used only for layout, provide an empty summary
attribute (e.g., summary = "").
Proper markup of a data table
| Morning |
Afternoon |
|
|---|---|---|
| Bob |
9:00 - 11:30 |
2:00 - 3:30 |
| Sue |
11:30 - noon |
4:00 - 6:30 |
Using the same data table as in Priority 1 Item 13, this example shows the proper markup for providing a table summary for a data table.
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>
<td> </td>
<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> </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
View WAI checkpoint 5.5 - Provide summaries for tables.