diff --git a/__tests__/spelling-ignore.yml b/__tests__/spelling-ignore.yml index 106dbb404b..9c50ab046d 100644 --- a/__tests__/spelling-ignore.yml +++ b/__tests__/spelling-ignore.yml @@ -151,6 +151,8 @@ - href - src - srcset +- aria-braillelabel +- aria-brailleroledescription - aria-labelled # used to demonstrate wrong attribute - autofill-field - autocomplete diff --git a/_rules/aria-global-property-not-prohibited-kb1m8s.md b/_rules/aria-global-property-not-prohibited-kb1m8s.md new file mode 100755 index 0000000000..bd0e86fb94 --- /dev/null +++ b/_rules/aria-global-property-not-prohibited-kb1m8s.md @@ -0,0 +1,165 @@ +--- +id: kb1m8s +name: ARIA global properties not used where prohibited +rules_format: 1.1 +rule_type: atomic +description: | + This rule checks that global WAI-ARIA properties are not on elements whose role prohibits them. +accessibility_requirements: + aria12:prohibitedattributes: + title: ARIA 1.2, 5.2.5 Prohibited States and Properties + forConformance: true + failed: not satisfied + passed: satisfied + inapplicable: satisfied + wcag-technique:ARIA5: # Using WAI-ARIA state and property attributes to expose the state of a user interface component + forConformance: false + failed: not satisfied + passed: further testing needed + inapplicable: further testing needed + wcag20:1.3.1: # Info and Relationships (A) + secondary: This success criterion is **less strict** than this rule. This is because the rule does not ignore irrelevant ARIA properties. Some of the failed examples satisfy this success criterion. +input_aspects: + - Accessibility Tree + - CSS styling + - DOM Tree +acknowledgments: + authors: + - Wilco Fiers + previous_authors: + - Anne Thyme Nørregaard + - Jean-Yves Moyen +--- + +## Applicability + +This rule applies to any [WAI-ARIA global state or property][global] that is specified on an [HTML or SVG element][namespaced element] that is [included in the accessibility tree][]. + +## Expectation + +The test target is not [prohibited][] for the [semantic role][] of the element on which it is specified. + +## Background + +The presence of prohibited ARIA attributes is often the result of a developer using an incorrect role, or a misunderstanding of the attribute. These attributes are ignored by browsers and other assistive technologies. This often means that a state or property which should exist is missing. + +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). + +### Assumptions + +There are no assumptions. + +### Accessibility Support + +Browsers and assistive technologies behave differently when prohibited attributes are used. Some may assign a role so that the property is available to assistive technologies, where others ignore the attribute. + +Implementation of [Presentational Roles Conflict Resolution][] varies from one browser or assistive technology to another. Depending on this, some elements can have a [semantic role][] of `none` and their attributes fail this rule with some technologies but users of other technology would not experience any accessibility issue. + +### Related rules + +- [ARIA state or property is permitted](https://www.w3.org/WAI/standards-guidelines/act/rules/5c01ea/) +- [ARIA state or property has valid value](https://www.w3.org/WAI/standards-guidelines/act/rules/6a7281/) + +### Bibliography + +- [Understanding Success Criterion 1.3.1: Info and Relationships](https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html) +- [Understanding Success Criterion 4.1.2: Name, Role, Value](https://www.w3.org/WAI/WCAG22/Understanding/name-role-value.html) +- [WAI-ARIA 1.2, Prohibited States and Properties](https://www.w3.org/TR/wai-aria/#prohibitedattributes) +- [WAI-ARIA 1.2, Global States and Properties](https://www.w3.org/TR/wai-aria-1.2/#global_states) +- [ARIA5: Using WAI-ARIA state and property attributes to expose the state of a user interface component](https://www.w3.org/WAI/WCAG22/Techniques/aria/ARIA5) + +## Examples + +### Passed + +#### Passed Example 1 + +This generic `div` element is allowed the global `aria-live` property. + +```html +
I like Bananas
+``` + +#### Passed Example 2 + +This `a` element with an [implicit role][] of `link` is allowed the `aria-label` property. + +```html + €100 / €1 +``` + +#### Passed Example 3 + +This `div` element is allowed the `aria-braillelabel` property because its [explicit role][] of `heading` does not prohibit this. + +```html +
+ I ❤️ Bananas +
+``` + +### Failed + +#### Failed Example 1 + +The `aria-label` property is [prohibited][] for an element with a `generic` role. + +```html +
€100 / €1
+``` + +#### Failed Example 2 + +The `aria-labelledby` property is [prohibited][] for an element with a `paragraph` role. + +```html +

I like bananas

+

🧑 ❤️ 🍌🍌

+``` + +#### Failed Example 3 + +The `aria-braillelabel` property is [prohibited][] for an element with a `button` role. + +```html +

I ❤️ Bananas

+``` + +#### Failed Example 4 + +The `aria-roledescription` property is [prohibited][] for an element with a `generic` role. + +```html +
I like bananas
+``` + +#### Failed Example 5 + +The `aria-brailleroledescription` property is [prohibited][] for an element with a `none` role. + +```html +

I like bananas

