empty-table-header

Description

All tables used in a webpage should have visible table headers defined. Defining table headers using non-visible attributes like aria-label is not enough.

Example

In the following example, the first <th> element is empty. This makes the table inaccessible to screen readers and other assistive technologies. Hence, such empty table headers break the empty-table-header best practice rule.

In contrast, the following code snippet uses understandable <th> elements on all columns. These table headers help to keep the table accessible. Hence, the following example doesn’t break the empty-table-header best practice rule.

How to fix?

You can follow these steps to fix issues if this rule gets flagged:

• Check if your site uses tables. If so, define table headers using visible text elements.

  Reference

• WCAG : Tables tutorial