diff --git a/_rules/aria-allowed-child-element-with-presentational-parent-1g88p9.md b/_rules/aria-allowed-child-element-with-presentational-parent-1g88p9.md new file mode 100644 index 0000000000..d6d1afcb44 --- /dev/null +++ b/_rules/aria-allowed-child-element-with-presentational-parent-1g88p9.md @@ -0,0 +1,171 @@ +--- +id: 1g88p9 +name: ARIA allowed child element of another element with presentational role +rule_type: atomic +description: | + This rule checks that allowed child element of another element with presentational role does not cause presentational roles conflicts +accessibility_requirements: + aria12:conflict_resolution_presentation_none: + title: ARIA 1.2, Presentational Roles Conflict Resolution + forConformance: true + failed: not satisfied + passed: satisfied + inapplicable: satisfied + wcag20:1.3.1: # Info and Relationships (A) + secondary: This success criterion is **related** to this rule. This is because ancestor elements assigned a presentational role with semantic allowed child elements may prevents assistive technologies to convey relationship details, potentially leading to WCAG violations. Some of the examples that either pass or fail overlap with this success criterion. +input_aspects: + - Accessibility Tree + - CSS styling + - DOM Tree +acknowledgments: + authors: + - Giacomo Petri +--- + +## Applicability + +This rule applies to any [HTML or SVG element][] that is [included in the accessibility tree][], is an [allowed child element](https://www.w3.org/TR/wai-aria-1.3/#mustContain) of another element with an [explicit semantic role][] of `none` or `presentation`. + +## Expectation + +For each target element one of the following is true: +- The element doesn't have any [explicit semantic role][]; +- The element has an [explicit semantic role][] of `none` or `presentation`. + +## Assumptions + +There are no assumptions. + +## Accessibility Support + +There are no accessibility support issues known. + +## Background + +While user agents consistently handle elements undergoing [Presentational Roles Conflict Resolution][], authors bear the responsibility of preventing such conflicts. + +### Bibliography + +- [WAI-ARIA 1.2 - Presentational Roles Conflict Resolution][Presentational Roles Conflict Resolution] + +## Test Cases + +### Passed + +#### Passed Example 1 + +The `li` elements inherit the presentational role from their `ul` parent element with an [explicit semantic role][] of `none`. + +```html + +``` + +#### Passed Example 2 + +The `tr` and `td` elements inherit the presentational role from their `table` ancestor element with an [explicit semantic role][] of `presentation`. + +```html + + + + + + + + + + + +
ACT RulesWCAG
ARIA
+``` + +#### Passed Example 3 + +The `li` elements inherit the presentational role from their `ul` parent element with an [explicit semantic role][] of `none`. The `li` have an [explicit semantic role][] of `none`. + +```html + +``` + +### Failed + +#### Failed Example 1 + +The `li` elements inherit the presentational role from their `ul` parent element with an [explicit semantic role][] of `none`, but the author forced its [explicit semantic role][] with `listitem`. + +```html + +``` + +#### Failed Example 2 + +The `td` elements inherit the presentational role from their `table` ancestor element with an [explicit semantic role][] of `presentation`, but the author forced its [explicit semantic role][] with `cell`. + +```html + + + + + + + + + + + +
ACT RulesWCAG
ARIA
+``` + +### Inapplicable + +#### Inapplicable Example 1 + +The `li` elements are no included in the accessibility tree. + +```html + +``` + +#### Inapplicable Example 2 + +The `ul` element doesn't have a role of `none` or `presentation`. + +```html + +``` + +#### Inapplicable Example 3 + +The `a` elements with a semantic role of `link` are not [allowed child element](https://w3c.github.io/aria/#mustContain) of the `ul` element. + +```html + +``` + +[explicit semantic role]: #explicit-role 'Definition of Explicit Role' +[included in the accessibility tree]: #included-in-the-accessibility-tree 'Definition of Included in the Accessibility Tree' +[presentational roles conflict resolution]: https://www.w3.org/TR/wai-aria-1.2/#conflict_resolution_presentation_none 'Presentational Roles Conflict Resolution' +[html or svg element]: #namespaced-element diff --git a/_rules/aria-presentational-role-no-global-states-properties-p8g918.md b/_rules/aria-presentational-role-no-global-states-properties-p8g918.md new file mode 100644 index 0000000000..a7dbf23ef2 --- /dev/null +++ b/_rules/aria-presentational-role-no-global-states-properties-p8g918.md @@ -0,0 +1,175 @@ +--- +id: p8g918 +name: ARIA presentational role does not have global states or properties +rule_type: atomic +description: | + This rule checks that elements with ARIA presentational role do not have global states or properties +accessibility_requirements: + aria12:conflict_resolution_presentation_none: + title: ARIA 1.2, Presentational Roles Conflict Resolution + forConformance: true + failed: not satisfied + passed: satisfied + inapplicable: satisfied + wcag20:1.3.1: # Info and Relationships (A) + secondary: This success criterion is **related** to this rule. This is because elements assigned a presentational role, but with a global WAI-ARIA state or propert, are exposed in the accessibility tree with their implicit role, potentially leading to WCAG violations. Some of the examples that either pass or fail overlap with this success criterion. +input_aspects: + - Accessibility Tree + - CSS styling + - DOM Tree +acknowledgments: + authors: + - Giacomo Petri +--- + +## Applicability + +This rule applies to any [HTML or SVG element][] that is [included in the accessibility tree][] and has an [explicit semantic role][] of `none` or `presentation`. + +## Expectation + +Each target element does not have any [global WAI-ARIA state or property](https://w3c.github.io/aria/#dfn-global). + +## Assumptions + +There are no assumptions. + +## Accessibility Support + +There are no accessibility support issues known. + +## Background + +While user agents consistently handle elements undergoing [Presentational Roles Conflict Resolution][], authors bear the responsibility of preventing such conflicts. + +If the presentational role is inherited and the element has global WAI-ARIA states or properties, user agents maintain its presentational role regardless of any global ARIA state or property. + +### Bibliography + +- [WAI-ARIA 1.2 - Presentational Roles Conflict Resolution][Presentational Roles Conflict Resolution] + +## Test Cases + +### Passed + +#### Passed Example 1 + +The `table` element with role `presentation` does not have any [global WAI-ARIA state or property](https://w3c.github.io/aria/#dfn-global). + +```html + + + + + + + + + + + +
January$100
February$80
+``` + +#### Passed Example 2 + +The `h1` element with role `none` has an `aria-colspan` which is a non-global role-specific WAI-ARIA property. + +```html +

