SiteLint documentation and guidelines

Table row and column headers

Description

This rule ensures that data tables have clear and correctly defined row and column headers. Properly defining headers in data tables is crucial for accessibility, as it helps users, especially those who rely on assistive technologies, understand the relationships between the data presented. Headers provide context and meaning to the table’s contents, making it easier to navigate and interpret.

Disabilities impacted

  • Visual impairments: users with visual impairments rely on screen readers to navigate tables. Proper headers allow screen readers to announce the header information along with the cell data, providing the necessary context.
  • Cognitive disabilities: users with cognitive disabilities benefit from clearly defined headers that help organize and structure the data, aiding comprehension and reducing cognitive load.
  • Motor impairments: users with motor impairments who navigate using keyboards or other assistive devices can more easily understand and navigate tables with well-defined headers.

Why it matters

Properly defined table headers are essential for creating accessible data tables. They ensure that users can understand the structure and relationships within the table, regardless of how they interact with the content. Without clear headers, tables can become confusing and difficult to navigate, particularly for users who rely on assistive technologies.

Coding problems and solutions

Common coding problems

  • Missing headers: tables lack <th> elements to define headers.
  • Incorrect scope: the scope attribute of headers is not correctly set, leading to confusion in header-to-cell relationships.
  • Nested headers: complex tables with nested headers are not properly marked up, making it difficult for assistive technologies to convey the correct information.

How to fix it

Define headers using <th> elements

Use <th> elements to define both row and column headers.

Incorrect example
<table>
    <tr>
        <td>Name</td>
        <td>Age</td>
        <td>Occupation</td>
    </tr>
    <tr>
        <td>John Doe</td>
        <td>30</td>
        <td>Engineer</td>
    </tr>
</table>
Correct example
<table>
    <tr>
        <th scope="col">Name</th>
        <th scope="col">Age</th>
        <th scope="col">Occupation</th>
    </tr>
    <tr>
        <td>John Doe</td>
        <td>30</td>
        <td>Engineer</td>
    </tr>
</table>

Use the scope attribute correctly

Set the scope attribute to define the relationship between headers and cells.

Correct example
<table>
    <tr>
        <th scope="col">Name</th>
        <th scope="col">Age</th>
        <th scope="col">Occupation</th>
    </tr>
    <tr>
        <td>John Doe</td>
        <td>30</td>
        <td>Engineer</td>
    </tr>
    <tr>
        <th scope="row">Jane Smith</th>
        <td>25</td>
        <td>Designer</td>
    </tr>
</table>

Handle complex tables with nested headers

Use appropriate markup to handle complex tables, ensuring headers are correctly associated with their data cells.

Correct example
<table>
    <tr>
        <th rowspan="2" scope="col">Name</th>
        <th colspan="2" scope="colgroup">Details</th>
    </tr>
    <tr>
        <th scope="col">Age</th>
        <th scope="col">Occupation</th>
    </tr>
    <tr>
        <td>John Doe</td>
        <td>30</td>
        <td>Engineer</td>
    </tr>
    <tr>
        <td>Jane Smith</td>
        <td>25</td>
        <td>Designer</td>
    </tr>
</table>

Known limitations

  • Dynamic tables: for tables generated dynamically via JavaScript, ensure that headers are correctly inserted and associated with data cells. You can use the W3C Markup Validation Service to validate the table structure.
  • Large tables: in very large tables, ensure that headers are repeated or kept visible to maintain context as users navigate through the data.
  • Browser and screen reader variability: different browsers and screen readers may interpret table structures differently. Comprehensive testing across multiple platforms is recommended.

Resources