td-headers-attr

The headers attribute in a <table> element must refer to a cell within the same table.

Description

To provide clear context for screen readers, table headers (<th>) should utilize the scope attribute to specify the group of cells they pertain to and define how the table should be interpreted. The scope attribute enhances the understanding of table headers by associating them with the relevant cells.

Why is it important?

Properly marking up tables is crucial for accurate and understandable screen reader output. While sighted users can visually determine the table’s headers and their relationship to the data, this information needs to be conveyed in the markup for non-sighted users. When a data table is designed with accessibility in mind, users can enter table navigation mode, enabling them to navigate through the table cell by cell while the screen reader announces the corresponding table headers for the data cells. This feature is particularly beneficial when dealing with large data tables or when cells contain similar-sounding data that could cause confusion.

How to fix?

To ensure proper association between table headers and the corresponding table data, it is important to include the “scope” attribute in table headers. By adding the “scope” attribute, you can accurately associate the headers with the appropriate data cells in the table.

Tags

cat.tables, wcag2a, wcag131, section508, section508.22.g

References

• WCAG 1.3.1: Info and Relationships
• Deque University: td-headers-attr
• Accessibility Insights: td-headers-attr
• Evinced Digital Accessibility Knowledge Base: td-headers-attr