+``` + +### Inapplicable + +#### Inapplicable Example 1 + +The generic `div` element is hidden. + +```html + +``` + +[explicit role]: #explicit-role 'Definition of Explicit Role' +[global]: https://www.w3.org/TR/wai-aria-1.2/#global_states 'Definition of Global ARIA States and Properties' +[included in the accessibility tree]: #included-in-the-accessibility-tree 'Definition of Included in the Accessibility Tree' +[inherited]: https://www.w3.org/TR/wai-aria-1.2/#inheritedattributes 'Definition of Inherited ARIA States and Properties' +[presentational roles conflict resolution]: https://www.w3.org/TR/wai-aria-1.2/#conflict_resolution_presentation_none 'Presentational Roles Conflict Resolution' +[property]: https://www.w3.org/TR/wai-aria-1.2/#dfn-property 'Definition of ARIA Property' +[required]: https://www.w3.org/TR/wai-aria-1.2/#requiredState 'Definition of Required ARIA States and Properties' +[semantic role]: #semantic-role 'Definition of Semantic Role' +[state]: https://www.w3.org/TR/wai-aria-1.2/#dfn-state 'Definition of ARIA State' +[supported]: https://www.w3.org/TR/wai-aria-1.2/#supportedState 'Definition of Supported ARIA States and Properties' +[namespaced element]: #namespaced-element +[prohibited]: https://www.w3.org/TR/wai-aria-1.2/#prohibitedattributes 'WAI-ARIA 1.2 Definition of Prohibited States and Properties' diff --git a/_rules/aria-state-or-property-permitted-5c01ea.md b/_rules/aria-state-or-property-permitted-5c01ea.md index 2698c178bb..7c6ca7ea65 100755 --- a/_rules/aria-state-or-property-permitted-5c01ea.md +++ b/_rules/aria-state-or-property-permitted-5c01ea.md @@ -39,7 +39,7 @@ acknowledgments: 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][]. -## Expectation 1 +## Expectation For each test target, one of the following is true: @@ -47,13 +47,9 @@ For each test target, one of the following is true: - **semantic role**: the test target is an [inherited][], [supported][], or [required][] [state][] or [property][] of the [semantic role][] of the element on which the test target is specified; or - **language feature**: the test target is specified on an [HTML element][namespaced element] and is allowed on that element. Which ARIA states or properties may be used on which element is described in [ARIA in HTML](https://w3c.github.io/html-aria/). -## Expectation 2 - -No test target is [prohibited][] on the [semantic role][] of the element on which it is specified. - ## Background -The presence of prohibited ARIA attributes is often the result of a developer using an incorrect role, or a misunderstanding of the attribute. These attributes are ignored by browsers and other assistive technologies. This often means that a state or property which should exist is missing. +The use of ARIA attributes that are not supported by a role is often the result of a developer using either an incorrect role, or misunderstanding the attribute. These attributes are ignored by browsers and other assistive technologies. This often means that information that should exist is missing to assistive technology users. 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). @@ -69,6 +65,7 @@ Implementation of [Presentational Roles Conflict Resolution][] varies from one b ### Related rules +- [ARIA global properties not used where prohibited](https://www.w3.org/WAI/standards-guidelines/act/rules/kb1m8s/) - [ARIA state or property has valid value](https://www.w3.org/WAI/standards-guidelines/act/rules/6a7281/) ### Bibliography @@ -110,7 +107,7 @@ The `aria-busy` [state][] is a [global][] [state][] that is [supported][] by all #### Passed Example 4 -The `aria-label` [property][] is a [global][] [property][]. It is allowed on any [semantic role][], except where specifically prohibited. +The `aria-label` [property][] is a [global][] [property][]. ```html
@@ -150,7 +147,7 @@ The `aria-controls` [property][] is [required][] for the [semantic][semantic rol #### Passed Example 9 -The `aria-label` [property][] is [global][]. It is allowed on any [semantic role][], except where specifically prohibited, including roles from the [WAI-ARIA Graphics Module](https://www.w3.org/TR/graphics-aria-1.0). This rule is applicable to SVG elements. +The `aria-label` [property][] is [global][]. It is allowed on any [semantic role][], including roles from the [WAI-ARIA Graphics Module](https://www.w3.org/TR/graphics-aria-1.0). This rule is applicable to SVG elements. ```html @@ -181,8 +178,13 @@ This `div` element has an [explicit role][] of `switch`; the `aria-required` [pr ```html
Notifications - - + + @@ -215,22 +217,6 @@ The `aria-orientation` property may not be used on `audio` element, nor can it b ``` -#### Failed Example 3 - -The `aria-label` property is [prohibited][] for an element with a `generic` role. - -```html -
-``` - -#### Failed Example 4 - -The `aria-label` property is [prohibited][] for an element with a `paragraph` role. - -```html -
-``` - ### Inapplicable #### Inapplicable Example 1 @@ -264,4 +250,3 @@ This `div` element is not [included in the accessibility tree][], hence its [WAI [supported]: https://www.w3.org/TR/wai-aria-1.2/#supportedState 'Definition of Supported ARIA States and Properties' [wai-aria state or property]: https://www.w3.org/TR/wai-aria-1.2/#state_prop_def 'Definition of ARIA States and Properties' [namespaced element]: #namespaced-element -[prohibited]: https://www.w3.org/TR/wai-aria-1.2/#prohibitedattributes 'WAI-ARIA 1.2 Definition of Prohibited States and Properties'