Ensure that <th> elements and elements with role=columnheader/rowheader have data cells they describe

In data tables, each header cell (<th>) should be properly associated with corresponding data cells (<td>) to convey clear relationships between header and data content.

About This Rule

This guideline ensures that table headers are correctly associated with data cells, enhancing accessibility for users who rely on assistive technologies. Adhering to this practice aligns with the following standards:

• WCAG 2.1 (A): 1.3.1 Info and Relationships
• WCAG 2.0 (A): 1.3.1 Info and Relationships
• WCAG 2.2 (A): 1.3.1 Info and Relationships
• Section 508: 1194.22(g) - Row and column headers shall be identified for data tables.
• Trusted Tester: 14.B - All data cells are programmatically associated with relevant headers.
• EN 301 549: 9.1.3.1 Info and Relationships

Why It Matters

Screen readers rely on accurate table markup to interpret and announce the relationships between headers and data cells. Improperly marked-up tables can lead to confusing or inaccurate output, hindering users' ability to understand the table's content and structure. Ensuring that each <th> element is associated with relevant data cells enhances accessibility for users with visual impairments.

How to Fix

To ensure proper associations:

• Use the scope Attribute: Assign the scope attribute to <th> elements to define whether they act as headers for rows, columns, or groups.
  

  <table>
    <thead>
      <tr>
        <th scope="col">Last Name</th>
        <th scope="col">First Name</th>
        <th scope="col">City</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Doe</td>
        <td>John</td>
        <td>New York</td>
      </tr>
      <!-- Additional rows -->
    </tbody>
  </table>

• Avoid Using the headers Attribute in <th> Elements: The headers attribute should not be used within <th> elements. Instead, utilize the scope attribute to define header associations.
• Ensure Each <th> Has Associated Data Cells: Verify that every <th> element serves as a header for one or more <td> elements within the same table.

Examples

Incorrect

A table with <th> elements using incorrect scope attributes:

<table>
  <tr>
    <th scope="row">Last Name</th>
    <th scope="row">First Name</th>
    <th scope="row">City</th>
  </tr>
  <tr>
    <td>Doe</td>
    <td>John</td>
    <td>New York</td>
  </tr>
  <!-- Additional rows -->
</table>

Correct

A table with <th> elements using appropriate scope attributes:

<table>
  <tr>
    <th scope="col">Last Name</th>
    <th scope="col">First Name</th>
    <th scope="col">City</th>
  </tr>
  <tr>
    <td>Doe</td>
    <td>John</td>
    <td>New York</td>
  </tr>
  <!-- Additional rows -->
</table>

More Information

• W3C: Using id and headers attributes to associate data cells with header cells in data tables