From 692b31367f8acedcff7e4e6f5ff73030944d67ac Mon Sep 17 00:00:00 2001 From: Jean-Yves Moyen Date: Thu, 13 Jul 2023 11:27:32 +0200 Subject: [PATCH 1/8] Create new rule --- _rules/aria-role-permitted-j7zzqr.md | 125 +++++++++++++++++++++++++++ 1 file changed, 125 insertions(+) create mode 100644 _rules/aria-role-permitted-j7zzqr.md diff --git a/_rules/aria-role-permitted-j7zzqr.md b/_rules/aria-role-permitted-j7zzqr.md new file mode 100644 index 0000000000..26f05099b8 --- /dev/null +++ b/_rules/aria-role-permitted-j7zzqr.md @@ -0,0 +1,125 @@ +--- +id: j7zzqr +name: ARIA role is permitted. +rule_type: atomic +description: | + This rule checks that WAI-ARIA roles are allowed for the element they are specified on. +accessibility_requirements: + html-aria:docconformance: + title: ARIA in HTML, 4. Document conformance requirements for use of ARIA attributes in HTML + forConformance: true + failed: not satisfied + passed: satisfied + inapplicable: satisfied + wcag20:1.3.1: # Info and Relationships (A) + secondary: true + wcag20:4.1.2: # Name, Role, Value (A) + secondary: true + wcag-technique:ARIA4: # Using a WAI-ARIA role to expose the role of a user interface component + secondary: true +input_aspects: + - Accessibility Tree + - DOM Tree +acknowledgments: + authors: + - Jean-Yves Moyen +--- + +## Applicability + +This rule applies to any [HTML element][namespaced element] that is [included in the accessibility tree][] and has an [explicit semantic role][explicit role]. + +## Expectation + +For each test target, its [explicit semantic role][explicit role] is allowed on this element, according to [ARIA in HTML specifications][aria in html document conformance]. + +## Assumptions + +There are no assumptions. + +## Accessibility Support + +There are no accessibility support issues known. + +## Background + +The presence of an invalid role often implies that the programmatic role do not correspond to the one that is conveyed visually, or that the interactions provided by the elements do not match the ones expected for this role. Therefore, both [Success Criterion 1.3.1 Info and Relationships][sc131] and [Success Criterion 4.1.2 Name, Role, Value][sc412] are secondary requirements for this rule. + +[ARIA in HTML][aria in html document conformance] also defines the [implicit semantic role][implicit role] of each element. Setting the [explicit role][] as the same as the [implicit one][implicit role] is not recommended but nonetheless allowed. This rule doesn't use that in any of its test cases. + +### Related rules + +- [Role attribute has valid value](https://www.w3.org/WAI/standards-guidelines/act/rules/674b10/proposed/) checks that the value of the `role` attribute exists in ARIA, while this rule checks that it is allowed on the element using it. + +### Bibliography + +- [Document conformance requirements for use of ARIA attributes in HTML](https://www.w3.org/TR/html-aria/#docconformance) +- [Understanding SC 1.3.1: Info and Relationships](https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships.html) +- [Understanding Success Criterion 4.1.2: Name, Role, Value](https://www.w3.org/WAI/WCAG21/Understanding/name-role-value.html) +- [Technique ARIA4: Using a WAI-ARIA role to expose the role of a user interface component](https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA4) + +## Test Cases + +### Passed + +#### Passed Example 1 + +This `a` element has an [explicit role][] of `button`, which is allowed. + +```html +All ACT rules +``` + +#### Passed Example 2 + +This `h1` element has an [explicit role][] of `tab`, which is allowed + +```html +

ACT rules

