--- obsoleteMessage: | The `summary` attribute is obsolete in the HTML Living Standard. Use one of the techniques for describing tables instead. obsoleteSince: 20 ---

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

ID: H73

Technology: html

Type: Technique

## When to Use

HTML 4.01, XHTML 1.x

## 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`.

In HTML5 the `summary` attribute is obsolete. Assistive technologies may or may not continue to support the attribute. Authors should consider alternatives and only use with caution.

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. See F46 for details.

## Examples

### 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.

    <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>
      <tr>
        <td>4:00</td>
        <td>4:05</td>
        <td>4:11</td>
        <td>4:19</td>
      </tr>
      …
    </table>

### 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`.

    <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>

## Tests

### Procedure

For each data table:

1. If a `summary` is present, check that the `summary` attribute describes the table's organization or explains how to use the table
2. If both a `summary` attribute and a `caption` element are present for the data table, check that the `summary` does not duplicate the `caption`.

### Expected Results

- #1 and #2 are true.

## Related Techniques

- H39
- H51
- F46

## Resources

- HTML 4.01 summary attribute