empty-table-header

Ensures that table headers have discernible text

Who might be affected

Screen Reader

Description

Table header elements should have visible text that describes its purpose.

Note that labelling ARIA attributes (i.e., aria-label, aria-labelledby) are not considered as a sufficient substitute, since the table headings text should be visible.

Quick Fixes

Ensure that table headings, i.e., <th> or an element with role="rowheader" or role="columnheader" attributes contains discernible text.

1<table>
2    <tr>
3        <th>
4            User ID
5        </th>
6        <th>
7            User name
8        </th>
9    </tr>
10</table>

How Users Are Affected

Table headings are essential for the user to perceive and understand the table data. The column and row headings give context and meaning to the table data. If table headings do not contain discernible text, some users will find it hard or even impossible to understand the table data. The lack of text in the table headings mainly affects reader users, since it is also used to indicate when switching rows or columns.

WCAG Success criteria

This issue might cause elements to fail one or more of the following Success criteria:
Best practice