Techniques for WCAG 2.0

On this page:

-

# H63: Using the scope attribute to associate header cells and data cells in data tables

## Applicability

HTML and XHTML

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)

## User Agent and Assistive Technology Support Notes

The `row` and `col` values of the `scope` attribute are currently supported to a large extent by most current versions of JAWS. However, there are still some problems and WindowEyes support for `scope` is inconsistent. The same is true for Japanese versions of these screen readers. Versions of JAWS prior to version 5 and older versions of WindowsEyes have inconsistent support for `scope`.

At the current time, those who want to ensure consistent support across Assistive Technologies for tables where the headers are not in the first row/column may want to use the technique for complex tables H43: Using id and headers attributes to associate data cells with header cells in data tables. For simple tables that have headers in the first column or row we recommend the use of the `th` and `td` elements.

## Description

The objective of this technique is to associate header cells with data cells using the `scope` attribute. The `scope` attribute may be used to clarify the scope of any cell used as a header. The scope identifies whether the cell is a header for a row, column, or group of rows or columns. The values `row`, `col`, `rowgroup`, and `colgroup` identify these possible scopes respectively.

For simple data tables where the header is not in the first row or column, like the one in Example 1, this technique can be used. Based on screen reader support today, its use is suggested in two situations both relating to simple tables: :

- data cells marked up with `td` that also function as row header or column header

- header cells marked up with `td` instead of `th`. Sometimes, authors use this to avoid the display characteristics associated with `th` and also do not choose to use CSS to control the display for `th`.

Note: For simple tables that have the headers in the first row or column then it is sufficient to simply use the TH elements without scope.

Note: For complex tables use ids and headers as in H43: Using id and headers attributes to associate data cells with header cells in data tables.

## Examples

### Example 1: A simple schedule

In the following example, column #1 contains serial numbers for rows in the table and the second column contains the key value for the row. The cells in the second column may then use `scope="row"`. The cells in the first row too are marked up with `td` and use `scope="col"`.

Example Code:

     <table border="1">
      <caption>Contact Information</caption>
      <tr>
        <td></td>
        <td scope="col">Name</td>
        <td scope="col">Phone#</td>
        <td scope="col">Fax#</td>
        <td scope="col">City</td>
      </tr><tr>
        <td>1.</td>
        <td scope="row">Joel Garner</td>
        <td>412-212-5421</td>
        <td>412-212-5400</td>
        <td>Pittsburgh</td>
      </tr><tr>
        <td>2.</td>
        <td scope="row">Clive Lloyd</td>
        <td>410-306-1420</td>
        <td>410-306-5400</td>
        <td>Baltimore</td>
      </tr><tr>
        <td>3.</td>
        <td scope="row">Gordon Greenidge</td>
        <td>281-564-6720</td>
        <td>281-511-6600</td>
        <td>Houston</td>
      </tr>
    </table>

## Resources

Resources are for information purposes only, no endorsement implied.

- HTML 4.01 Table Cells: scope attribute

- HTML 4.01 Table cells: The TH and TD elements

- Assistive technology reading tables

## Related Techniques

- H43: Using id and headers attributes to associate data cells with header cells in data tables
- H51: Using table markup to present tabular information

## Tests

### Procedure

For each data table:

1. Check that all `th` elements have a `scope` attribute.

2. Check that all `td` elements that act as headers for other elements have a `scope` attribute.

3. Check that all `scope` attributes have the value `row`, `col`, `rowgroup`, or `colgroup`.

### Expected Results

- All checks above are true.

- Top
- Contents
- Intro
- Previous: Technique H62
- Next: Technique H64