+``` + +### Failed + +#### Failed Example 1 + +This `button` element has an [explicit role][] of `heading`, which is not allowed. + +```html + +``` + +### Inapplicable + +#### Inapplicable Example 1 + +There is no [HTML element][namespaced element]. + +```svg + + This is an SVG + +``` + +#### Inapplicable Example 2 + +This `button` element is not [included in the accessibility tree][]. + +```html + +``` + +#### Inapplicable Example 3 + +This `a` element does not have an [explicit semantic role][]:. + +```html +All ACT rules +``` + +[aria in html document conformance]: https://www.w3.org/TR/html-aria/#docconformance 'ARIA is HTML, Document conformance requirements for use of ARIA attributes in HTML' +[explicit role]: #explicit-role 'Definition of Explicit Role' +[implicit role]: #implicit-role 'Definition of Implicit Role' +[included in the accessibility tree]: #included-in-the-accessibility-tree 'Definition of Included in the Accessibility Tree' +[namespaced element]: #namespaced-element +[sc131]: https://www.w3.org/TR/WCAG21/#info-and-relationships +[sc412]: https://www.w3.org/TR/WCAG21/#name-role-value From a9ffc7006bfb60d876a80475c04ddf86d0ff70f8 Mon Sep 17 00:00:00 2001 From: Jean-Yves Moyen Date: Thu, 17 Aug 2023 15:14:09 +0200 Subject: [PATCH 2/8] Apply suggestions from review --- _rules/aria-role-permitted-j7zzqr.md | 76 +++++++++++++++++++++------- 1 file changed, 59 insertions(+), 17 deletions(-) diff --git a/_rules/aria-role-permitted-j7zzqr.md b/_rules/aria-role-permitted-j7zzqr.md index 26f05099b8..a7a9f2718f 100644 --- a/_rules/aria-role-permitted-j7zzqr.md +++ b/_rules/aria-role-permitted-j7zzqr.md @@ -1,6 +1,6 @@ --- id: j7zzqr -name: ARIA role is permitted. +name: ARIA role is permitted for the element. rule_type: atomic description: | This rule checks that WAI-ARIA roles are allowed for the element they are specified on. @@ -11,12 +11,6 @@ accessibility_requirements: failed: not satisfied passed: satisfied inapplicable: satisfied - wcag20:1.3.1: # Info and Relationships (A) - secondary: true - wcag20:4.1.2: # Name, Role, Value (A) - secondary: true - wcag-technique:ARIA4: # Using a WAI-ARIA role to expose the role of a user interface component - secondary: true input_aspects: - Accessibility Tree - DOM Tree @@ -27,11 +21,11 @@ acknowledgments: ## Applicability -This rule applies to any [HTML element][namespaced element] that is [included in the accessibility tree][] and has an [explicit semantic role][explicit role]. +This rule applies to any [HTML element][namespaced element] which has an [explicit semantic role][explicit role]. ## Expectation -For each test target, its [explicit semantic role][explicit role] is allowed on this element, according to [ARIA in HTML specifications][aria in html document conformance]. +For each test target, its [explicit semantic role][explicit role] is allowed on this element, according to the [ARIA in HTML specification][aria in html document conformance]. ## Assumptions @@ -43,10 +37,10 @@ There are no accessibility support issues known. ## Background -The presence of an invalid role often implies that the programmatic role do not correspond to the one that is conveyed visually, or that the interactions provided by the elements do not match the ones expected for this role. Therefore, both [Success Criterion 1.3.1 Info and Relationships][sc131] and [Success Criterion 4.1.2 Name, Role, Value][sc412] are secondary requirements for this rule. - [ARIA in HTML][aria in html document conformance] also defines the [implicit semantic role][implicit role] of each element. Setting the [explicit role][] as the same as the [implicit one][implicit role] is not recommended but nonetheless allowed. This rule doesn't use that in any of its test cases. +This rules apply to every element, even if they are not [included in the accessibility tree][]. This is because the roles of `none` or `presentation` are only allowed on certain elements. If the rule was only looking at content [included in the accessibility tree][], it wouldn't flag incorrect use of these roles. + ### Related rules - [Role attribute has valid value](https://www.w3.org/WAI/standards-guidelines/act/rules/674b10/proposed/) checks that the value of the `role` attribute exists in ARIA, while this rule checks that it is allowed on the element using it. @@ -54,9 +48,6 @@ The presence of an invalid role often implies that the programmatic role do not ### Bibliography - [Document conformance requirements for use of ARIA attributes in HTML](https://www.w3.org/TR/html-aria/#docconformance) -- [Understanding SC 1.3.1: Info and Relationships](https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships.html) -- [Understanding Success Criterion 4.1.2: Name, Role, Value](https://www.w3.org/WAI/WCAG21/Understanding/name-role-value.html) -- [Technique ARIA4: Using a WAI-ARIA role to expose the role of a user interface component](https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA4) ## Test Cases @@ -78,6 +69,23 @@ This `h1` element has an [explicit role][] of `tab`, which is allowed

ACT rules

``` +#### Passed Example 3 + +These `hr` elements have an [explicit role][] of `presentation`, which is allowed + +```html +Fruits: + +``` + ### Failed #### Failed Example 1 @@ -88,6 +96,42 @@ This `button` element has an [explicit role][] of `heading`, which is not allowe ``` +#### Failed Example 2 + +This `aside` element has an [explicit role][] of `navigation`, which is not allowed. + +```html + +``` + +#### Failed Example 3 + +These `h1` elements have an [explicit role][] of `listitem`, which is not allowed; the `div` element has an [explicit role][] of `list`, which is allowed. + +```html +Fruits: +
+

