Accessibility for Web Developers

Guideline 5: Create tables that transform gracefully

Tables are probably the most misused element in HTML. Tables should be used to present tabular data, but are most often used for laying out content. Pages should be laid out using style sheets, as specified in Guideline 3 of the Web Content Accessibility Guidelines. Assistive technologies depend on the correct markup of tables. Failing to do so makes your pages inaccessible.

This guideline has 6 checkpoints, ranging in importance from Level "A" (essential for the site to be accessible), to Level "AAA" (beneficial to ensure the accessibility of your site).

5.1 For data tables, identify row and column headers

This checkpoint is a priority 1 checkpoint. It must be satisfied for your site to be considered accessible. For data tables, you should identify the headers using the "th" element. The following is an example of a table to provide the nutritional information for 100 grams of Jelly Toddlers.

<table summary="This table provides the nutritional
            information for 100g of Jelly Toddlers">
<caption>Nutritional Information per 100g for Jelly Toddlers</caption>
<tr>
    <th>Nutrient</th>
    <th>Value</th>
</tr>
<tr>
    <td>Energy</td>
    <td>1424kJ/335kcal</td>
</tr>
<tr>
    <td>Protein</td>
    <td>4.0g</td>
</tr>
<tr>
    <td>Carbohydrate</td>
    <td>79.5g</td>
</tr>
<tr>
    <td>Fat</td>
    <td>Nil</td>
</tr>
</table>

For data tables, you may choose to explicitly associate the headers to the data using either the "headers" attribute (associated with the id specified for the "th" element) or the "scope" attribute.

<table summary="This table provides the distances between cities">
<caption>Distances Between Cities (miles)</caption>
<tr>
    <td></td>
    <th scope="col">London</th>
    <th scope="col">New York</th>
    <th scope="col">Paris</th>
</tr>
<tr>
    <th scope="row">London</th>
    <td>0</td>
    <td>3460</td>
    <td>210</td>
</tr>
<tr>
    <th scope="row">New York</th>
    <td>3460</td>
    <td>0</td>
    <td>3620</td>
</tr>
<tr>
    <th scope="row">Paris</th>
    <td>210</td>
    <td>3620</td>
    <td>0</td>
</tr>
</table>

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

This checkpoint is a priority 1 checkpoint. It must be satisfied for your site to be considered accessible. For more complex tables where the structural divisions go beyond those implicit in the rows and columns, extra markup is required to identify the structure. Groups of rows should be structured with the "thead" and "tfoot" elements for repeated headers and footers respectively, and "tbody" for other groups of rows. Groups of columns should be structured with the "colgroup" and "col" elements. Conceptual categories within a table should be labelled using the "axis" attribute, and "scope" and "headers" attributes should be used to associate the headings to the data.

<table summary="This table describes a very limited CD collection">
<caption><abbr title="Compact Disc">CD</abbr> Collection</caption>
<colgroup span="2" />
<colgroup span="2" />
<thead>
<tr>
    <th colspan="2" id="cd">CD</th>
    <th colspan="2" id="description">Description</th>
</tr>
<tr>
    <th id="artist">Artist</th>
    <th id="album">Album</th>
    <th id="genre">Genre</th>
    <th id="year">Year</th>
</tr>
</thead>
<tfoot>
<tr>
    <td colspan="4">Compiled 27th May 2003</td>
</tr>
</tfoot>
<tbody>
<tr>
    <td headers="cd artist">The Clash</td>
    <td headers="cd album">London Calling</td>
    <td headers="description genre">Punk Rock</td>
    <td headers="description year">1979</td>
</tr>
<tr>
    <td headers="cd artist">Supergrass</td>
    <td headers="cd album">In it for the money</td>
    <td headers="description genre">Brit Pop</td>
    <td headers="description year">1996</td>
</tr>
<tr>
    <td headers="cd artist">Feeder</td>
    <td headers="cd album">Swim</td>
    <td headers="description genre">Rock</td>
    <td headers="description year">2001</td>
</tr>
</tbody>
</table>

5.3 Do not use tables for layout unless the table makes sense when linearized

This checkpoint is a priority 2 checkpoint. It should be satisfied for your site to be considered accessible. When tables are used for layout, it can cause problems with assistive technologies. If you use a table to split a page into two columns, some readers will read the first line of the first column, then the first line of the second column, and so on through the contents of the page. Unless the content of the table makes sense when reading the columns line by line, do not use tables.

5.4 If a table is used for layout, do not use any structural markup for the purpose of visual formatting

This checkpoint is a priority 2 checkpoint. It should be satisfied for your site to be considered accessible. If the table makes sense when linearised, then you can place it in a table for layout. If you choose to use a table to layout data, the summary for the table should make this clear. You should not use any structural elements (th, thead, tfoot, tbody, colgroup, or col) in the table, as this can confuse assistive technologies.

<form id="login" method="post" action="login.asp">
<table border="0" cellspacing="5"
    summary="This table is used to lay out the username and password">
<tr>
    <td>
        <label for="username" accesskey="U">Username</label>
    </td>
    <td>
        <input type="text" id="username" name="username" value="[enter username]"
            size="40" onfocus="this.select()" />
    </td>
</tr>
<tr>
    <td>
        <label for="password" accesskey="P">Password</label>
    </td>
    <td>
        <input type="password" id="password" name="password" size="40" />
    </td>
</tr>
<tr>
    <td colspan="2">
        <input type="submit" value="Login" name="submit" accesskey="L" />
    </td>
</tr>
</table>
</form>

5.5 Provide summaries for tables

This is a priority 3 checkpoint, which will be beneficial for the accessibility of your site. All data tables should contain summary information. The table should be given a title either through the title attribute for the table, or using the caption element. You should provide a summary for tables through the summary attribute. The summary attribute is used by assistive technologies to aid the visitor understand the structure of the table. This attribute is particularly useful with complex tables, as you can describe the structure to aid the visitor's understanding.

Visitors read pages in a variety of ways. They may skip around the page, or look for specific information within the HTML structure. This is why standards are so important, as it allows visitors to seek out specific information in a standard way. If a visitor looks through the captions of your tables, and you haven't provided captions, they may miss important information.

5.6 Provide abbreviations for header labels

This is a priority 3 checkpoint, which will be beneficial for the accessibility of your site. If you abbreviate header labels, you should provide an expansion of the abbreviation through the "abbr" attribute. The following illustrates using the "abbr" attribute to expand the abbreviations for the days of the week.

<tr>
<th abbr="Monday">Mon</th>
<th abbr="Tuesday">Tue</th>
<th abbr="Wednesday">Wed</th>
<th abbr="Thursday">Thu</th>
<th abbr="Friday">Fri</th>
<th abbr="Saturday">Sat</th>
<th abbr="Sunday">Sun</th>
</tr>