Table headers - No ARIA tables and TF feedback #1971

ajanec01 · 2022-11-16T23:22:34Z

A few of changes to Table header cell has assigned cells.

The only reliably way of determining how table headers are assigned is in the HTML specification. It is unclear how ARIA table headers are assigned to cells so they are now omitted from the rule.

The update includes changes made in response to the 1st Task Force feedback and the 2nd Task Force feedback.

Closes #1545 and closes #1517

Call for review- 2 weeks

How to Review And Approve

Go to the “Files changed” tab
Here you will have the option to leave comments on different lines.
Once the review is completed, find the “Review changes” button in the top right, select “Approve” (if you are really confident in the rule) or "Request changes" and click “Submit review”.
Make sure to also review the proposed Call for Review period. In case of disagreement, the longer period wins.

…sue)

Why the rule focuses on HTML tables only and explaining how browsers treat columns and rows with one td

…to a td or th)

…lement

…ction

_rules/table-header-cell-has-assigned-cells-d0f69e.md

Jym77 · 2022-12-01T12:24:23Z

_rules/table-header-cell-has-assigned-cells-d0f69e.md

+  - **visible** the `table` element is [visible][]; and
+  - **minimum rows** the `table` element's [`rows` collection](https://html.spec.whatwg.org/multipage/tables.html#dom-table-rows) has 2 or more `tr` elements; and
+  - **non-empty data cell** the `table` element has at least one non-empty `td` element that is a [child][] of a `tr` element with the [`rowIndex`][rowindex] value of 1 or more if the `tr` element with the value of 0 has at least two `th` [children][child] or the value of 0 or more if the `tr` element with the value of 0 has one or less `th` [children][child].
+- **no explicit role** none of the elements that make up the [table model][] have an [explicit semantic role][].


What if the explicit role is the same as the implicit one? (<th role="rowheader">)
Plus, this seems to be a bullet in the outer list (used by the th) but rather refers to the table (i.e. the inner list).

I've chosen the safer version as we don't know for sure what browsers do when aria roles are added as it's not in the spec. UA have their own way of assigning headers when aria is used and at the moment we can only guess. I understand that the same implicit role would work fine in practice but I'm slightly concerned we may expose the rule to some weird, uncommon example that will be a false positive.

Do you think the rule will benefit from adding an exception for the same explicit role?

Hmm... this role applies to all the elements that make up the test target's table element, so table,thead, tbody,tr, etc. I thought that the table model definition was explicit enough. Open to suggestions on this.

Jym77 · 2022-12-01T12:25:20Z

_rules/table-header-cell-has-assigned-cells-d0f69e.md

+- **in a table** the `th` element is a [descendant][] of a `table` element for which all of the following are true:
+  - **visible** the `table` element is [visible][]; and
+  - **minimum rows** the `table` element's [`rows` collection](https://html.spec.whatwg.org/multipage/tables.html#dom-table-rows) has 2 or more `tr` elements; and
+  - **non-empty data cell** the `table` element has at least one non-empty `td` element that is a [child][] of a `tr` element with the [`rowIndex`][rowindex] value of 1 or more if the `tr` element with the value of 0 has at least two `th` [children][child] or the value of 0 or more if the `tr` element with the value of 0 has one or less `th` [children][child].
+- **no explicit role** none of the elements that make up the [table model][] have an [explicit semantic role][].


It seems that the th element is no more required to be visible or included in the accessibility tree 🤔

Sorry, not sure what you mean by this. Are you suggesting that the "included in the accessibility tree" part in the first paragraph of the applicability section is not necessary?

Jym77 · 2022-12-01T12:27:51Z

_rules/table-header-cell-has-assigned-cells-d0f69e.md

