diff --git a/__tests__/spelling-ignore.yml b/__tests__/spelling-ignore.yml
index c3c40c8ba44..241a55bdb06 100755
--- a/__tests__/spelling-ignore.yml
+++ b/__tests__/spelling-ignore.yml
@@ -168,6 +168,8 @@
- isComposing
- x1
- y1
+- rowIndex
+- textContent
# DOM Events
- auxclick
diff --git a/_rules/table-header-cell-has-assigned-cells-d0f69e.md b/_rules/table-header-cell-has-assigned-cells-d0f69e.md
index f950a3bc666..dc7bc920a61 100755
--- a/_rules/table-header-cell-has-assigned-cells-d0f69e.md
+++ b/_rules/table-header-cell-has-assigned-cells-d0f69e.md
@@ -1,9 +1,9 @@
---
id: d0f69e
-name: Table header cell has assigned cells
+name: Non-empty table header cell is assigned to a cell
rule_type: atomic
description: |
- This rule checks that each table header has assigned cells in a table element.
+ This rule checks that each non-empty table header is assigned to at least one cell.
accessibility_requirements:
wcag20:1.3.1: # Info and Relationships (A)
forConformance: true
@@ -16,7 +16,9 @@ input_aspects:
- DOM Tree
acknowledgments:
authors:
+ - Aron Janecki
- Audrey Maniez
+ - Jean-Yves Moyen
- Jey Nandakumar
funding:
- WAI-Tools
@@ -24,34 +26,35 @@ acknowledgments:
## Applicability
-This rule applies to any [HTML element][] with a [semantic][semantic role] [rowheader][] or [columnheader][] for which all of the following is true:
+This rule applies to any [non-empty][] `th` element that is [included in the accessibility tree][], has a [semantic role][] of [rowheader][] or [columnheader][], and for which all of the following are true:
-- the element is [visible][]; and
-- 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:
+ - **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][].
## Expectation
-Each target element is [assigned][] to at least one element with an [inheriting semantic][] [cell][].
+Each target element is [assigned][] to at least one `td` or `th` element.
## Assumptions
-This rule assumes that table header cells have a relationship conveyed through presentation with other cells within the same table. This excludes edge cases such as a table definition where there is only one header cell, or a table definition where there are multiple headers and no other cells. In such scenarios the rule fails, but [success criterion 1.3.1 Info and Relationships][sc1.3.1] could still be satisfied.
+This rule assumes that table header cells have a relationship with other cells within the same table, conveyed through presentation .
## Accessibility Support
-- Table markup and header cell association is not well supported by some popular assistive technologies. Passing this rule can still cause issues for users of those assistive technologies.
-- Implementation of [Presentational Roles Conflict Resolution][] varies from one browser or assistive technology to another. Depending on this, some elements can have one of the applicable [semantic roles][semantic role] and fail this rule with some technology but users of other technologies would not experience any accessibility issue.
+Some popular combinations of browsers and assistive technologies disregard the `headers` attribute depending on the structure of the `table` element.
## Background
-The roles inheriting from `cell` are `columnheader`, `gridcell`, and `rowheader`.
+The [HTML specification](https://html.spec.whatwg.org/) contains the [internal algorithm for scanning and assigning header cells](https://html.spec.whatwg.org/multipage/tables.html#internal-algorithm-for-scanning-and-assigning-header-cells) which indicates that the `th` elements with a `scope` [attribute value][] of `auto`, and both a data cell in their row and one in their column are neither row header nor column header. However, some browsers give those `th` elements a table header role and this process is not standardized. One browser may evaluate such `th` elements as [rowheader][] whereas other browsers may evaluate the same `th` elements as [columnheader][]. This is likely not going to convey the relationship conveyed through presentation.
-### Bibliography
+This rule does not apply to tables and grids built using [WAI-ARIA 1.2][] [explicit semantic roles][explicit semantic role] as it is not clear how the process of assigning table headers works for such elements.
- [Understanding Success Criterion 1.3.1: Information and relationships][sc1.3.1]
- [H43: Using id and headers attributes to associate data cells with header cells in data tables](https://www.w3.org/WAI/WCAG21/Techniques/html/H43)
+- [H63: Using the scope attribute to associate header cells and data cells in data tables](https://www.w3.org/WAI/WCAG21/Techniques/html/H63)
- [Forming relationships between data cells and header cells][assigned]
## Test Cases
@@ -60,47 +63,24 @@ The roles inheriting from `cell` are `columnheader`, `gridcell`, and `rowheader`
#### Passed Example 1
-This `th` element has an assigned `td` element.
+This `th` element is [assigned][] to at least one `td` element.
```html
Time |
+ Date |
05:41 |
+ 12/07/2021 |
```
#### Passed Example 2
-Each of the 2 `span` elements with role of `columnheader` has assigned `span` elements with a role of `cell`.
-
-```html
-
-
-
- Month
- Top Temperature
-
-
-
-
- July
- 40 C
-
-
- August
- 45 C
-
-
-
-```
-
-#### Passed Example 3
-
-Each of the 2 `th` elements has an assigned `td` element because this `td` element spans 2 columns.
+Each of the 2 `th` elements is assigned to the `td` element because this `td` element spans 2 columns.
```html
@@ -118,23 +98,23 @@ Each of the 2 `th` elements has an assigned `td` element because this `td` eleme
```
-#### Passed Example 4
+#### Passed Example 3
-Each of the 4 `th` elements has an assigned `td` element, within the same `table` element having a [semantic role][] of `grid`.
+Each of the 4 [non-empty][] `th` elements is assigned to a `td` element, within the same `table` element.
```html
-
+
-
- |
- Breakfast |
- Lunch |
- Dinner |
+
+ |
+ Breakfast |
+ Lunch |
+ Dinner |
-
- Day 1 |
+
+ Day 1 |
8:00 |
13:00 |
18:00 |
@@ -143,28 +123,31 @@ Each of the 4 `th` elements has an assigned `td` element, within the same `table
```
-#### Passed Example 5
+#### Passed Example 4
-Each of the 2 `th` elements has an assigned `td` element because the `headers` attribute assigns the `th` with `id` equal to "col2" to the `td` element.
+Each of the 4 `th` elements is assigned to at least one `td` element because all of the `id` values for the `th` elements are referenced by the value of the `headers` attribute on `td` elements.
```html
- Cities |
- Count |
+ Projects |
+ Objective |
- Paris |
+ 1 |
+ 2 |
- 1 |
+ 45% |
+ 20% |
+ 25% |
```
-#### Passed Example 6
+#### Passed Example 5
-Each of the 5 `th` elements in this table has assigned cells, whether data or header.
+Each of the 5 `th` elements is assigned to a `td` or a `th` element.
```html
@@ -193,27 +176,45 @@ Each of the 5 `th` elements in this table has assigned cells, whether data or he
#### Failed Example 1
-The `th` element with text "Value" does not have an assigned cell within the same `table` element.
+The `th` element with text "Value" is not assigned to a `td` or a `th` element.
```html
-
-
-
- Rate |
- Value |
-
-
-
-
- 15% |
-
-
-
+
+
+
+ Failed Example 1
+
+
+
+
+
+
+ Rate |
+ Value |
+
+
+
+
+ 15% |
+
+
+
+
+
```
#### Failed Example 2
-This `th` element with `id` equal to "col2" does not have an assigned cell within the same `table` element because the `headers` attribute removes the cell association from its column.
+This `th` element with `id` equal to "col2" is not assigned to a `td` or a `th` element because the `headers` attribute removes the cell association from its column.
```html
@@ -228,30 +229,11 @@ This `th` element with `id` equal to "col2" does not have an assigned cell withi
```
-#### Failed Example 3
-
-This `div` with role of `columnheader` and text equal to "Occupant" does not have an assigned cell within the same `table` element.
-
-```html
-
-```
-
### Inapplicable
#### Inapplicable Example 1
-There are no elements with a [semantic role][] of `header` within the `table` element.
+There are no `th` elements with a [semantic role][] of [rowheader][] or [columnheader][] within the `table` element.
```html
@@ -263,7 +245,7 @@ There are no elements with a [semantic role][] of `header` within the `table` el
#### Inapplicable Example 2
-There are no elements with a [semantic role][] of `header` within the `table` element.
+There are no `th` elements within the `table` element.
```html
@@ -271,12 +253,12 @@ There are no elements with a [semantic role][] of `header` within the `table` el
#### Inapplicable Example 3
-This `th` element has an [explicit role][] of `cell` and there are no more elements with a [semantic role][] of `header` within the `table` element.
+This `th` element has an [explicit semantic role][] of `columnheader`.
```html
- Column A |
+ Column A |
Cell A |
@@ -286,7 +268,24 @@ This `th` element has an [explicit role][] of `cell` and there are no more eleme
#### Inapplicable Example 4
-This `th` element is neither [visible][] nor [included in the accessibility tree][] and there are no more elements with a [semantic role][] of `header` within the `table` element.
+This `tbody` element has an [explicit semantic role][] of `rowgroup`.
+
+```html
+
+
+
+ Column A |
+
+
+
+ Cell A |
+
+
+```
+
+#### Inapplicable Example 5
+
+This `th` element is not [included in the accessibility tree][] because of the `style="display: none;"` attribute and there are no more `th` elements within the `table` element.
```html
@@ -299,9 +298,9 @@ This `th` element is neither [visible][] nor [included in the accessibility tree
```
-#### Inapplicable Example 5
+#### Inapplicable Example 6
-This `th` element is not [included in the accessibility tree][] and there are no more elements with a [semantic role][] of `header` within the `table` element.
+This `th` element is not [included in the accessibility tree][] because of the `aria-hidden="true"` attribute and there are no more `th` elements within the `table` element.
```html
@@ -314,9 +313,9 @@ This `th` element is not [included in the accessibility tree][] and there are no
```
-#### Inapplicable Example 6
+#### Inapplicable Example 7
-This `th` element is not a descendant in the [flat tree][] of a [semantic][semantic role] `table` or `grid`.
+This `th` element is not an [descendant][] of a `table` element.
```html
@@ -326,9 +325,9 @@ This `th` element is not a descendant in the [flat tree][] of a [semantic][seman
```
-#### Inapplicable Example 7
+#### Inapplicable Example 8
-This `th` element is part of a table which is not [included in the accessibility tree][].
+This `th` element does not have a [semantic role][] of a `columnheader` through the use of `role="presentation"` on the `table` element.
```html
@@ -341,18 +340,80 @@ This `th` element is part of a table which is not [included in the accessibility
```
+#### Inapplicable Example 9
+
+This `table` element has only one `tr` element as its [descendant][].
+
+```html
+
+```
+
+#### Inapplicable Example 10
+
+This `table` element is not [visible][].
+
+```html
+
+```
+
+#### Inapplicable Example 11
+
+This `table` element does not have a [non-empty][] `td` element.
+
+```html
+
+
+ Country |
+ Capital |
+
+
+ |
+ |
+
+
+```
+
+#### Inapplicable Example 12
+
+There are no [non-empty][] `th` elements in the `table` element.
+
+```html
+
+
+ |
+ |
+
+
+ United Kingdom |
+ London |
+
+
+```
+
+[attribute value]: #attribute-value 'Definition of attribute value'
+[non-empty]: #non-empty 'Definition of non-empty'
+[child]: https://dom.spec.whatwg.org/#concept-tree-child 'Definition of child'
+[explicit semantic role]: #explicit-role 'Definition of explicit semantic role'
+[rowindex]: https://html.spec.whatwg.org/multipage/tables.html#dom-tr-rowindex 'Definition of rowIndex'
[semantic role]: #semantic-role 'Definition of semantic role'
[visible]: #visible 'Definition of visible'
-[inheriting semantic]: #inheriting-semantic 'Definition of Inheriting Semantic Role'
[included in the accessibility tree]: #included-in-the-accessibility-tree 'Definition of included in the accessibility tree'
+[descendant]: https://dom.spec.whatwg.org/#concept-tree-descendant 'Definition of descendant'
[assigned]: https://html.spec.whatwg.org/multipage/tables.html#header-and-data-cell-semantics 'Forming relationships between data cells and header cells'
-[cell]: https://www.w3.org/TR/wai-aria-1.1/#cell 'ARIA cell role'
-[flat tree]: https://drafts.csswg.org/css-scoping/#flat-tree 'Definition of flat tree'
-[table]: https://www.w3.org/TR/wai-aria-1.1/#table 'ARIA table role'
-[grid]: https://www.w3.org/TR/wai-aria-1.1/#grid 'ARIA grid role'
[columnheader]: https://www.w3.org/TR/wai-aria-1.1/#columnheader 'ARIA columnheader role'
[rowheader]: https://www.w3.org/TR/wai-aria-1.1/#rowheader 'ARIA rowheader role'
-[explicit role]: #explicit-role 'Definition of Explicit Role'
[presentational roles conflict resolution]: https://www.w3.org/TR/wai-aria-1.1/#conflict_resolution_presentation_none 'Presentational Roles Conflict Resolution'
+[table model]: https://html.spec.whatwg.org/multipage/tables.html#table-model 'Definition of table model'
[sc1.3.1]: https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships.html 'Understanding Success Criterion 1.3.1: Info and Relationships'
-[html element]: #namespaced-element
+[wai-aria 1.2]: https://www.w3.org/TR/wai-aria-1.2/ 'WAI-ARIA 1.2'
diff --git a/pages/glossary/non-empty.md b/pages/glossary/non-empty.md
new file mode 100644
index 00000000000..9c5b4732bc4
--- /dev/null
+++ b/pages/glossary/non-empty.md
@@ -0,0 +1,12 @@
+---
+title: Non-empty
+key: non-empty
+unambiguous: true
+objective: true
+input_aspects:
+ - Accessibility tree
+ - CSS styling
+ - DOM tree
+---
+
+A _non-empty_ element is an element that has a `textContent` property that is neither empty (`""`) nor only [ASCII whitespace](https://infra.spec.whatwg.org/#ascii-whitespace).