ACT Rules

+``` + +### Failed + +#### Failed Example 1 + +The `table` element with role `presentation` has an `aria-label` attribute, which is a [global WAI-ARIA state or property](https://w3c.github.io/aria/#dfn-global). + +```html + + + + + + + + + + + +
January$100
February$80
+``` + +#### Failed Example 2 + +The `h1` element with role `none` has an `aria-describedby` attribute, which is a [global WAI-ARIA state or property](https://w3c.github.io/aria/#dfn-global). + +```html +

ACT Rules

+
Read more about our intent
+``` + +### Inapplicable + +#### Inapplicable Example 1 + +This `button` element doesn't have an [explicit semantic role][] of `none` or `presentation`. + +```html + +``` + +#### Inapplicable Example 2 + +This `div` element has an [explicit semantic role][] of `button`, which differs from `none` or `presentation` roles. + +```html +
Submit
+``` + +#### Inapplicable Example 3 + +This `button` element with role `none` is not included in the accessibility tree. + +```html + +``` + +#### Inapplicable Example 4 + +The `li` elements inherits the presentational role from their `ul` parent element, but doesn't have an explicit semantic presentational role itself. + +```html + +``` + +#### Inapplicable Example 5 + +The `td` element inherits the presentational role from its `table` ancestor element, but doesn't have an explicit semantic presentational role itself. Moreover, the `td` element with attribute `aria-colspan` has only a non-global role-specific WAI-ARIA property. + +```html + + + + + + + + + + + + + + +
2024
January$100
February$80
+``` + +[explicit semantic role]: #explicit-role 'Definition of Explicit Role' +[included in the accessibility tree]: #included-in-the-accessibility-tree 'Definition of Included in the Accessibility Tree' +[presentational roles conflict resolution]: https://www.w3.org/TR/wai-aria-1.2/#conflict_resolution_presentation_none 'Presentational Roles Conflict Resolution' +[html or svg element]: #namespaced-element diff --git a/_rules/aria-presentational-role-not-focusable-18pg11.md b/_rules/aria-presentational-role-not-focusable-18pg11.md new file mode 100644 index 0000000000..16b5c8c279 --- /dev/null +++ b/_rules/aria-presentational-role-not-focusable-18pg11.md @@ -0,0 +1,139 @@ +--- +id: 18pg11 +name: ARIA presentational role not focusable +rule_type: atomic +description: | + This rule checks that elements with ARIA presentational role are not focusable +accessibility_requirements: + aria12:conflict_resolution_presentation_none: + title: ARIA 1.2, Presentational Roles Conflict Resolution + forConformance: true + failed: not satisfied + passed: satisfied + inapplicable: satisfied + wcag20:1.3.1: # Info and Relationships (A) + secondary: This success criterion is **related** to this rule. This is because elements assigned a presentational role but are still focusable remain exposed in the accessibility tree with their implicit role, potentially leading to WCAG violations. Some of the examples that either pass or fail overlap with this success criterion. + wcag20:2.4.3: # Focus Order (A) + secondary: This success criterion is **related** to this rule. This is because elements assigned a presentational role but are still focusable might create unnecessary and unclear focus targets. Some of the examples that either pass or fail overlap with this success criterion. +input_aspects: + - Accessibility Tree + - CSS styling + - DOM Tree +acknowledgments: + authors: + - Giacomo Petri +--- + +## Applicability + +This rule applies to any [HTML or SVG element][] that is [included in the accessibility tree][] and has an [explicit semantic role][] or [inherited semantic role][] of `none` or `presentation`. + +## Expectation + +Each target element is not [focusable][]. + +## Assumptions + +There are no assumptions. + +## Accessibility Support + +A common browser, even though an interactive element with explicit presentational role is not focusable, still expose the element with its implicit role. + +## Background + +While user agents consistently handle elements undergoing [Presentational Roles Conflict Resolution][], authors bear the responsibility of preventing such conflicts. + +### Bibliography + +- [WAI-ARIA 1.2 - Presentational Roles Conflict Resolution][Presentational Roles Conflict Resolution] + +## Test Cases + +### Passed + +#### Passed Example 1 + +The `button` element with role `none` is not [focusable][]. + +```html + +``` + +#### Passed Example 2 + +The `img` element with role `presentation` is not [focusable][]. + +```html + +``` + +#### Passed Example 3 + +The `div` element with role `img` has an [inherited semantic role][] of `none` and is not [focusable][]. + +```html + +``` + +### Failed + +#### Failed Example 1 + +The `button` element with role attribute value `presentation` is [focusable][]. + +```html + +``` + +#### Failed Example 2 + +The `button` element with role attribute value `none` is not reachable via keyboard but still [focusable][]. + +```html + +``` + +#### Failed Example 3 + +The `button` element with an [inherited semantic role][] of `none` is [focusable][]. + +```html + + + +``` + +### Inapplicable + +#### Inapplicable Example 1 + +This `button` element doesn't have neither an [explicit semantic role][] or [inherited semantic role][] of `none` or `presentation`. + +```html + +``` + +#### Inapplicable Example 2 + +This `div` element has an [explicit semantic role][] of `button`, which differs from `none` or `presentation` roles. + +```html +
Submit
+``` + +#### Inapplicable Example 3 + +This `button` element with role `none` is not included in the accessibility tree. + +```html + +``` + +[explicit semantic role]: #explicit-role 'Definition of Explicit Role' +[inherited semantic role]: https://w3c.github.io/aria/#presentational-role-inheritance +[included in the accessibility tree]: #included-in-the-accessibility-tree 'Definition of Included in the Accessibility Tree' +[presentational roles conflict resolution]: https://www.w3.org/TR/wai-aria-1.2/#conflict_resolution_presentation_none 'Presentational Roles Conflict Resolution' +[html or svg element]: #namespaced-element