+- **in a table** the `th` element is a [descendant][] of a `table` element for which all of the following are true:
+  - **visible** the `table` element is [visible][]; and
+  - **minimum rows** the `table` element's [`rows` collection](https://html.spec.whatwg.org/multipage/tables.html#dom-table-rows) has 2 or more `tr` elements; and
+  - **non-empty data cell** the `table` element has at least one non-empty `td` element that is a [child][] of a `tr` element with the [`rowIndex`][rowindex] value of 1 or more if the `tr` element with the value of 0 has at least two `th` [children][child] or the value of 0 or more if the `tr` element with the value of 0 has one or less `th` [children][child].
+- **no explicit role** none of the elements that make up the [table model][] have an [explicit semantic role][].


I'm afraid the nested lists will prove difficult to read.
What about defining a "proper table" or something as a table element matching all the conditions here, and just require the th to be "part of a proper table"? The def might be re-usable by other rules about HTML tables.

Sure, sounds good to me!

_rules/table-header-cell-has-assigned-cells-d0f69e.md

Jym77 · 2022-12-01T12:31:00Z

_rules/table-header-cell-has-assigned-cells-d0f69e.md

- the element's closest ancestor in the [flat tree][] that is a [semantic][semantic role] [table][] or [grid][] is [included in the accessibility tree][].
+- **in a table** the `th` element is a [descendant][] of a `table` element for which all of the following are true:
+  - **visible** the `table` element is [visible][]; and
+  - **minimum rows** the `table` element's [`rows` collection](https://html.spec.whatwg.org/multipage/tables.html#dom-table-rows) has 2 or more `tr` elements; and


🤔 Not fully sure about that one.

<table> <tr> <th>Opening hours</th> <td>8-17</td> </tr> </table>

sounds like a reasonable case.
And

<table> <tr> <th>Opening hours</th> <th>Mon-Fri</th> <td>8-17</td> </tr> </table>

