Digital Accessibility Knowledge Base

    td-has-header

    All non-empty <td> elements in tables larger than 3 by 3 must have an associated table header

    Who might be affected
    Screen Reader

    Description

    A complete understanding of tabular data depends considerably on understanding the context of each of the cells (i.e., under the context of which column and/or row it is presented). A seeing person can grasp the context of each cell by glancing at the table according to its location on the table layout. Screen reader users, on the other hand, lack this overview context and must consume the content by traversing the cells in two dimensions (switching between rows and columns). Therefore particularly on large tables, screen reader users can easily lose a cell's context when its rows and columns don't have headers.

    Quick Fixes

    Ensure that every non-empty cell on tables with 3x3 cells or more is appropriately associated with a table header. Note that you might have to use the "scope" attribute to accurately associate table cells with their table headings.

    1✓
    2<table>
    3    <tr>
    4        <th scope="col">Product</th>
    5	  <th scope="col">Quantity</th>
    6	  <th scope="col">Month</th>
    7        <th scope="col">Amount</th>
    8    </tr>
    9    <tr>
    10        <th scope="row">Pencils</th>
    11        <td>200</td>
    12        <td>January</td>
    13        <td>$100</td>
    14    </tr>
    15    <tr>
    16        <th scope="row">Pens</th>
    17        <td>40</td>
    18        <td>February</td>
    19        <td>$80</td>
    20    </tr>
    21    <tr>
    22        <th scope="row">Erasers</th>
    23        <td>50</td>
    24        <td>February</td>
    25        <td>$15</td>
    26    </tr>
    27</table>
    1✗
    2<table>
    3    <tr>
    4        <td>Product</td>
    5	  <td">Quantity</td>
    6	  <td>Month</td>
    7        <td>Amount</td>
    8    </tr>
    9    <tr>
    10        <td>Pencils</td>
    11        <td>200</td>
    12        <td>January</td>
    13        <td>$100</td>
    14    </tr>
    15    <tr>
    16        <td>Pens</td>
    17        <td>40</td>
    18        <td>February</td>
    19        <td>$80</td>
    20    </tr>
    21    <tr>
    22        <td>Erasers</td>
    23        <td>50</td>
    24        <td>February</td>
    25        <td>$15</td>
    26    </tr>
    27</table>

    How Users Are Affected

    When table cells on large tables (3x3 cells or more) are not associated with headings, screen-reader users might lose their context and hence find it difficult to consume the tabular data accurately and efficiently.

    WCAG Success criteria

    This issue might cause elements to fail one or more of the following Success criteria:
    1.3.1 Info and Relationships (A)