Skip to content

Commit 8a338c7

Browse files
WilcoFierscarlosapaduartezlayaAvocadoJym77
authored
Split ARIA props not prohibited from ARIA props permitted (#2342)
* Split ARIA props not prohibited from ARIA props permitted * update examples * cleanup * update * pass tests * Apply suggestion from @WilcoFiers * Apply suggestion from @WilcoFiers * Apply suggestion from @carlosapaduarte Co-authored-by: Carlos Duarte <caduarte@edu.ulisboa.pt> * Apply suggestion from @carlosapaduarte Co-authored-by: Carlos Duarte <caduarte@edu.ulisboa.pt> * Apply suggestion from @zlayaAvocado Co-authored-by: Aleksandra <50310535+zlayaAvocado@users.noreply.github.com> * Apply suggestion from @carlosapaduarte Co-authored-by: Carlos Duarte <caduarte@edu.ulisboa.pt> * Apply suggestion from @carlosapaduarte Co-authored-by: Carlos Duarte <caduarte@edu.ulisboa.pt> * Update _rules/aria-global-property-not-prohibited-kb1m8s.md Co-authored-by: Jean-Yves Moyen <jym@siteimprove.com> * Apply suggestion from @WilcoFiers --------- Co-authored-by: Carlos Duarte <caduarte@edu.ulisboa.pt> Co-authored-by: Aleksandra <50310535+zlayaAvocado@users.noreply.github.com> Co-authored-by: Jean-Yves Moyen <jym@siteimprove.com>
1 parent 8d21520 commit 8a338c7

File tree

3 files changed

+172
-25
lines changed

3 files changed

+172
-25
lines changed

‎__tests__/spelling-ignore.yml‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -151,6 +151,8 @@
151151
- href
152152
- src
153153
- srcset
154+
- aria-braillelabel
155+
- aria-brailleroledescription
154156
- aria-labelled # used to demonstrate wrong attribute
155157
- autofill-field
156158
- autocomplete

‎_rules/aria-global-property-not-prohibited-kb1m8s.md‎

Lines changed: 165 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,165 @@
1+
---
2+
id: kb1m8s
3+
name: ARIA global properties not used where prohibited
4+
rules_format: 1.1
5+
rule_type: atomic
6+
description: |
7+
This rule checks that global WAI-ARIA properties are not on elements whose role prohibits them.
8+
accessibility_requirements:
9+
aria12:prohibitedattributes:
10+
title: ARIA 1.2, 5.2.5 Prohibited States and Properties
11+
forConformance: true
12+
failed: not satisfied
13+
passed: satisfied
14+
inapplicable: satisfied
15+
wcag-technique:ARIA5: # Using WAI-ARIA state and property attributes to expose the state of a user interface component
16+
forConformance: false
17+
failed: not satisfied
18+
passed: further testing needed
19+
inapplicable: further testing needed
20+
wcag20:1.3.1: # Info and Relationships (A)
21+
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.
22+
input_aspects:
23+
- Accessibility Tree
24+
- CSS styling
25+
- DOM Tree
26+
acknowledgments:
27+
authors:
28+
- Wilco Fiers
29+
previous_authors:
30+
- Anne Thyme Nørregaard
31+
- Jean-Yves Moyen
32+
---
33+
34+
## Applicability
35+
36+
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][].
37+
38+
## Expectation
39+
40+
The test target is not [prohibited][] for the [semantic role][] of the element on which it is specified.
41+
42+
## Background
43+
44+
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.
45+
46+
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).
47+
48+
### Assumptions
49+
50+
There are no assumptions.
51+
52+
### Accessibility Support
53+
54+
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.
55+
56+
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.
57+
58+
### Related rules
59+
60+
- [ARIA state or property is permitted](https://www.w3.org/WAI/standards-guidelines/act/rules/5c01ea/)
61+
- [ARIA state or property has valid value](https://www.w3.org/WAI/standards-guidelines/act/rules/6a7281/)
62+
63+
### Bibliography
64+
65+
- [Understanding Success Criterion 1.3.1: Info and Relationships](https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html)
66+
- [Understanding Success Criterion 4.1.2: Name, Role, Value](https://www.w3.org/WAI/WCAG22/Understanding/name-role-value.html)
67+
- [WAI-ARIA 1.2, Prohibited States and Properties](https://www.w3.org/TR/wai-aria/#prohibitedattributes)
68+
- [WAI-ARIA 1.2, Global States and Properties](https://www.w3.org/TR/wai-aria-1.2/#global_states)
69+
- [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)
70+
71+
## Examples
72+
73+
### Passed
74+
75+
#### Passed Example 1
76+
77+
This generic `div` element is allowed the global `aria-live` property.
78+
79+
```html
80+
<div aria-live="polite">I like Bananas</div>
81+
```
82+
83+
#### Passed Example 2
84+
85+
This `a` element with an [implicit role][] of `link` is allowed the `aria-label` property.
86+
87+
```html
88+
<a href="#" aria-label="Previously 100, now 1 euro"> <s>€100</s> / <b>€1</b> </a>
89+
```
90+
91+
#### Passed Example 3
92+
93+
This `div` element is allowed the `aria-braillelabel` property because its [explicit role][] of `heading` does not prohibit this.
94+
95+
```html
96+
<div role="heading" aria-braillelabel="I like bananas">
97+
I ❤️ Bananas
98+
</div>
99+
```
100+
101+
### Failed
102+
103+
#### Failed Example 1
104+
105+
The `aria-label` property is [prohibited][] for an element with a `generic` role.
106+
107+
```html
108+
<div aria-label="Previously 100, now 1 euro"><s>€100</s> / <b>€1</b></div>
109+
```
110+
111+
#### Failed Example 2
112+
113+
The `aria-labelledby` property is [prohibited][] for an element with a `paragraph` role.
114+
115+
```html
116+
<h1 id="bananas">I like bananas</h1>
117+
<p aria-labelledby="Bananas">🧑 ❤️ 🍌🍌</p>
118+
```
119+
120+
#### Failed Example 3
121+
122+
The `aria-braillelabel` property is [prohibited][] for an element with a `button` role.
123+
124+
```html
125+
<p aria-braillelabel="I love Bananas">I ❤️ Bananas</p>
126+
```
127+
128+
#### Failed Example 4
129+
130+
The `aria-roledescription` property is [prohibited][] for an element with a `generic` role.
131+
132+
```html
133+
<div aria-roledescription="Banana text">I like bananas</div>
134+
```
135+
136+
#### Failed Example 5
137+
138+
The `aria-brailleroledescription` property is [prohibited][] for an element with a `none` role.
139+
140+
```html
141+
<h1 role="none" aria-brailleroledescription="Banana text">I like bananas</h1>
142+
```
143+
144+
### Inapplicable
145+
146+
#### Inapplicable Example 1
147+
148+
The generic `div` element is hidden.
149+
150+
```html
151+
<div aria-label="Bananas" hidden></div>
152+
```
153+
154+
[explicit role]: #explicit-role 'Definition of Explicit Role'
155+
[global]: https://www.w3.org/TR/wai-aria-1.2/#global_states 'Definition of Global ARIA States and Properties'
156+
[included in the accessibility tree]: #included-in-the-accessibility-tree 'Definition of Included in the Accessibility Tree'
157+
[inherited]: https://www.w3.org/TR/wai-aria-1.2/#inheritedattributes 'Definition of Inherited ARIA States and Properties'
158+
[presentational roles conflict resolution]: https://www.w3.org/TR/wai-aria-1.2/#conflict_resolution_presentation_none 'Presentational Roles Conflict Resolution'
159+
[property]: https://www.w3.org/TR/wai-aria-1.2/#dfn-property 'Definition of ARIA Property'
160+
[required]: https://www.w3.org/TR/wai-aria-1.2/#requiredState 'Definition of Required ARIA States and Properties'
161+
[semantic role]: #semantic-role 'Definition of Semantic Role'
162+
[state]: https://www.w3.org/TR/wai-aria-1.2/#dfn-state 'Definition of ARIA State'
163+
[supported]: https://www.w3.org/TR/wai-aria-1.2/#supportedState 'Definition of Supported ARIA States and Properties'
164+
[namespaced element]: #namespaced-element
165+
[prohibited]: https://www.w3.org/TR/wai-aria-1.2/#prohibitedattributes 'WAI-ARIA 1.2 Definition of Prohibited States and Properties'

‎_rules/aria-state-or-property-permitted-5c01ea.md‎

Lines changed: 5 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -39,21 +39,17 @@ acknowledgments:
3939

4040
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][].
4141

42-
## Expectation 1
42+
## Expectation
4343

4444
For each test target, one of the following is true:
4545

4646
- **global**: the test target is a [global state or property][global]; or
4747
- **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
4848
- **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/).
4949

50-
## Expectation 2
51-
52-
No test target is [prohibited][] on the [semantic role][] of the element on which it is specified.
53-
5450
## Background
5551

56-
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.
52+
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.
5753

5854
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).
5955

@@ -71,6 +67,7 @@ Implementation of [Presentational Roles Conflict Resolution][] varies from one b
7167

7268
### Related rules
7369

70+
- [ARIA global properties not used where prohibited](https://www.w3.org/WAI/standards-guidelines/act/rules/kb1m8s/)
7471
- [ARIA state or property has valid value](https://www.w3.org/WAI/standards-guidelines/act/rules/6a7281/)
7572

7673
### Other Resources
@@ -112,7 +109,7 @@ The `aria-busy` [state][] is a [global][] [state][] that is [supported][] by all
112109

113110
#### Passed Example 4
114111

115-
The `aria-label` [property][] is a [global][] [property][]. It is allowed on any [semantic role][], except where specifically prohibited.
112+
The `aria-label` [property][] is a [global][] [property][].
116113

117114
```html
118115
<div role="button" aria-label="OK">✓</div>
@@ -152,7 +149,7 @@ The `aria-expanded` [property][] is [required][] for the [semantic][semantic rol
152149

153150
#### Passed Example 9
154151

155-
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.
152+
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.
156153

157154
```html
158155
<svg xmlns="http://www.w3.org/2000/svg" role="graphics-object" width="100" height="100" aria-label="yellow circle">
@@ -222,22 +219,6 @@ The `aria-orientation` property may not be used on `audio` element, nor can it b
222219
<audio src="/test-assets/moon-audio/moon-speech.mp3" controls aria-orientation="horizontal"></audio>
223220
```
224221

225-
#### Failed Example 3
226-
227-
The `aria-label` property is [prohibited][] for an element with a `generic` role.
228-
229-
```html
230-
<div aria-label="Bananas"></div>
231-
```
232-
233-
#### Failed Example 4
234-
235-
The `aria-label` property is [prohibited][] for an element with a `paragraph` role.
236-
237-
```html
238-
<div role="paragraph" aria-label="Bananas"></div>
239-
```
240-
241222
### Inapplicable
242223

243224
#### Inapplicable Example 1
@@ -271,4 +252,3 @@ This `div` element is not [included in the accessibility tree][], hence its [WAI
271252
[supported]: https://www.w3.org/TR/wai-aria-1.2/#supportedState 'Definition of Supported ARIA States and Properties'
272253
[wai-aria state or property]: https://www.w3.org/TR/wai-aria-1.2/#state_prop_def 'Definition of ARIA States and Properties'
273254
[namespaced element]: #namespaced-element
274-
[prohibited]: https://www.w3.org/TR/wai-aria-1.2/#prohibitedattributes 'WAI-ARIA 1.2 Definition of Prohibited States and Properties'

0 commit comments

Comments
 (0)