Apple

+

Banana

+

Orange

+
+``` + +#### Failed Example 4 + +The first `li` element has an [explicit role][] of `presentation`, which is not allowed. + +```html +Fruits: + +``` + ### Inapplicable #### Inapplicable Example 1 @@ -120,6 +164,4 @@ This `a` element does not have an [explicit semantic role][]:. [explicit role]: #explicit-role 'Definition of Explicit Role' [implicit role]: #implicit-role 'Definition of Implicit Role' [included in the accessibility tree]: #included-in-the-accessibility-tree 'Definition of Included in the Accessibility Tree' -[namespaced element]: #namespaced-element -[sc131]: https://www.w3.org/TR/WCAG21/#info-and-relationships -[sc412]: https://www.w3.org/TR/WCAG21/#name-role-value +[namespaced element]: #namespaced-element 'Definition of Namespaced Element' From aea2cbd94982683e920824226d8374ab47f2b893 Mon Sep 17 00:00:00 2001 From: Jean-Yves Moyen Date: Thu, 17 Aug 2023 16:25:51 +0200 Subject: [PATCH 3/8] Typo --- _rules/aria-role-permitted-j7zzqr.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_rules/aria-role-permitted-j7zzqr.md b/_rules/aria-role-permitted-j7zzqr.md index a7a9f2718f..377e3d4569 100644 --- a/_rules/aria-role-permitted-j7zzqr.md +++ b/_rules/aria-role-permitted-j7zzqr.md @@ -160,7 +160,7 @@ This `a` element does not have an [explicit semantic role][]:. All ACT rules ``` -[aria in html document conformance]: https://www.w3.org/TR/html-aria/#docconformance 'ARIA is HTML, Document conformance requirements for use of ARIA attributes in HTML' +[aria in html document conformance]: https://www.w3.org/TR/html-aria/#docconformance 'ARIA in HTML, Document conformance requirements for use of ARIA attributes in HTML' [explicit role]: #explicit-role 'Definition of Explicit Role' [implicit role]: #implicit-role 'Definition of Implicit Role' [included in the accessibility tree]: #included-in-the-accessibility-tree 'Definition of Included in the Accessibility Tree' From 81a2a825bf0ae53b154baefd4e6caddbf5948d0f Mon Sep 17 00:00:00 2001 From: Jean-Yves Moyen Date: Thu, 28 Sep 2023 15:36:23 +0200 Subject: [PATCH 4/8] Add more test cases --- __tests__/spelling-ignore.yml | 1 + _rules/aria-role-permitted-j7zzqr.md | 106 ++++++++++++++++++++------- 2 files changed, 81 insertions(+), 26 deletions(-) diff --git a/__tests__/spelling-ignore.yml b/__tests__/spelling-ignore.yml index 809491bfc7..a383ec9937 100644 --- a/__tests__/spelling-ignore.yml +++ b/__tests__/spelling-ignore.yml @@ -143,6 +143,7 @@ - Sumei - Tuttle - lnik # intentional misspelling +- btn # intentional misspelling # Attributes (repeated words with casing as retext-spell has no config to ignore casing) - href diff --git a/_rules/aria-role-permitted-j7zzqr.md b/_rules/aria-role-permitted-j7zzqr.md index 377e3d4569..7a70e11d05 100644 --- a/_rules/aria-role-permitted-j7zzqr.md +++ b/_rules/aria-role-permitted-j7zzqr.md @@ -3,7 +3,7 @@ id: j7zzqr name: ARIA role is permitted for the element. rule_type: atomic description: | - This rule checks that WAI-ARIA roles are allowed for the element they are specified on. + This rule checks that explicit WAI-ARIA roles are allowed for the element they are specified on. accessibility_requirements: html-aria:docconformance: title: ARIA in HTML, 4. Document conformance requirements for use of ARIA attributes in HTML @@ -37,9 +37,11 @@ There are no accessibility support issues known. ## Background -[ARIA in HTML][aria in html document conformance] also defines the [implicit semantic role][implicit role] of each element. Setting the [explicit role][] as the same as the [implicit one][implicit role] is not recommended but nonetheless allowed. This rule doesn't use that in any of its test cases. +Each element also has an [implicit semantic role][implicit role] defined in the [HTML Accessibility API Mappings][html aam:roles]. Setting the [explicit role][] as the same as the [implicit role][] is not recommended but nonetheless allowed. This rule does not check that scenario. -This rules apply to every element, even if they are not [included in the accessibility tree][]. This is because the roles of `none` or `presentation` are only allowed on certain elements. If the rule was only looking at content [included in the accessibility tree][], it wouldn't flag incorrect use of these roles. +This rule does not check specifically whether the [explicit role][] is deprecated, or whether it is the special `generic` role that should not be used by authors. These are not conformance requirement, or are checked by other rules. + +This rules apply to every element, even if they are not [included in the accessibility tree][]. This is because the roles of `none` or `presentation` are only allowed on certain elements. If the rule was only looking at content [included in the accessibility tree][], it wouldn't flag incorrect use of these roles. ### Related rules @@ -76,16 +78,42 @@ These `hr` elements have an [explicit role][] of `presentation`, which is allowe ```html Fruits:
    -
  • Apple -
    -
    • -
  • Banana -
    -
    • -
  • Orange
    • +
  • + Apple +
    +
    • +
  • + Banana +
    +
    • +
  • Orange
