Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

"Headers attribute specified on a cell refers to cells in the same table element" [a25f45]: require headers to be th elements #2110

Open
wants to merge 9 commits into
base: develop
Choose a base branch
from
Open

"Headers attribute specified on a cell refers to cells in the same table element" [a25f45]: require headers to be th elements #2110

Changes from 1 commit
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
09c53f4
Updates based on issue 1910
tombrunet Aug 31, 2023
06d58c3
Update _rules/table-headers-attribute-refer-to-data-cells-a25f45.md
tombrunet Oct 20, 2023
1b1f9b0
Merge branch 'develop' into issue-1910
tombrunet Oct 20, 2023
82bdd93
Merge branch 'develop' into issue-1910
Jym77 Dec 7, 2023
bae682a
Merge branch 'develop' into issue-1910
tombrunet Feb 27, 2024
c356b12
Merge branch 'act-rules:develop' into issue-1910
tombrunet Nov 21, 2024
9b997ca
Update table-headers-attribute-refer-to-data-cells-a25f45.md
tombrunet Nov 21, 2024
3ccf04b
Update table-headers-attribute-refer-to-data-cells-a25f45.md
tombrunet Nov 21, 2024
139863f
Update table-headers-attribute-refer-to-data-cells-a25f45.md
tombrunet Nov 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 6 additions & 5 deletions _rules/table-headers-attribute-refer-to-data-cells-a25f45.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ acknowledgments:
authors:
- Audrey Maniez
- Jey Nandakumar
- Tom Brunet
funding:
- WAI-Tools
---
Expand All @@ -36,7 +37,7 @@ This rule applies to any `headers` attribute specified on a [`cell`][] within a

## Expectation 1

Each target's [attribute value][] is a [set of space separated tokens][]. Each token is the value of the `id` attribute of an element, that is a [`cell`][] of the same [`table`][].
Each target's [attribute value][] is a [set of space separated tokens][]. Each token is the value of the `id` attribute of an element, which is a [`cell`][] of the same [`table`][] and is a `th` element.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would feel much better about this if we had some test data showing that referencing tds, with and without role=row/columnheader doesn't work. Would it be possible to get someone to do some testing before we say this definitely fails WCAG?

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It is at least invalid HTML: headers attribute, and shouldn't create a relationship: Forming relationship, step 7 only keeps the "headers".

Due to non-interference with the host language, I'd be surprised if that worked. But I agree we should test it nonetheless.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I used this as a test with just regular HTML:
https://codesandbox.io/s/table-test-68d78y?file=/index.html

JAWS doesn't care if the referenced element is a td or a th, it reads the referenced headings in both cases. Surprisingly, NVDA and desktop Voiceover seem to ignore the headers attribute and use the automatic calculation - they won't read td's, but they read the th at the top of the column rather than the th that I referenced via headers.

So, 2 of the 3 desktop screen readers don't handle headers properly even when they're referencing a th. The 3rd doesn't care if it's a td or a th. Given that, I'm having a hard time seeing how this rule has any real world value - the results don't seem to be a factor of what the headers attribute is referencing.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

To be clear, I was using Chrome on Mac, and Edge on Windows.

tombrunet marked this conversation as resolved.
Show resolved Hide resolved

## Expectation 2

Expand Down Expand Up @@ -110,14 +111,14 @@ The `headers` attribute on the cell refers to a `th` element within the same `ta

#### Passed Example 3

The `headers` attribute on the data cells in the second row refers to a `td` element with a role of `columnheader` within the same `table`.
The `headers` attribute on the data cells in the second row refers to a `th` element with a role of `columnheader` within the same `table`.

```html
<table>
<thead>
<tr>
<td role="columnheader" id="header1">Projects</td>
<td role="columnheader" id="header2">Objective</td>
<th role="columnheader" id="header1">Projects</th>
<th role="columnheader" id="header2">Objective</th>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Probably don't need the role anymore if we do this. If we're going to fail headers referencing td elements we should have a new failed example for it. What we have now references an element inside the cell, which I do think is a problem.

</tr>
</thead>
<tbody>
Expand Down Expand Up @@ -280,7 +281,7 @@ The `td` element has a `headers` attribute referring to its own ID.

#### Failed Example 4

The `headers` attribute on the data cells in the second row refers to an element inside the same `table` which does not have a role of `rowheader` or `columnheader`.
The `headers` attribute on the data cells in the second row refers to an element inside the same `table` which is not a [`cell`][] nor a `th` element.

```html
<table>
Expand Down