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
We're sorry to hear that. Please share your feedback so we can do better
Contact our Support team for immediate help while we work on improving our docs.
We're continuously improving our docs. We'd love to know what you liked
Is this page helping you?
Yes
No
We're sorry to hear that. Please share your feedback so we can do better
Contact our Support team for immediate help while we work on improving our docs.
We're continuously improving our docs. We'd love to know what you liked
Thank you for your valuable feedback!
