From 593ab3d8e5dda83896843766a3a63faf3c257132 Mon Sep 17 00:00:00 2001 From: Jean-Yves Moyen Date: Thu, 11 Jan 2024 11:16:00 +0100 Subject: [PATCH 1/9] Add definition of ARIA attribute set --- pages/glossary/aria-attribute-set.md | 30 ++++++++++++++++++++++++++++ 1 file changed, 30 insertions(+) create mode 100644 pages/glossary/aria-attribute-set.md diff --git a/pages/glossary/aria-attribute-set.md b/pages/glossary/aria-attribute-set.md new file mode 100644 index 0000000000..b3ea2ec439 --- /dev/null +++ b/pages/glossary/aria-attribute-set.md @@ -0,0 +1,30 @@ +--- +title: ARIA state or property is set +key: aria-attribute-set +unambiguous: true +objective: true +input_aspects: + - Accessibility tree + - CSS styling + - DOM tree +--- + +An ARIA [state][aria state] or [property][aria property] is set on an [HTML element][namespaced element] when it has a value. This may happens in three ways: + +- It is explicitly set if there is a corresponding `aria-*` HTML attribute on the element, whose value is valid for this ARIA [state][aria state] or [property][aria property]. + + For example, `aria-label` is explicitly set on ``. + +- It is implicitly set if there is no corresponding `aria-*` HTML attribute on the element, but the element has an [implicit semantic role][implicit role] that has a value for this ARIA [state][aria state] or [property][aria property] defined in [HTML Attribute State and Property Mappings][aria attribute mapping]. + + For example, `aria-checked` is implicitly set on ``. + +- It is set by default if there is no corresponding `aria-*` HTML attribute on the element, and the element has an [implicit semantic role][implicit role] that has a default value for this ARIA [state][aria state] or [property][aria property]. + + For example, `aria-expanded` is set by default on `
Details
`. + +[aria attribute mapping]: https://www.w3.org/TR/html-aam-1.0/#html-attribute-state-and-property-mappings 'HTML Attribute State and Property Mappings' +[aria property]: https://www.w3.org/TR/wai-aria-1.2/#dfn-property 'Definition of ARIA Property' +[aria state]: https://www.w3.org/TR/wai-aria-1.2/#dfn-state 'Definition of ARIA State' +[implicit role]: #implicit-role 'Definition of Implicit Semantic Role' +[namespaced element]: #namespaced-element 'Definition of Namespaced Element' From 07a1a6eaa2783edf6921ef3c43716992c2d3289a Mon Sep 17 00:00:00 2001 From: Jean-Yves Moyen Date: Thu, 11 Jan 2024 11:22:51 +0100 Subject: [PATCH 2/9] Use new definition in required states --- ...e-required-states-and-properties-4e8ab6.md | 40 ++++++++++++++----- pages/glossary/aria-attribute-set.md | 2 +- 2 files changed, 31 insertions(+), 11 deletions(-) diff --git a/_rules/role-required-states-and-properties-4e8ab6.md b/_rules/role-required-states-and-properties-4e8ab6.md index 0384762a13..42639356de 100755 --- a/_rules/role-required-states-and-properties-4e8ab6.md +++ b/_rules/role-required-states-and-properties-4e8ab6.md @@ -31,11 +31,13 @@ acknowledgments: ## Applicability -This rule applies to any [HTML or SVG element][] that is [included in the accessibility tree][] and has an [explicit semantic role][], except if the element has an [implicit semantic role][] that is identical to the [explicit semantic role][]. +This rule applies to any [HTML or SVG element][] that is [included in the accessibility tree][]. ## Expectation -For each test target, the [WAI-ARIA required states and properties][] for the role are set and not empty (`""`), unless the state or property has a default value listed under [WAI-ARIA implicit value for role][]. +For each test target, the [WAI-ARIA required states and properties][] for the role are [set][aria set] and not empty (`""`). + +The attributes may be [explicitly set][aria set explicit], [implicitly set][aria set implicit], or [set by default][aria set default]. ## Assumptions @@ -126,6 +128,28 @@ This `combobox` has the required properties `aria-controls` and `aria-expanded`. ``` +#### Passed Example 7 + +This `checkbox` has its required `aria-checked` property [implicitly set][aria set implicit]. + +```html + +``` + +#### Passed Example 8 + +This `menuitemcheckbox` has its required `aria-checked` property [implicitly set][aria set implicit]. + +```html + +``` + ### Failed #### Failed Example 1 @@ -205,20 +229,16 @@ This `div` does not have a [semantic role](#semantic-role). #### Inapplicable Example 2 -This `checkbox` has an [implicit semantic role](#implicit-role) that is identical to the [explicit semantic role](#explicit-role). This allows native HTML `checked` attribute to apply. - -```html - -``` - -#### Inapplicable Example 3 - This `combobox` is not [included in the accessibility tree][] due to its styling, hiding it from everybody. ```html
``` +[aria set]: #aria-attribute-set 'Definition of ARIA Attribute Set' +[aria set default]: #aria-attribute-set:default 'Definition of ARIA Attribute Set by Default' +[aria set explicit]: #aria-attribute-set:explicit 'Definition of ARIA Attribute Set Explicitly' +[aria set implicit]: #aria-attribute-set:implicit 'Definition of ARIA Attribute Set Implicitly' [explicit semantic role]: #explicit-role 'Definition of explicit semantic role' [html aam]: https://www.w3.org/TR/html-aam-1.0/#html-attribute-state-and-property-mappings 'Specification of HTML attributes value mapping to ARIA states and properties' [implicit semantic role]: #implicit-role 'Definition of implicit semantic role' diff --git a/pages/glossary/aria-attribute-set.md b/pages/glossary/aria-attribute-set.md index b3ea2ec439..79201add85 100644 --- a/pages/glossary/aria-attribute-set.md +++ b/pages/glossary/aria-attribute-set.md @@ -9,7 +9,7 @@ input_aspects: - DOM tree --- -An ARIA [state][aria state] or [property][aria property] is set on an [HTML element][namespaced element] when it has a value. This may happens in three ways: +An ARIA [state][aria state] or [property][aria property] is set on an [HTML element][namespaced element] when it has a value. This may happen in three ways: - It is explicitly set if there is a corresponding `aria-*` HTML attribute on the element, whose value is valid for this ARIA [state][aria state] or [property][aria property]. From 6fe0f138ae6860d71fa634d9ae640cf390d732d7 Mon Sep 17 00:00:00 2001 From: Jean-Yves Moyen Date: Thu, 11 Jan 2024 11:31:59 +0100 Subject: [PATCH 3/9] Use new definition in allowed states --- _rules/aria-state-or-property-permitted-5c01ea.md | 14 +++++++++++++- .../role-required-states-and-properties-4e8ab6.md | 3 ++- 2 files changed, 15 insertions(+), 2 deletions(-) diff --git a/_rules/aria-state-or-property-permitted-5c01ea.md b/_rules/aria-state-or-property-permitted-5c01ea.md index a6e49c4e4f..91a1aadd8f 100755 --- a/_rules/aria-state-or-property-permitted-5c01ea.md +++ b/_rules/aria-state-or-property-permitted-5c01ea.md @@ -36,7 +36,7 @@ acknowledgments: ## Applicability -This rule applies to any [WAI-ARIA state or property][] that is specified on an [HTML or SVG element][namespaced element] that is [included in the accessibility tree][]. +This rule applies to any [WAI-ARIA state or property][] that is [explicitly set][aria set explicit] on an [HTML or SVG element][namespaced element] that is [included in the accessibility tree][]. ## Expectation 1 @@ -64,6 +64,8 @@ The presence of prohibited ARIA attributes is often the result of a developer us In HTML, there are language features that do not have corresponding implicit WAI-ARIA semantics. As per [ARIA in HTML](https://www.w3.org/TR/html-aria/), those elements can have [global states or properties][global]. Some of those elements can also have [inherited][], [supported][], or [required][] [states][state] or [properties][property] that correspond to a [WAI-ARIA role](https://www.w3.org/TR/wai-aria-1.2/#introroles). For example, the `audio` element has no corresponding ARIA semantics but it can have [inherited][], [supported][], or [required][] [states][state] or [properties][property] of the [`application` role](https://www.w3.org/TR/wai-aria-1.2/#application). +This rule only applies to [explicitly set][aria set explicit] attributes since these have been provided by authors and using the wrong one is therefore an author issue. If an [implicitly set][aria set implicit] attribute is incorrect, this is not necessarily an author error, e.g., it can be the result of re-purposing an existing element. + Assessing the value of the attribute is out of scope for this rule. ### Related rules @@ -173,6 +175,14 @@ This `input` element does not have an [explicit role][] of `textbox`, but the `a ``` +#### Passed Example 12 + +This `button` has an [implicitly set][aria set implicit] `aria-checked` state since it uses an `input` element with a `type` [attribute value][] of `checkbox`. + +```html + +``` + ### Failed #### Failed Example 1 @@ -217,6 +227,8 @@ This `div` element is not [included in the accessibility tree][], hence its [WAI
``` +[aria set explicit]: #aria-attribute-set:explicit 'Definition of ARIA Attribute Set Explicitly' +[aria set implicit]: #aria-attribute-set:implicit 'Definition of ARIA Attribute Set Implicitly' [attribute value]: #attribute-value 'Definition of attribute value' [explicit role]: #explicit-role 'Definition of Explicit Role' [focusable]: #focusable 'Definition of focusable' diff --git a/_rules/role-required-states-and-properties-4e8ab6.md b/_rules/role-required-states-and-properties-4e8ab6.md index 42639356de..14b16b8fe8 100755 --- a/_rules/role-required-states-and-properties-4e8ab6.md +++ b/_rules/role-required-states-and-properties-4e8ab6.md @@ -53,7 +53,7 @@ This rule relies on browsers and assistive technologies to support leaving out [ Omitting [WAI-ARIA required states and properties][] is often the result of a developer error. When required properties are missing and a default value is not specified by [WAI-ARIA Specifications][], the behavior is not defined. For [WAI-ARIA 1.2][], the only [explicit semantic roles][explicit semantic role] with a required property with a default value are the `option` and `tabs roles` for the `aria-selected` property. -This rule is testing author built components that specify [explicit semantic roles][explicit semantic role] and not components that keep their [implicit semantic role][]. For components that keep their [implicit semantic role][], all native HTML and SVG elements have native attributes that are mapped to all of the [WAI-ARIA required states and properties](https://www.w3.org/TR/wai-aria/#requiredState). Most of these mappings are defined in the [HTML Accessibility API Mappings, Attribute State and Property Mappings][html aam]. +The way the attribute is [set][aria set] doesn't matter for this rule. As long as authors can rely on User Agents or Assistive Technologies to set the attribute, this won't create problems for users. As per [the First Rule of ARIA use][], authors should rely on [implicitly set][aria set implicit] attributes when possible. ### Bibliography @@ -240,6 +240,7 @@ This `combobox` is not [included in the accessibility tree][] due to its styling [aria set explicit]: #aria-attribute-set:explicit 'Definition of ARIA Attribute Set Explicitly' [aria set implicit]: #aria-attribute-set:implicit 'Definition of ARIA Attribute Set Implicitly' [explicit semantic role]: #explicit-role 'Definition of explicit semantic role' +[first rule of aria use]: https://www.w3.org/TR/using-aria/#rule1 'First Rule of ARIA Use' [html aam]: https://www.w3.org/TR/html-aam-1.0/#html-attribute-state-and-property-mappings 'Specification of HTML attributes value mapping to ARIA states and properties' [implicit semantic role]: #implicit-role 'Definition of implicit semantic role' [included in the accessibility tree]: #included-in-the-accessibility-tree 'Definition of Included in The Accessibility Tree' From 41324e8f6222b779bb59f679b9505c5698d1bb32 Mon Sep 17 00:00:00 2001 From: Jean-Yves Moyen Date: Thu, 11 Jan 2024 11:38:22 +0100 Subject: [PATCH 4/9] Clean up links --- _rules/role-required-states-and-properties-4e8ab6.md | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/_rules/role-required-states-and-properties-4e8ab6.md b/_rules/role-required-states-and-properties-4e8ab6.md index 14b16b8fe8..00bd37f567 100755 --- a/_rules/role-required-states-and-properties-4e8ab6.md +++ b/_rules/role-required-states-and-properties-4e8ab6.md @@ -53,7 +53,7 @@ This rule relies on browsers and assistive technologies to support leaving out [ Omitting [WAI-ARIA required states and properties][] is often the result of a developer error. When required properties are missing and a default value is not specified by [WAI-ARIA Specifications][], the behavior is not defined. For [WAI-ARIA 1.2][], the only [explicit semantic roles][explicit semantic role] with a required property with a default value are the `option` and `tabs roles` for the `aria-selected` property. -The way the attribute is [set][aria set] doesn't matter for this rule. As long as authors can rely on User Agents or Assistive Technologies to set the attribute, this won't create problems for users. As per [the First Rule of ARIA use][], authors should rely on [implicitly set][aria set implicit] attributes when possible. +The way the attribute is [set][aria set] doesn't matter for this rule. As long as authors can rely on User Agents or Assistive Technologies to set the attribute, this won't create problems for users. As per the [First Rule of ARIA use][], authors should rely on [implicitly set][aria set implicit] attributes when possible. ### Bibliography @@ -241,8 +241,6 @@ This `combobox` is not [included in the accessibility tree][] due to its styling [aria set implicit]: #aria-attribute-set:implicit 'Definition of ARIA Attribute Set Implicitly' [explicit semantic role]: #explicit-role 'Definition of explicit semantic role' [first rule of aria use]: https://www.w3.org/TR/using-aria/#rule1 'First Rule of ARIA Use' -[html aam]: https://www.w3.org/TR/html-aam-1.0/#html-attribute-state-and-property-mappings 'Specification of HTML attributes value mapping to ARIA states and properties' -[implicit semantic role]: #implicit-role 'Definition of implicit semantic role' [included in the accessibility tree]: #included-in-the-accessibility-tree 'Definition of Included in The Accessibility Tree' [wai-aria required states and properties]: https://www.w3.org/TR/wai-aria-1.2/#requiredState [wai-aria specifications]: #wai-aria-specifications 'Definition of WAI-ARIA Specifications' From 0cf36b43c4b8637e20c51ec66c441d77212852e5 Mon Sep 17 00:00:00 2001 From: Jean-Yves Moyen Date: Thu, 1 Feb 2024 11:27:48 +0100 Subject: [PATCH 5/9] Clarify definition --- ...aria-state-or-property-permitted-5c01ea.md | 17 ++++++----- _rules/role-attribute-valid-value-674b10.md | 4 +++ ...e-required-states-and-properties-4e8ab6.md | 30 ++++++++++++------- pages/glossary/aria-attribute-set.md | 24 ++++++++++----- pages/glossary/attribute-value.md | 8 +++++ 5 files changed, 57 insertions(+), 26 deletions(-) diff --git a/_rules/aria-state-or-property-permitted-5c01ea.md b/_rules/aria-state-or-property-permitted-5c01ea.md index 0f6d131413..5ff32f6b75 100755 --- a/_rules/aria-state-or-property-permitted-5c01ea.md +++ b/_rules/aria-state-or-property-permitted-5c01ea.md @@ -175,14 +175,6 @@ This `input` element does not have an [explicit role][] of `textbox`, but the `a ``` -#### Passed Example 12 - -This `button` has an [implicitly set][aria set implicit] `aria-checked` state since it uses an `input` element with a `type` [attribute value][] of `checkbox`. - -```html - -``` - ### Failed #### Failed Example 1 @@ -227,9 +219,18 @@ This `div` element is not [included in the accessibility tree][], hence its [WAI
``` +#### Passed Example 12 + +This `button` does not have any [explicitly set][aria set explicit] ARIA attribute. It has an [implicitly set][aria set implicit] `aria-checked` state, due to the [absence of a `checked` attribute][checked absent] on the `input` element with a `type` [attribute value][] of `checkbox`. + +````html +```html +```` + [aria set explicit]: #aria-attribute-set:explicit 'Definition of ARIA Attribute Set Explicitly' [aria set implicit]: #aria-attribute-set:implicit 'Definition of ARIA Attribute Set Implicitly' [attribute value]: #attribute-value 'Definition of attribute value' +[checked absent]: https://www.w3.org/TR/html-aam-1.0/#att-checked-absent 'HTML AAM, Attribute Checked absent' [explicit role]: #explicit-role 'Definition of Explicit Role' [focusable]: #focusable 'Definition of focusable' [global]: https://www.w3.org/TR/wai-aria-1.2/#global_states 'Definition of Global ARIA States and Properties' diff --git a/_rules/role-attribute-valid-value-674b10.md b/_rules/role-attribute-valid-value-674b10.md index 82119941db..ce3a837a0b 100755 --- a/_rules/role-attribute-valid-value-674b10.md +++ b/_rules/role-attribute-valid-value-674b10.md @@ -56,6 +56,8 @@ The `role` attribute is a set of [space separated tokens][]. Having a [whitespac Not every role can be used on every element. Which ARIA roles may be used on which HTML elements is defined in [ARIA in HTML](https://www.w3.org/TR/html-aria/). Testing this is not part of this rule. +This rule considers the [value of the attribute as set in the HTML code][html attribute value], which differs from the [attribute value][attribute value] obtained after parsing it and discarding invalid tokens. + ### Bibliography - [List of WAI-ARIA Roles][wai-aria role] @@ -178,7 +180,9 @@ This `role` attribute is specified on an element which is [programmatically hidd ``` [ascii whitespace]: https://infra.spec.whatwg.org/#ascii-whitespace 'Definition of ASCII whitespace' +[attribute value]: #attribute-value:role 'Definition of Attribute Value of the Role Attribute' [html or svg element]: #namespaced-element +[html attribute value]: https://html.spec.whatwg.org/multipage/dom.html#attributes 'HTML Specification of Attribute Value' [implicit role]: #implicit-role 'Definition of Implicit Role' [programmatically hidden]: #programmatically-hidden 'Definition of Programmatically Hidden' [role attribute]: https://www.w3.org/TR/role-attribute/ 'Specification of the Role attribute' diff --git a/_rules/role-required-states-and-properties-4e8ab6.md b/_rules/role-required-states-and-properties-4e8ab6.md index 49d8d63143..ca78af174e 100755 --- a/_rules/role-required-states-and-properties-4e8ab6.md +++ b/_rules/role-required-states-and-properties-4e8ab6.md @@ -67,7 +67,7 @@ The way the attribute is [set][aria set] doesn't matter for this rule. As long a #### Passed Example 1 -This `heading` has the required `aria-level` property. +This `heading` has the required `aria-level` property [explicitly set][aria set explicit]. ```html
@@ -77,7 +77,7 @@ This `heading` has the required `aria-level` property. #### Passed Example 2 -This `checkbox` has the required `aria-checked` property. +This `checkbox` has the required `aria-checked` property [explicitly set][aria set explicit]. ```html
@@ -86,7 +86,7 @@ This `checkbox` has the required `aria-checked` property. #### Passed Example 3 -This `scrollbar` has the required properties `aria-controls` and `aria-valuenow`. `aria-valuemin` has a default value of 0 and `aria-valuemax` of 100. +This `scrollbar` has the required properties `aria-controls` and `aria-valuenow` [explicitely set][aria set explicit]. `aria-valuemin` has a default value of 0 and `aria-valuemax` of 100 and are thus [set by default][aria set default]. ```html
@@ -95,7 +95,7 @@ This `scrollbar` has the required properties `aria-controls` and `aria-valuenow` #### Passed Example 4 -These `option` nodes do not need the required `aria-selected` property because it has a default value of `false`. +These `option` nodes have the required `aria-selected` property [set by default][aria set default]. ```html
Tags
@@ -107,7 +107,7 @@ These `option` nodes do not need the required `aria-selected` property because i #### Passed Example 5 -This `separator` is not a `widget` because it is not [focusable][]. The `separator` role only requires the `aria-valuenow` property when the element is focusable. +This `separator` is not a `widget` because it is not [focusable][]. The `separator` role does not have any required property when the element is not focusable. ```html

My first HTML

@@ -117,7 +117,7 @@ This `separator` is not a `widget` because it is not [focusable][]. The `separat #### Passed Example 6 -This `combobox` has the required properties `aria-controls` and `aria-expanded`. +This `combobox` has the required properties `aria-controls` and `aria-expanded` [explicitly set][aria set explicit]. ```html @@ -150,11 +150,19 @@ This `menuitemcheckbox` has its required `aria-checked` property [implicitly set ``` +#### Passed Example 9 + +This `iframe` element is [included in the accessibility tree][], even without a role, and therefore has no [WAI-ARIA required states and properties][]. + +```html +