Table cells that use the headers attribute must only refer to cells in the same table

Serious

What is the problem?

The td-headers-attr rule ensures that table cells are correctly linked to their corresponding header cells.

Impacted Groups

Blind
Deafblind

Why is this important?

For people using screen readers, clear table structure is crucial for understanding the data. Without proper header-cell relationships, screen readers may struggle to interpret the table's content, making it difficult to understand the information.

How to solve this issue

To fix this issue, use the scope attribute on header cells to indicate the cells they apply to. For example, scope="col" for column headers and scope="row" for row headers. The scope attribute clarifies relationships within a table for browsers and screen readers. It indicates that all cells below a column header are associated with that header, and all cells to the right of a row header are associated with that header. This helps screen readers correctly associate header and data cells, improving the overall user experience.

Rule Information

Rule ID

td-headers-attr

Severity

Serious

Manual Review Required

Yes

Rule Group

WCAG 2.0 Level A & AA Rules

Guidelines

  • WCAG 2.1 (A)
  • WCAG 2.0 (A)
  • WCAG 2.2 (A)
  • Section 508
  • Trusted Tester
  • EN 301 549

Customise Guidance

You can customise each accessibility rule in SiteAlly with your own guidance, instructions and even links to your own organisation specific documentation.

Enable your website editors to resolve issues quickly with SiteAlly.

Ready to make your website accessible?

SiteAlly provides automated accessibility monitoring, detailed reports, and step-by-step guidance to help you achieve and maintain compliance.