web Accessibility

Complex Tables - Checkpoint (h)

Associating Data and Header Cells

The law states:

"Mark-up shall be used to associate data cells and header cells for data tables that have two or more logical levels of row or column headers."

In general, try to make data tables as simple as possible. This means keeping your table headers to one level. If you end up needing more than one level of headers, use the headers and the id attributes. By using these attributes, the screen reader now knows which headers correspond to which data cell. Although you can use this technique for simple tables, we recommend you use the method in Row and Column Headers for tables with one level of headers.

A Table with Two Levels of Column Headers

Fall and Winter Midterm Grades
  Fall Winter
Name Midterm 1 Midterm 2 Midterm 1 Midterm 2
Josh A+ A C B
Dan B C+ D A

HTML Code:
<table width="100%" border="1">
<caption><strong>Fall and Winter Midterm Grades</strong></caption>
<tr>
<th>&nbsp;</th>
<th colspan="2" id="fall">Fall</th>
<th colspan="2" id="winter">Winter</th>
</tr>
<tr>
<th id="name">Name</th>
<th id="mid1_1">Midterm 1</th>
<th id="mid2_1">Midterm 2</th>
<th id="mid1_2">Midterm 1</th>
<th id="mid2_2">Midterm 2</th>
</tr>
<tr>
<td headers="name">Josh</td>
<td headers="fall mid1_1">A+</td>
<td headers="fall mid2_1">A</td>
<td headers="winter mid1_2">C</td>
<td headers="winter mid2_2">B</td>
</tr>
<tr>
<td headers="name">Dan</td>
<td headers="fall mid1_1">B</td>
<td headers="fall mid2_1">C+</td>
<td headers="winter mid1_2">D</td>
<td headers="winter mid2_2">A</td>
</tr>
</table>

Even with appropriate markup, Jaws, the most popular screen reader, is sometimes unable to read a table with spanned rows or columns correctly. To fix this, you can combine both headers so that they look like the table below.

An Alternative to Multiple Levels of Headers

Fall and Winter Midterm Grades
Name Fall Midterm 1 Fall Midterm 2 Winter Midterm 1 Winter Midterm 2
Josh A+ A C B
Dan B C+ D A

HTML Code:
<table width="100%" border="1">
<caption><strong>Fall and Winter Midterm Grades</strong></caption>
<tr>
<th scope="col">Name</th>
<th scope="col">Fall Midterm 1</th>
<th scope="col">Fall Midterm 2</th>
<th scope="col">Winter Midterm 1</th>
<th scope="col">Winter Midterm 2</th>
</tr>
<tr>
<td>Josh</td>
<td>A+</td>
<td>A</td>
<td>C</td>
<td>B</td>
</tr>
<tr>
<td>Dan</td>
<td>B</td>
<td>C+</td>
<td>D</td>
<td>A</td>
</tr>
</table>

Caption Tag and Summary Attribute

The <caption> tag should always be used with data tables. The summary attribute should be used to explain the meaning of a data table if it is not otherwise evident from the context of the page,

Caption Tag

Each table should have an associated <caption> tag that provides a short description (title) of the table's purpose. The caption visually shows up on top of your data table.

Fall and Winter Midterm Grades
Name Fall Midterm 1 Fall Midterm 2 Winter Midterm 1 Winter Midterm 2
Josh A+ A C B
Dan B C+ D A

<table width="100%" border="1">
<caption><strong>Fall and Winter Midterm Grades</strong></caption> ... </table>

Summary Attribute

The summary attribute is used to provide a longer description of the data table. Use the summary attribute to describe the context (meaning) of the data table if it has not already been described in the full context of the page.

The summary does not appear visually, but is accessible to the screen reader. The summary for the above table would be declared as the following:

<table width="100%" border="1" summary="This table displays midterm grades for the fall and winter quarters for students.">


Information is AvailableHelpful Web Sites