``` +#### Passed Example 4 + +This `p` element has an [explicit role][] of `generic` which is allowed. Using an explicit role of `generic` for any element is globally not recommended, but not an error by itself. + +```html +

It was a dark and stormy night.

+``` + +#### Passed Example 5 + +This `h1` element has an [explicit role][] of `tab`, which is allowed. The `btn` token is not a valid role and is therefore ignored. + +```html +

ACT rules

+``` + +#### Passed Example 6 + +This `dialog` element has an [explicit role][] of `alertdialog`, which is allowed. Even though the `alert` role is not allowed, the first token is a valid role and is therefore used. + +```html +This is not right. +``` + ### Failed #### Failed Example 1 @@ -102,20 +130,21 @@ This `aside` element has an [explicit role][] of `navigation`, which is not allo ```html ``` -#### Failed Example 3 +#### Failed Example 3 These `h1` elements have an [explicit role][] of `listitem`, which is not allowed; the `div` element has an [explicit role][] of `list`, which is allowed. ```html Fruits:
-

Apple

-

Banana

-

Orange

+

Apple

+

Banana

+

Orange

``` @@ -126,12 +155,44 @@ The first `li` element has an [explicit role][] of `presentation`, which is not ```html Fruits:
    -
  • Apple
    • -
  • Banana
    • -
  • Orange
    • +
  • Apple
    • +
  • Banana
    • +
  • Orange
``` +#### Failed Example 5 + +This `label` element has an [explicit role][] of `generic`, which is not allowed. + +```html + +``` + +#### Failed Example 6 + +This `button` element has an [explicit role][] of `list`, which is not allowed. Even though it is not [included in the accessibility tree][], this is still not allowed by [ARIA in HTML][]. + +```html + +``` + +#### Failed Example 7 + +This `h1` element has an [explicit role][] of `listitem`, which is not allowed. Even though it is not [included in the accessibility tree][], this is still not allowed by [ARIA in HTML][]. + +```html +

