Implement proper table headers references

***This document provides helpful tips to improve your site's accessibility. While it doesn’t guarantee 100% compliance, it’s a great starting point to make your website more inclusive and user-friendly.***

Identification

Table cells using headers attribute must reference cells within the same table (Rule ID: td-headers-attr)

Applicable Standards

• WCAG 2.0, 2.1, 2.2 Level A (1.3.1)

• Section 508 (1194.22)

• Trusted Tester (14.B)

• EN 301 549

Impact

Serious level impact affecting:

• Blind users

• Deafblind users

Proper Implementation

• Use scope attribute on th elements

• Properly associate data cells with header cells

• Use appropriate scope values: col, row, colgroup, rowgroup

• Ensure header references are within the same table

• Maintain proper table structure with thead, tbody, and th elements

Examples of Correct Usage

1. Simple Table with Proper headers Attribute:
   Each <td> has a headers attribute correctly referencing the id of the corresponding <th> within the same table, ensuring proper screen reader navigation.

2. Complex Table with Multiple Headers:
   The headers attribute in each <td> refers to the correct <th> elements, enabling screen readers to associate data cells with their corresponding headers.

3. Using Scope Instead of headers for Simple Tables:
   The scope="col" attribute is used instead of headers for simple tables, which is easier to implement and still ensures accessibility.

4. Properly Referencing Headers in a Merged Cell:
   A single data cell references multiple headers (task and owner), ensuring that screen readers can announce the correct context for the data.

Common Errors to Avoid

1. Missing Header References
   The <td> elements are missing the headers attribute, making it difficult for screen readers to associate data cells with their corresponding headers.

2. Incorrect Header References:
   The headers="q4" in the first <td> refers to a non-existent header, breaking the relationship between data cells and headers for screen reader users.

3. Referencing Headers Outside the Table:
   The headers="title" attribute references an element (<h1>) outside the table, which is not valid and causes accessibility issues.

4. Overusing headers for Simple Tables:
   The use of headers for every data cell in a simple table is unnecessary. The scope attribute is sufficient in this case.

5. Missing id on Header Cells:
   The <th> elements are missing id attributes, so the headers attribute in <td> elements cannot reference them.

Rationale

• Screen readers need proper table structure for navigation

• Headers association helps users understand data relationships

• Proper markup ensures accurate screen reader announcements

• Helps users navigate complex tables effectively

• Essential for understanding tabular data context

Evaluation Method

1. Inspect Table Structure

   • Confirm all <td> elements with headers attributes reference valid id values within the same table.

   • Verify that <th> elements have unique id attributes.

2. Test with a Screen Reader

   • Use a screen reader (e.g., NVDA, JAWS, VoiceOver) to navigate the table.

   • Ensure the screen reader correctly announces the associated headers when focusing on a data cell.

Evaluation Checklist