td-headers-attr

Make sure that when using a header attribute on a table cell, it should refer to header cells within the same table itself.

Description

This issue emerges when you use the header attribute on a table cell but reference a header cell which isn’t present within the same table or within another table entirely.

Why is it important?

Adhering to this rule is essential because it guarantees that visually impaired users, who rely on screen readers, can navigate and comprehend table content seamlessly. Neglecting this guideline can create confusion and frustration for these users, contrasting with the ease with which sighted users can interpret tables visually.

How to fix?

• Ensure that the headers attribute used on <td> element in a table points to a <th> element within the same table itself. This is especially important for very complex tables.

• However, in simpler cases, using the scope attribute is usually enough and easier to use. You can find more information on creating accessible tables here.

References

• WCAG 1.3.1: Info and Relationships
• Accessibility Insights: td-headers-attr