ACT rules

+``` + +#### Failed Example 8 + +This `dialog` element has an [explicit role][] of `alert`, which is not allowed. Even though the `alertdialog` role is allowed, the first token is a valid role and is therefore used. + +```html +This is not right. +``` + ### Inapplicable #### Inapplicable Example 1 @@ -146,14 +207,6 @@ There is no [HTML element][namespaced element]. #### Inapplicable Example 2 -This `button` element is not [included in the accessibility tree][]. - -```html - -``` - -#### Inapplicable Example 3 - This `a` element does not have an [explicit semantic role][]:. ```html @@ -162,6 +215,7 @@ This `a` element does not have an [explicit semantic role][]:. [aria in html document conformance]: https://www.w3.org/TR/html-aria/#docconformance 'ARIA in HTML, Document conformance requirements for use of ARIA attributes in HTML' [explicit role]: #explicit-role 'Definition of Explicit Role' +[html aam:roles]: https://www.w3.org/TR/html-aam-1.0/#html-element-role-mappings 'HTML Accessibility API Mappings, Element Role Mappings' [implicit role]: #implicit-role 'Definition of Implicit Role' [included in the accessibility tree]: #included-in-the-accessibility-tree 'Definition of Included in the Accessibility Tree' [namespaced element]: #namespaced-element 'Definition of Namespaced Element' From c302b7504ccc66acc2715fa5884d7d2411dbe45e Mon Sep 17 00:00:00 2001 From: Jean-Yves Moyen Date: Thu, 5 Oct 2023 14:09:28 +0200 Subject: [PATCH 5/8] Refine Applicability --- _rules/aria-role-permitted-j7zzqr.md | 77 +++++++++++++++++++--------- 1 file changed, 54 insertions(+), 23 deletions(-) diff --git a/_rules/aria-role-permitted-j7zzqr.md b/_rules/aria-role-permitted-j7zzqr.md index 7a70e11d05..61a14de26e 100644 --- a/_rules/aria-role-permitted-j7zzqr.md +++ b/_rules/aria-role-permitted-j7zzqr.md @@ -21,7 +21,10 @@ acknowledgments: ## Applicability -This rule applies to any [HTML element][namespaced element] which has an [explicit semantic role][explicit role]. +This rule applies to any [HTML element][namespaced element] which has an [explicit semantic role][explicit role] and for which at least one of the following is true: + +- the element is [included in the accessibility tree][]; or +- the element has an [explicit semantic role][] of `presentation` or `none`. ## Expectation @@ -41,7 +44,7 @@ Each element also has an [implicit semantic role][implicit role] defined in the This rule does not check specifically whether the [explicit role][] is deprecated, or whether it is the special `generic` role that should not be used by authors. These are not conformance requirement, or are checked by other rules. -This rules apply to every element, even if they are not [included in the accessibility tree][]. This is because the roles of `none` or `presentation` are only allowed on certain elements. If the rule was only looking at content [included in the accessibility tree][], it wouldn't flag incorrect use of these roles. +The roles of `none` or `presentation` are only allowed on certain elements. Therefore this rule also check these elements, even though they are not necessarily [included in the accessibility tree][]. Many of the elements for which `presentation` is not allowed are interactive elements where the role would anyway be ignored due to the [presentational roles conflict resolution][]. ### Related rules @@ -57,7 +60,7 @@ This rules apply to every element, even if they are not [included in the accessi #### Passed Example 1 -This `a` element has an [explicit role][] of `button`, which is allowed. +This `a` element with an `href` attribute has an [explicit role][] of `button`, which is allowed. ```html All ACT rules @@ -73,7 +76,7 @@ This `h1` element has an [explicit role][] of `tab`, which is allowed #### Passed Example 3 -These `hr` elements have an [explicit role][] of `presentation`, which is allowed +These `hr` elements have an [explicit role][] of `presentation`, which is allowed. ```html Fruits: @@ -100,13 +103,32 @@ This `p` element has an [explicit role][] of `generic` which is allowed. Using a #### Passed Example 5 +These `hr` elements have an [explicit role][] of `separator`, which is allowed. Using an explicit role which is the same as the [implicit role][] is not recommended, but not an error by itself. + +```html +Fruits: +
    +
  • + Apple +
    +
    • +
  • + Banana +
    +
    • +
  • Orange
    • +
