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 + +
TimeDate
05:4112/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 - +
- - - - - + + + + + - - + + @@ -143,28 +123,31 @@ Each of the 4 `th` elements has an assigned `td` element, within the same `table
BreakfastLunchDinner
BreakfastLunchDinner
Day 1
Day 1 8:00 13:00 18:00
``` -#### 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 - - + + - + + - + + +
CitiesCountProjectsObjective
Paris12
145%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 -
- - - - - - - - - - - -
RateValue
15%
+ + + + Failed Example 1 + + + + + + + + + + + + + + + +
RateValue
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 -
-
-
Room
-
Occupant
-
-
-
1A
-
-
-
2A
-
-
-``` - ### 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 - + @@ -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 AColumn A
Cell A
+ + + + + + + + +
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 + + + + +
Time
+``` + +#### Inapplicable Example 10 + +This `table` element is not [visible][]. + +```html + + + + + + + +
Time
12:00
+``` + +#### Inapplicable Example 11 + +This `table` element does not have a [non-empty][] `td` element. + +```html + + + + + + + + + +
CountryCapital
+``` + +#### Inapplicable Example 12 + +There are no [non-empty][] `th` elements in the `table` element. + +```html + + + + + + + + + +
United KingdomLondon
+``` + +[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).