sounds like a bad one (where the first th is not assigned to anything due to the second one (or maybe it is still assigned to the second th, can't remember…))

(OTOH, restricting Applicability won't create false positives, so it won't really hurt…)

Agree with Jean-Yves. The first case is reasonable, and I can't come up with a good reason for us to ignore it.

The question is how much value we get out of that example? Not too much if you think that there is only one row and row headers are useful when you navigate between the rows. This change corresponds to Wilco's survey comments. I'm trying to avoid the below scenario:

<table> <thead> <tr> <td>N/a <th>2008 <th>2007 <th>2006 <tbody> <tr> <td> <td> <td> <td> </table>

Because tables are two dimensional the most we will get out of this rule if there will be at least two rows and there will be a non-empty data cell in a row that follows a column header row or in any of the rows providing that there are row headers in them.

Would you agree?

I don't understand how your example applies to this condition (your example has 2 rows, therefore this conditions applies) :-)

But I can live with this condition. As Jean-Yves mentioned, it will only limit what is applicable, not create false positives. Although I still can't see why we should not consider the one row example Jean-Yves described.

The problem that the above example introduces is that there is no use of the <th> elements, technically they do not have an assigned <td> element and they should not be column headers but the implementation varies. My condition requires at least one non-empty <td> element in the second row, meaning that it is clear visually that there is a relationship between a data cell and a column header cell.

Jym77 · 2022-12-01T12:35:59Z

_rules/table-header-cell-has-assigned-cells-d0f69e.md

+- **in a table** the `th` element is a [descendant][] of a `table` element for which all of the following are true:
+  - **visible** the `table` element is [visible][]; and
+  - **minimum rows** the `table` element's [`rows` collection](https://html.spec.whatwg.org/multipage/tables.html#dom-table-rows) has 2 or more `tr` elements; and
+  - **non-empty data cell** the `table` element has at least one non-empty `td` element that is a [child][] of a `tr` element with the [`rowIndex`][rowindex] value of 1 or more if the `tr` element with the value of 0 has at least two `th` [children][child] or the value of 0 or more if the `tr` element with the value of 0 has one or less `th` [children][child].


Also not sure about that due to multi-headers.

Opening hours: <table> <tr> <th rowspan="2">Morning</th> <th>Mon-Fri</th> <td>8-12</td> </tr> <tr>  <th>Sat-Sun</th> <td>10-12</td> </tr> <table>

would have at least 2 th children in the first row without it being a "headers row".

(here also, no real harm in restricting the Applicability)

_rules/table-header-cell-has-assigned-cells-d0f69e.md

Jym77 · 2022-12-01T12:41:36Z

_rules/table-header-cell-has-assigned-cells-d0f69e.md

+<html>
+	<head>
+		<meta charset="utf-8" />
+		<title>Failed Example 1</title>
+		<style>
+			table {
+				border-collapse: collapse;
+				border: hidden;
+			}
+			tr td,
+			tr th {
+				border: 1px solid grey;
+			}
+		</style>
+	</head>
+	<body>
+		<table>
+			<thead>
+				<tr>
+					<th>Rate</th>
+					<th>Value</th>
+				</tr>
+			</thead>
+			<tbody>
+				<tr>
+					<td>15%</td>
+				</tr>
+			</tbody>
+		</table>
+	</body>
+</html>


Suggested change

<html>

<head>

<meta charset="utf-8" />

<title>Failed Example 1</title>

<style>

table {

border-collapse: collapse;

border: hidden;

}

tr td,

tr th {

border: 1px solid grey;

}

</style>

</head>

<body>

<table>

<thead>

<tr>

<th>Rate</th>

<th>Value</th>

</tr>

</thead>

<tbody>

<tr>

<td>15%</td>

</tr>

</tbody>

</table>

</body>

</html>

<style>

table {

border-collapse: collapse;

border: hidden;

}

tr td,

tr th {

border: 1px solid grey;

}

</style>

<table>

<thead>

<tr>

<th>Rate</th>

<th>Value</th>

</tr>

</thead>

<tbody>

<tr>

<td>15%</td>

</tr>

</tbody>

</table>

(not sure how much the style is needed, though)

I thought it should be added in response to @kengdoj comment

From https://www.w3.org/TR/wai-aria-1.1/#columnheader: The columnheader establishes a relationship between it and all cells in the corresponding column. When there are no cells under a column header (as in Fail Ex 1), I don't think 1.3.1 requires that it can't be a column header without a data cell.

My point here is, visually looks like there is a cell for the second column header but programmatically there isn't one so it is a failure. Would you agree?

That pasted comment is from Q5 in the survey so I was a bit confused.

My survey comment for this example was in Q4 and is below. It didn't look like there's a cell to me, though I can understand that someone may assume one:

Fail Ex 1's table has no data cell under the second column and programmatically matches the presentation. Not sure this is a failure of 1.3.1.

carlosapaduarte · 2023-01-13T18:06:35Z

_rules/table-header-cell-has-assigned-cells-d0f69e.md

- the element's closest ancestor in the [flat tree][] that is a [semantic][semantic role] [table][] or [grid][] is [included in the accessibility tree][].
+- **in a table** the `th` element is a [descendant][] of a `table` element for which all of the following are true:
+  - **visible** the `table` element is [visible][]; and
+  - **minimum rows** the `table` element's [`rows` collection](https://html.spec.whatwg.org/multipage/tables.html#dom-table-rows) has 2 or more `tr` elements; and


Agree with Jean-Yves. The first case is reasonable, and I can't come up with a good reason for us to ignore it.

_rules/table-header-cell-has-assigned-cells-d0f69e.md

carlosapaduarte

Still some issues to keep working on

carlosapaduarte · 2023-01-16T19:09:11Z

_rules/table-header-cell-has-assigned-cells-d0f69e.md

- the element is [included in the accessibility tree][]; and
- the element has at least one ancestor in the [flat tree][] that is a [semantic][semantic role] [table][] or [grid][]; and
- the element's closest ancestor in the [flat tree][] that is a [semantic][semantic role] [table][] or [grid][] is [included in the accessibility tree][].
+- **in a table** the `th` element is a [descendant][] of a `table` element for which all of the following are true:


Suggested change

- **in a table** the `th` element is a [descendant][] of a `table` element for which all of the following are true:

- **in a table**: the `th` element is a [descendant][] of a `table` element for which all of the following are true:

Need to add the colon after the name of all conditions

carlosapaduarte · 2023-01-16T19:16:46Z

_rules/table-header-cell-has-assigned-cells-d0f69e.md

- the element's closest ancestor in the [flat tree][] that is a [semantic][semantic role] [table][] or [grid][] is [included in the accessibility tree][].
+- **in a table** the `th` element is a [descendant][] of a `table` element for which all of the following are true:
+  - **visible** the `table` element is [visible][]; and
+  - **minimum rows** the `table` element's [`rows` collection](https://html.spec.whatwg.org/multipage/tables.html#dom-table-rows) has 2 or more `tr` elements; and


I don't understand how your example applies to this condition (your example has 2 rows, therefore this conditions applies) :-)

But I can live with this condition. As Jean-Yves mentioned, it will only limit what is applicable, not create false positives. Although I still can't see why we should not consider the one row example Jean-Yves described.

carlosapaduarte · 2023-01-16T19:20:13Z

_rules/table-header-cell-has-assigned-cells-d0f69e.md

+- **in a table** the `th` element is a [descendant][] of a `table` element for which all of the following are true:
+  - **visible** the `table` element is [visible][]; and
+  - **minimum rows** the `table` element's [`rows` collection](https://html.spec.whatwg.org/multipage/tables.html#dom-table-rows) has 2 or more `tr` elements; and
+  - **non-empty data cell** the `table` element has at least one [non-empty][] `td` element that is a [child][] of a `tr` element with the [`rowIndex`][rowindex] value of 1 or more if the `tr` element with the value of 0 has at least two `th` [children][child] or the value of 0 or more if the `tr` element with the value of 0 has one or less `th` [children][child].


Suggested change

- **non-empty data cell** the `table` element has at least one [non-empty][] `td` element that is a [child][] of a `tr` element with the [`rowIndex`][rowindex] value of 1 or more if the `tr` element with the value of 0 has at least two `th` [children][child] or the value of 0 or more if the `tr` element with the value of 0 has one or less `th` [children][child].

- **non-empty data cell** the `table` element has at least one [non-empty][] `td` element that is a [child][] of a `tr` element with the [`rowIndex`][rowindex] value of 1 or more if the `tr` element with the value of 0 has at least two `th` [children][child]; or the value of 0 or more if the `tr` element with the value of 0 has one or less `th` [children][child].

Interestingly, this condition would make Jean-Yves' one row example, applicable.

_rules/table-header-cell-has-assigned-cells-d0f69e.md

Co-authored-by: Carlos Duarte <[email protected]>

HelenBurge · 2023-05-24T08:07:26Z

Hi @ajanec01 - I was wondering if there was any updates for this as waiting on it for a TF assignment I need to action.

FYI @kengdoj

ajanec01 · 2023-06-06T19:25:01Z

Hi @HelenBurge
Apologies but I won't be able to work on this for some time.

ajanec01 added 14 commits November 15, 2022 10:44

Changing the appliccability and expectation (focus on HTML tables only)

e8b989a

Minor editorial changes to the assumptions

32190c0

Providing more descriptive a11y support version (headers attribute is…

58fa4f2

…sue)

Adding information to background

a9a8ec6

Why the rule focuses on HTML tables only and explaining how browsers treat columns and rows with one td

Edits PE1 to ensure the table is exposed

166c316

Removes passed and failed examples with divs and ARIA roles

2dcf3eb

Updates PE3 with table element and ARIA

48f2c07

Editing passed and failed example descriptions (headers sis assigned …

23e6736

…to a td or th)

Adding note to applicability about having at least one non-empty td e…

ea094b2

…lement

Changing inapplicable examples to align with the new applicability se…

13c6ed2

…ction

Adding inaplicable example with empty th elements

55179d3

Changing title and desription to include the 'non-empty' phrase

0c3519c

Fixing spelling errors and removing unused links

8ae3826

Adding AJ as co-author

c0daf0e

ajanec01 added the Rule Update Use this label for an existing rule that is being updated label Nov 16, 2022

ajanec01 self-assigned this Nov 16, 2022

adding styles to FE1 to address kengdoj feedback

ad0f1ed

Jym77 self-requested a review November 24, 2022 15:14

ajanec01 added 11 commits November 29, 2022 11:25

Editing 'at least one non-empty td' part in Applicability

fcb6b5b

Editing applicability (adding sublist for table)

0e3a7b4

Fixing typo (follow in applicability)

705a283

aligning content as sublist (applicability)

f9696c9

Fixes list formatting (applicability)

255f74b

Changes inclusive descendant to descendant (applicability)

89be9c4

Ads definitions of content model and child

d70546d

refactoring the applicability

6e4549d

Fixes spelling and adds rowIndex to spelling-ignore

e6e2a03

Fixes rowIndex definition issues

1d201c8

Revisits inapplicable examples

d0f0ab8

Jym77 requested changes Dec 1, 2022

View reviewed changes

Adding JYM to co-authors

1a8e082

carlosapaduarte requested changes Jan 13, 2023

View reviewed changes

ajanec01 requested a review from carlosapaduarte January 15, 2023 15:42

ajanec01 added 2 commits January 15, 2023 15:59

defines non-empty and implements in examples

b93861a

Removes assumption that contradicts applicability

c3d97a7

ajanec01 mentioned this pull request Jan 15, 2023

"Table header cell has assigned cells" [d0f69e]: UA/AT seems to do more association than HTML specs. #1997

Open

carlosapaduarte requested changes Jan 16, 2023

View reviewed changes

ajanec01 and others added 3 commits February 12, 2023 11:23

removes presentation role conflict resolution as per Jym comment

10956cb

updates to aria 1.2. as per Carlos's comment

6cf870c

Update _rules/table-header-cell-has-assigned-cells-d0f69e.md

b4c044c

Co-authored-by: Carlos Duarte <[email protected]>

Jym77 mentioned this pull request Oct 24, 2023

Confusion about how "assigned" headings work with ARIA [d0f69e] #2127

Open

	- in a table the `th` element is a [descendant][] of a `table` element for which all of the following are true:
	- in a table: the `th` element is a [descendant][] of a `table` element for which all of the following are true:

	- non-empty data cell the `table` element has at least one [non-empty][] `td` element that is a [child][] of a `tr` element with the [`rowIndex`][rowindex] value of 1 or more if the `tr` element with the value of 0 has at least two `th` [children][child] or the value of 0 or more if the `tr` element with the value of 0 has one or less `th` [children][child].
	- non-empty data cell the `table` element has at least one [non-empty][] `td` element that is a [child][] of a `tr` element with the [`rowIndex`][rowindex] value of 1 or more if the `tr` element with the value of 0 has at least two `th` [children][child]; or the value of 0 or more if the `tr` element with the value of 0 has one or less `th` [children][child].

Table headers - No ARIA tables and TF feedback #1971

Are you sure you want to change the base?

Table headers - No ARIA tables and TF feedback #1971

Uh oh!

Conversation

ajanec01 commented Nov 16, 2022 • edited by Jym77 Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

How to Review And Approve

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

carlosapaduarte left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

HelenBurge commented May 24, 2023

Uh oh!

ajanec01 commented Jun 6, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

ajanec01 commented Nov 16, 2022 •

edited by Jym77

Loading

ajanec01 commented Jun 6, 2023 •

edited

Loading