Headers Attribute Check

Description

The “Headers Attribute Check” evaluates whether all headers attributes used within table cells correctly reference id attributes of other cells within the same table element.

Example outcome

I noticed that all headers attributes refer to cells in the same table.

Impact

• Visual Impairments: Screen readers rely on correct headers attributes to read out the corresponding column/row header for each data cell. If they’re broken or point to IDs outside the table, the data loses its context, leading to confusion or misinformation.
• Cognitive Disabilities: Some assistive tools provide simplified table views. If headers aren’t correctly referenced, these tools can’t reconstruct an understandable table view, causing cognitive overload.

Fixes

To address inappropriate headers attributes:

1. Locate the inappropriate headers attribute.
2. Ensure that the headers attribute only references an id of an element within the same <table>.
3. Verify that the id referenced by the headers attribute exists and is unique within the document.

Resources

• WCAG 2.2: Understanding Success Criteria 1.3.1
• WCAG 2.2 Techniques: Technique H43: Using id and headers attributes to associate data cells with header cells in data tables
• WebAIM: Creating Accessible Tables
• WebAIM: Semantic Structure: Regions, Headings, and Lists