HTML Table Standard (Section 508)

Classification:
[x] Standard

Categories:
[x] Accessibility/508

Standard:

Tables used as a matrix for data or other information must provide a means to associate data cells with the column and row headers. Data tables with more than one row must associate data cells with column/row headers through the use of scoping or header and id attributes.

The use of the table summary attribute and caption element are optional.The summary attribute may be used if it provides meaningful descriptive information.The caption element may be used to display a title above, below or beside a table.

(Note: This standard does not apply to tables used for layout.)

Rationale:

Tables used for layout do not have column/row headings.

Tables used for data/information allow sighted users to easily associate column/row headings with data cells for tables. Assistive technologies use scoping and header/id attributes to associate data cells with column/row headers.

The summary attribute is not interpreted by all assistive technologies. Summaries of the table should be in close proximity to the table should be included in the context of the document.

Sources:

http://www.access-board.gov/sec508/guide/1194.22.htm#(g)

Requirements:

Data tables with more than one row of data must use either scoping or header/id attributes to associate data cells with row/column headings.

Simple Table Example:

Simple tables, tables with one column or row of headings must use scoping attribute to associate data cells with column/row headings.

Simple Table Code Example:

<table border="1" align="center">
    <tr>
        <th scope="col">Clothing</th>
        <th scope="col">Size</th>
        <th scope="col">Cost in Dollars</th>
    </tr>

    <tr>
        <th scope="row">Shirt</th>
        <td>Large</td>
        <td>1</td>
    </tr>

    <tr>
        <th scope="row">Pants</th>
        <td>Medium</td>
        <td>6</td>
    </tr>
</table>

Complex Table Example:

Complex tables, tables where the scoping attribute does not accurately link the data cells with correct column/row headings, must have id and header attributes to associate data cells with column/row headings.

Complex Table Code Example:

<table border="1">
    <tr>
        <td> </td>
        <th id="clothing">Clothing</th>
        <th id="size">Size</th>
        <th id="cost">Cost in Dollars</th>
    </tr>

    <tr>
        <th rowspan="2" id="winter">Winter</th>
        <th id="hat">Hat</th>
        <td headers="winter hat size">Large</td>
        <td headers="winter hat cost">5</td>
    </tr>

    <tr>
        <th id="pants">Pants</th>
        <td headers="winter pants size">Medium</td>
        <td headers="winter pants cost">10</td>
    </tr>

    <tr>
        <th id="summer">Summer</th>
        <th id="shirt">Shirt</th>
        <td headers ="summer shirt size">Small</td>
        <td headers="summer shirt cost"> 12</td>
    </tr>
</table>

For data tables, the summary attribute is not required but may be used only to provide additional details about a table to assist users. The Summary attribute is not supported by all assistive technologies. Therefore, in addition to using the Summary tag, you should include a brief description of the table using the Caption tag. The following format shown in our examples for the summary attribute must be used if a summary is included:

Example with summary attribute:

Example with summary and caption tag:

<table width="80%" summary="This site map has seven columns that reflect the main content categories of the site. The first row corresponds to categories and the following nine rows contain subpages.Tabs have been set to read down columns. Each cell contains a link.
<caption>Site Map Showing Site Categories</caption>
</table>

Related Standards: N/A

Related Guidelines: N/A

Checklists:

Simple Table:

Associate data cells with heading cells through use of the scope attribute.

Complex Table:

Associate data cells with heading cells through use of headers and id attributes.