Techniques for WCAG 2.0

On this page:

-

# H39: Using caption elements to associate data table captions with data tables

## Applicability

HTML and XHTML data tables

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 programmatically associate captions for data tables where captions are provided in the presentation. The caption for a table is a table identifier and acts like a title or heading for the table.

The `caption` element is the appropriate markup for such text and it ensures that the table identifier remains associated with the table, including visually (by default). In addition, using the `caption` element allows screen reading software to navigate directly to the caption for a table if one is present.

The `caption` element may be used whether or not the table includes a `summary` attribute. The `caption` element identifies the table whereas the `summary` attribute gives an overview of the purpose or explains how to navigate the table. If both are used, the `caption` should not duplicate information in the `summary`.

Although WCAG 2.0 does not prohibit the use of layout tables, CSS-based layouts are recommended in order to retain the defined semantic meaning of the HTML and XHTML `table`elements and to conform to the coding practice of separating presentation from content. If a table is used for layout, the `caption` element is not used. The purpose of a layout table is simply to control the placement of content; the table itself is “transparent" to the user. A `caption` would "break" this transparency by calling attention to the table.

## Examples

### Example 1: An appointment calendar with a caption

Example Code:

    <table>
    <caption>Schedule for the week of March 6</caption>
    ...</table>

## Resources

Resources are for information purposes only, no endorsement implied.

- HTML 4.01 Table Captions: The CAPTION element

## Related Techniques

- H43: Using id and headers attributes to associate data cells with header cells in data tables
- H63: Using the scope attribute to associate header cells and data cells in data tables
- H73: Using the summary attribute of the table element to give an overview of data tables

## 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 table does not include a `caption` element.

3. If the table is a data table and it includes a `caption` element, check that the `caption` identifies 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 H37
- Next: Technique H40