Digital Accessibility Knowledge Base

    table-fake-caption

    Data or header cells should not be used to give caption to a data table

    Who might be affected
    Screen Reader

    Description

    A table caption provides the user with the context of the tabular data; however, when the caption is displayed within one of the table cells, screen reader users will perceive it as part of the data in the table, which can lead to ambiguity of the table data and its context.

    Quick Fixes

    In cases where a table requires a visible title, use the table caption element (i.e., <caption>). In any case, avoid using table cells for displaying any content that is not part of the explicit data that the table is handling.

    1✗
    2<table>
    3    <thead>
    4        <tr>
    5            <th colspan="6" scope="colgroup">Class Timetable</th>
    6        </tr>
    7        <tr>
    8            <th scope="col">Hour</th>
    9            <th scope="col">Mon</th>
    10            <th scope="col">Tue</th>
    11            <th scope="col">Wed</th>
    12            <th scope="col">Thu</th>
    13            <th scope="col">Fri</th>
    14        </tr>
    15    </thead>
    16    <tbody>
    17        <tr>
    18            <th scope="row">8:00</th>
    19            <td>Math</td>
    20            <td>Math</td>
    21            <td>Literature</td>
    22            <td>History</td>
    23            <td>English</td>
    24        </tr>
    25        <tr>
    26            <th scope="row">9:00</th>
    27            <td>English</td>
    28            <td>Science</td>
    29            <td>Music</td>
    30            <td>History</td>
    31            <td>Math</td>
    32        </tr>
    33        <tr>
    34            <th scope="row">10:00</th>
    35            <td>English</td>
    36            <td>Math</td>
    37            <td>Science</td>
    38            <td>Science</td>
    39            <td>History</td>
    40        </tr>
    41    </tbody>
    42</table>
    1✓
    2<table>
    3    <caption>Class Timetable</caption>
    4    <thead>
    5        <tr>
    6            <th scope="col">Hour</th>
    7            <th scope="col">Mon</th>
    8            <th scope="col">Tue</th>
    9            <th scope="col">Wed</th>
    10            <th scope="col">Thu</th>
    11            <th scope="col">Fri</th>
    12        </tr>
    13    </thead>
    14    <tbody>
    15        <tr>
    16            <th scope="row">8:00</th>
    17            <td>Math</td>
    18            <td>Math</td>
    19            <td>Literature</td>
    20            <td>History</td>
    21            <td>English</td>
    22        </tr>
    23        <tr>
    24            <th scope="row">9:00</th>
    25            <td>English</td>
    26            <td>Science</td>
    27            <td>Music</td>
    28            <td>History</td>
    29            <td>Math</td>
    30        </tr>
    31        <tr>
    32            <th scope="row">10:00</th>
    33            <td>English</td>
    34            <td>Math</td>
    35            <td>Science</td>
    36            <td>Science</td>
    37            <td>History</td>
    38        </tr>
    39    </tbody>
    40</table>

    How Users Are Affected

    Screen reader users might not be able to distinguish between the table caption (which should provide the context of the entire table) and the headings within it (which should reflect the context of each column/row)

    WCAG Success criteria

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