## Why is this an issue?

Associating `<table>` headers, i.e. `<th>` elements, with their `<td>` cells enables screen readers to announce the header prior to the data. This considerably increases the accessibility of tables to visually impaired users.

There are two ways of doing it:

- Adding a `scope` attribute to `<th>` headers.
- Adding an `id` attribute to `<th>` headers and a `headers` attribute to every `<td>` element.

It is recommended to add `scope` attributes to `<th>` headers whenever possible. Use `<th id="...">` and `<td headers="...">` only when `<th scope="...">` is not capable of associating cells to their headers. This happens for very complex tables which have headers splitting the data in multiple subtables. See W3C WAI Web Accessibility Tutorials for more information.

Note that complex tables can often be split into multiple smaller tables, which improves the user experience.

This rule raises an issue when a `<th>` element has neither `id` nor `scope` attributes set.

### Noncompliant code example

    <table border="1">
      <caption>Contact Information</caption>
      <tr>
        <td></td>
        <th>Name</th>                                          <!-- Non-Compliant -->
        <th>Phone#</th>                                        <!-- Non-Compliant -->
        <th>City</th>                                          <!-- Non-Compliant -->
      </tr>
      <tr>
        <td>1.</td>
        <th>Joel Garner</th>                                   <!-- Non-Compliant -->
        <td>412-212-5421</td>
        <td>Pittsburgh</td>
      </tr>
      <tr>
        <td>2.</td>
        <th>Clive Lloyd</th>                                   <!-- Non-Compliant -->
        <td>410-306-1420</td>
        <td>Baltimore</td>
      </tr>
    </table>

### Compliant solution

    <table border="1">
      <caption>Contact Information</caption>
      <tr>
        <td></td>
        <th scope="col">Name</th>                              <!-- Compliant -->
        <th scope="col">Phone#</th>                            <!-- Compliant -->
        <th scope="col">City</th>                              <!-- Compliant -->
      </tr>
      <tr>
        <td>1.</td>
        <th scope="row">Joel Garner</th>                       <!-- Compliant -->
        <td>412-212-5421</td>
        <td>Pittsburgh</td>
      </tr>
      <tr>
        <td>2.</td>
        <th scope="row">Clive Lloyd</th>                       <!-- Compliant -->
        <td>410-306-1420</td>
        <td>Baltimore</td>
      </tr>
    </table>

or:

    <table border="1">
      <caption>Contact Information</caption>
      <tr>
        <td></td>
        <th id="name">Name</th>                                <!-- Compliant -->
        <th id="phone">Phone#</th>                             <!-- Compliant -->
        <th id="city">City</th>                                <!-- Compliant -->
      </tr>
      <tr>
        <td>1.</td>
        <th id="person1" headers="name">Joel Garner</th>       <!-- Compliant -->
        <td headers="phone person1">412-212-5421</td>
        <td headers="city person1">Pittsburgh</td>
      </tr>
      <tr>
        <td>2.</td>
        <th id="person2" headers="name">Clive Lloyd</th>       <!-- Compliant -->
        <td headers="phone person2">410-306-1420</td>
        <td headers="city person2">Baltimore</td>
      </tr>
    </table>

### Exceptions

This rule is not applied in case of simple tables.

Tables are considered as such when the headers are either all in the first row, or all in the first column. The two conditions must not apply together.

Simple table example:

    <table border="1">
        <caption>Simple Table 1</caption>
        <tr>
            <th>Name</th>
            <th>Surname</th>
        </tr>
        <tr>
            <td>John</td>
            <td>Doe</td>
        </tr>
    </table>
    <table border="1">
        <caption>Simple Table 2</caption>
        <tr>
            <th>Name</th>
            <td>John</td>
        </tr>
        <tr>
            <th>Surname</th>
            <td>Doe</td>
        </tr>
    </table>

## Resources

- WCAG2, 1.3.1 - Info and Relationships
- WCAG2, H43 - Using id and headers attributes to associate data cells with header cells in data tables