Techniques for WCAG 2.0

On this page:

-

# H73: Using the summary attribute of the table element to give an overview of data tables

## Applicability

HTML 4.01, XHTML 1.x

This technique relates to:

- Success Criterion 1.3.1 (Info and Relationships)
  - How to Meet 1.3.1 (Info and Relationships)
  - Understanding Success Criterion 1.3.1 (Info and Relationships)

## Description

The objective of this technique is to provide a brief overview of how data has been organized into a table or a brief explanation of how to navigate the table. The `summary` attribute of the `table` element makes this information available to people who use screen readers; the information is not displayed visually.

The `summary` is useful when the table has a complex structure (for example, when there are several sets of row or column headers, or when there are multiple groups of columns or rows). The `summary` may also be helpful for simple data tables that contain many columns or rows of data.

The `summary` attribute may be used whether or not the table includes a `caption` element. If both are used, the `summary` should not duplicate the `caption`.

Although WCAG 2 does not prohibit the use of layout tables, CSS-based layouts are recommended in order to retain the defined semantic meaning of the HTML `table` elements and to conform to the coding practice of separating presentation from content. However, if a layout table is used, then the `summary` attribute is not used or is null. The purpose of a layout table is simply to control the placement of content; the table itself is “transparent" to the user. A `summary` would “break" this transparency by calling attention to the table. A null `summary` (`summary=""`) on layout tables is acceptable.

## Examples

### Example 1: A data table with a summary but no caption

This example shows a bus schedule. The route number and direction are included in the `summary` along with information on how to use the schedule.

Example Code:

    <table summary="Schedule for Route 7 going downtown. Service begins
    at 4:00 AM and ends at midnight. Intersections are listed in the top row.
    Find the intersection closest to your starting point or destination, then read
    down that column to find out what time the bus leaves that intersection.">
      <tr>
        <th scope="col">State & First</th>
        <th scope="col">State & Sixth</th>
        <th scope="col">State & Fifteenth</th>
        <th scope="col">Fifteenth & Morrison</th>
      </tr>
        <td>4:00</td>
        <td>4:05</td>
        <td>4:11</td>
        <td>4:19</td>
      </tr>
      …
    </table>

### Example 2: A data table with both a summary and a caption

In this example both a `summary` attribute and a `caption` element are used. The `caption` identifies the bus route. The `summary` helps users who are blind understand how to use the schedule. Screen readers read the `caption`, followed by the `summary`.

Example Code:

    <table summary="Intersections are listed in row 1.
    Find the intersection closest to your starting point
    or destination, then read down that column to find
    out what time the bus leaves that intersection.
    Service begins at 4:00 AM and ends at midnight.">
      <caption>Route 7 Downtown (Weekdays)</caption>
    …
    </table>

## Resources

Resources are for information purposes only, no endorsement implied.

- HTML 4.01 summary attribute

## Related Techniques

- H39: Using caption elements to associate data table captions with data tables
- H51: Using table markup to present tabular information

## Tests

### Procedure

1. Check for layout tables: determine whether the content has a relationship with other content in both its column and its row.

   1. If “no," the table is a layout table.

   2. If “yes," the table is a data table.

2. If the table is a layout table, check that the `summary` attribute is not present or `summary` attribute is null.

3. If the table is a data table and a `summary` is present, check that the `summary` attribute describes the table's organization or explains how to use the table

4. If both a `summary` attribute and a `caption` element are present for this data table, check that the `summary` does not duplicate the `caption`.

### Expected Results

- For layout tables, #2 is true.

- For data tables, #3 and #4 are true.

- Top
- Contents
- Intro
- Previous: Technique H71
- Next: Technique H74