+``` + +#### Passed Example 6 + This `h1` element has an [explicit role][] of `tab`, which is allowed. The `btn` token is not a valid role and is therefore ignored. ```html

ACT rules

``` -#### Passed Example 6 +#### Passed Example 7 This `dialog` element has an [explicit role][] of `alertdialog`, which is allowed. Even though the `alert` role is not allowed, the first token is a valid role and is therefore used. @@ -150,7 +172,15 @@ Fruits: #### Failed Example 4 -The first `li` element has an [explicit role][] of `presentation`, which is not allowed. +This `a` element with an `href` attribute has an [explicit role][] of `presentation`, which is not allowed. Since the element is focusable, the [presentational roles conflict resolution][] would trigger, and the explicit role is ignored. + +```html +All ACT rules +``` + +#### Failed Example 5 + +The first `li` element has an [explicit role][] of `presentation`, which is not allowed when its parent has an [implicit role][] of `list`. ```html Fruits: @@ -161,7 +191,7 @@ Fruits: ``` -#### Failed Example 5 +#### Failed Example 6 This `label` element has an [explicit role][] of `generic`, which is not allowed. @@ -169,24 +199,8 @@ This `label` element has an [explicit role][] of `generic`, which is not allowed ``` -#### Failed Example 6 - -This `button` element has an [explicit role][] of `list`, which is not allowed. Even though it is not [included in the accessibility tree][], this is still not allowed by [ARIA in HTML][]. - -```html - -``` - #### Failed Example 7 -This `h1` element has an [explicit role][] of `listitem`, which is not allowed. Even though it is not [included in the accessibility tree][], this is still not allowed by [ARIA in HTML][]. - -```html -

ACT rules

-``` - -#### Failed Example 8 - This `dialog` element has an [explicit role][] of `alert`, which is not allowed. Even though the `alertdialog` role is allowed, the first token is a valid role and is therefore used. ```html @@ -213,9 +227,26 @@ This `a` element does not have an [explicit semantic role][]:. All ACT rules ``` +#### Inapplicable Example 3 + +This `button` element is not [included in the accessibility tree][]. + +```html + +``` + +#### Inapplicable Example 4 + +This `h1` element is not [included in the accessibility tree][]. + +```html +

ACT rules

