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.

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
34 changes: 28 additions & 6 deletions _rules/table-headers-attribute-refer-to-data-cells-a25f45.md
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 `th` element of the same [`table`][].

## Expectation 2

Expand All @@ -50,7 +51,7 @@ Each target's [attribute value][] is a [set of space separated tokens][], and no

## Accessibility Support

There are no accessibility support issues known.
Screen reader support for the `headers` attribute does not follow the HTML specification at this time. Some screen readers will allow `td` elements to be referenced by the `headers` attribute. Other screen readers will ignore the `headers` attribute completely and look for `th` elements within the column. Note also that HTML specification says that the `headers` element must reference a `th` element, but some screen readers allow `headers` to reference semantic headers (i.e., ARIA role defined) also.

## Background

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 id="header1">Projects</th>
<th id="header2">Objective</th>
</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 All @@ -303,6 +304,27 @@ The `headers` attribute on the data cells in the second row refers to an element
</table>
```

#### Failed Example 5

The `headers` attribute on the data cells refers to a `td` element within the same `table` and not a `th` element.

```html
<table>
<thead>
<tr>
<td id="header1">Projects</td>
<td id="header2">Objective</td>
</tr>
</thead>
<tbody>
<tr>
<td headers="header1">15%</td>
<td headers="header2">10%</td>
</tr>
</tbody>
</table>
```

### Inapplicable

#### Inapplicable Example 1
Expand Down
Loading