Inappropriate Headers Attribute Check

Description

The “Inappropriate Headers Attribute Check” evaluates whether there is any headers attribute used within table cells references an element from outside the table.

Example outcome

I found 1 headers attribute that refers to cells outside its table.

Impact

• Visual Impairments: Screen readers use the headers attribute to read the corresponding header for a data cell. If that reference leads to an element outside the table, the screen reader either doesn’t find the header, or, reads irrelevant or misleading information.
• Cognitive Disabilities: Complex tables already demand mental focus. Without correct header relationships, data loses context, increasing cognitive load and confusion.

Fixes

To address inappropriate headers attributes:

1. Locate the inappropriate headers attribute.
2. Ensure that the headers attribute only references ids of elements 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