+``` + [aria in html document conformance]: https://www.w3.org/TR/html-aria/#docconformance 'ARIA in HTML, Document conformance requirements for use of ARIA attributes in HTML' [explicit role]: #explicit-role 'Definition of Explicit Role' [html aam:roles]: https://www.w3.org/TR/html-aam-1.0/#html-element-role-mappings 'HTML Accessibility API Mappings, Element Role Mappings' [implicit role]: #implicit-role 'Definition of Implicit Role' [included in the accessibility tree]: #included-in-the-accessibility-tree 'Definition of Included in the Accessibility Tree' [namespaced element]: #namespaced-element 'Definition of Namespaced Element' +[presentational roles conflict resolution]: https://www.w3.org/TR/wai-aria-1.2/#conflict_resolution_presentation_none 'Presentational Roles Conflict Resolution in ARIA 1.2' From f578d1d5e09971de3325ea906b4496b3b0fb4621 Mon Sep 17 00:00:00 2001 From: Jean-Yves Moyen Date: Thu, 29 Feb 2024 13:59:57 +0100 Subject: [PATCH 6/8] Restrict to non hidden targets --- _rules/aria-role-permitted-j7zzqr.md | 29 ++++++++++++++-------------- 1 file changed, 15 insertions(+), 14 deletions(-) diff --git a/_rules/aria-role-permitted-j7zzqr.md b/_rules/aria-role-permitted-j7zzqr.md index 61a14de26e..f879edf022 100644 --- a/_rules/aria-role-permitted-j7zzqr.md +++ b/_rules/aria-role-permitted-j7zzqr.md @@ -21,10 +21,7 @@ acknowledgments: ## Applicability -This rule applies to any [HTML element][namespaced element] which has an [explicit semantic role][explicit role] and for which at least one of the following is true: - -- the element is [included in the accessibility tree][]; or -- the element has an [explicit semantic role][] of `presentation` or `none`. +This rule applies to any [HTML element][namespaced element] which has an [explicit semantic role][explicit role] and is not [programmatically hidden][]. ## Expectation @@ -44,7 +41,7 @@ Each element also has an [implicit semantic role][implicit role] defined in the This rule does not check specifically whether the [explicit role][] is deprecated, or whether it is the special `generic` role that should not be used by authors. These are not conformance requirement, or are checked by other rules. -The roles of `none` or `presentation` are only allowed on certain elements. Therefore this rule also check these elements, even though they are not necessarily [included in the accessibility tree][]. Many of the elements for which `presentation` is not allowed are interactive elements where the role would anyway be ignored due to the [presentational roles conflict resolution][]. +This rule only check for elements that are not [programmatically hidden][]. Elements that are [programmatically hidden][], e.g. due to a CSS `display:none`, must still have valid roles in order to conform to [ARIA in HTML][aria in html document conformance]. However, these won't cause any actual accessibility issues as long as they stay hidden. This rule only checks a snapshot of a page in a given state; if interacting with the page reveals such an element without fixing its role, that could create an accessibility issue for the user. Examples only show [programmatically hidden][] element with a correct role. ### Related rules @@ -68,10 +65,12 @@ This `a` element with an `href` attribute has an [explicit role][] of `button`, #### Passed Example 2 -This `h1` element has an [explicit role][] of `tab`, which is allowed +This `h1` element has an [explicit role][] of `tab`, which is allowed. The `div` element also has an allowed role (of `tablist`). ```html -

ACT rules

+
+

ACT rules

+
``` #### Passed Example 3 @@ -125,7 +124,9 @@ Fruits: This `h1` element has an [explicit role][] of `tab`, which is allowed. The `btn` token is not a valid role and is therefore ignored. ```html -

ACT rules

+
+

ACT rules

+
``` #### Passed Example 7 @@ -172,7 +173,7 @@ Fruits: #### Failed Example 4 -This `a` element with an `href` attribute has an [explicit role][] of `presentation`, which is not allowed. Since the element is focusable, the [presentational roles conflict resolution][] would trigger, and the explicit role is ignored. +This `a` element with an `href` attribute has an [explicit role][] of `presentation`, which is not allowed. Note that since the element is focusable, the [presentational roles conflict resolution][] would trigger, and the explicit role is ignored. ```html All ACT rules @@ -229,24 +230,24 @@ This `a` element does not have an [explicit semantic role][]:. #### Inapplicable Example 3 -This `button` element is not [included in the accessibility tree][]. +This `button` element is [programmatically hidden][]. ```html - + ``` #### Inapplicable Example 4 -This `h1` element is not [included in the accessibility tree][]. +This `h1` element is [programmatically hidden][]. ```html -

ACT rules

+

ACT rules

``` [aria in html document conformance]: https://www.w3.org/TR/html-aria/#docconformance 'ARIA in HTML, Document conformance requirements for use of ARIA attributes in HTML' [explicit role]: #explicit-role 'Definition of Explicit Role' [html aam:roles]: https://www.w3.org/TR/html-aam-1.0/#html-element-role-mappings 'HTML Accessibility API Mappings, Element Role Mappings' [implicit role]: #implicit-role 'Definition of Implicit Role' -[included in the accessibility tree]: #included-in-the-accessibility-tree 'Definition of Included in the Accessibility Tree' [namespaced element]: #namespaced-element 'Definition of Namespaced Element' [presentational roles conflict resolution]: https://www.w3.org/TR/wai-aria-1.2/#conflict_resolution_presentation_none 'Presentational Roles Conflict Resolution in ARIA 1.2' +[programmatically hidden]: #programmatically-hidden 'Definition of Programmatically Hidden' From 891c9d9a376152c5f3b6fa7d6594b0d8b17acdf8 Mon Sep 17 00:00:00 2001 From: Jean-Yves Moyen Date: Fri, 1 Mar 2024 08:48:54 +0100 Subject: [PATCH 7/8] Improve wording of note Co-authored-by: Scott O'Hara --- _rules/aria-role-permitted-j7zzqr.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_rules/aria-role-permitted-j7zzqr.md b/_rules/aria-role-permitted-j7zzqr.md index f879edf022..c1646f5e1e 100644 --- a/_rules/aria-role-permitted-j7zzqr.md +++ b/_rules/aria-role-permitted-j7zzqr.md @@ -41,7 +41,7 @@ Each element also has an [implicit semantic role][implicit role] defined in the This rule does not check specifically whether the [explicit role][] is deprecated, or whether it is the special `generic` role that should not be used by authors. These are not conformance requirement, or are checked by other rules. -This rule only check for elements that are not [programmatically hidden][]. Elements that are [programmatically hidden][], e.g. due to a CSS `display:none`, must still have valid roles in order to conform to [ARIA in HTML][aria in html document conformance]. However, these won't cause any actual accessibility issues as long as they stay hidden. This rule only checks a snapshot of a page in a given state; if interacting with the page reveals such an element without fixing its role, that could create an accessibility issue for the user. Examples only show [programmatically hidden][] element with a correct role. +This rule only check for elements that are not [programmatically hidden][]. Elements that are [programmatically hidden][], e.g. due to a CSS `display:none`, must still have valid roles in order to conform to [ARIA in HTML][aria in html document conformance]. However, as long as the elements with the errant roles remain programmatically hidden, they are not expected to cause accessibility issues. This rule only checks a snapshot of a page in a given state; if interacting with the page programmatically exposes an element with an errant role that this rule previously ignored, the new state of the page should be reevaluated to ensure it still passes this rule, and that an accessibility issue has not been introduced to users. Examples only show [programmatically hidden][] elements with a correct role. ### Related rules From bb7a835202de81f03804f7ad5dde3f47ce079646 Mon Sep 17 00:00:00 2001 From: Jean-Yves Moyen Date: Fri, 1 Mar 2024 15:26:05 +0100 Subject: [PATCH 8/8] Typo Co-authored-by: Scott O'Hara --- _rules/aria-role-permitted-j7zzqr.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_rules/aria-role-permitted-j7zzqr.md b/_rules/aria-role-permitted-j7zzqr.md index c1646f5e1e..5ed7b351bf 100644 --- a/_rules/aria-role-permitted-j7zzqr.md +++ b/_rules/aria-role-permitted-j7zzqr.md @@ -41,7 +41,7 @@ Each element also has an [implicit semantic role][implicit role] defined in the This rule does not check specifically whether the [explicit role][] is deprecated, or whether it is the special `generic` role that should not be used by authors. These are not conformance requirement, or are checked by other rules. -This rule only check for elements that are not [programmatically hidden][]. Elements that are [programmatically hidden][], e.g. due to a CSS `display:none`, must still have valid roles in order to conform to [ARIA in HTML][aria in html document conformance]. However, as long as the elements with the errant roles remain programmatically hidden, they are not expected to cause accessibility issues. This rule only checks a snapshot of a page in a given state; if interacting with the page programmatically exposes an element with an errant role that this rule previously ignored, the new state of the page should be reevaluated to ensure it still passes this rule, and that an accessibility issue has not been introduced to users. Examples only show [programmatically hidden][] elements with a correct role. +This rule only checks for elements that are not [programmatically hidden][]. Elements that are [programmatically hidden][], e.g. due to a CSS `display:none`, must still have valid roles in order to conform to [ARIA in HTML][aria in html document conformance]. However, as long as the elements with the errant roles remain programmatically hidden, they are not expected to cause accessibility issues. This rule only checks a snapshot of a page in a given state; if interacting with the page programmatically exposes an element with an errant role that this rule previously ignored, the new state of the page should be reevaluated to ensure it still passes this rule, and that an accessibility issue has not been introduced to users. Examples only show [programmatically hidden][] elements with a correct role. ### Related rules