Skip to content

Commit 68c95c5

Browse files
giacomo-petrigiacomo-petri
authored
Create aria-presentational-role-no-global-states-properties.md
elements with ARIA presentational role do not have global states or properties
1 parent dceaf1d commit 68c95c5

File tree

1 file changed

+175
-0
lines changed

1 file changed

+175
-0
lines changed

‎_rules/aria-presentational-role-no-global-states-properties.md

Lines changed: 175 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,175 @@
1+
---
2+
id: p8g918
3+
name: ARIA presentational role does not have global states or properties
4+
rule_type: atomic
5+
description: |
6+
This rule checks that elements with ARIA presentational role do not have global states or properties
7+
accessibility_requirements:
8+
aria12:conflict_resolution_presentation_none:
9+
title: ARIA 1.2, Presentational Roles Conflict Resolution
10+
forConformance: true
11+
failed: not satisfied
12+
passed: satisfied
13+
inapplicable: satisfied
14+
wcag20:1.3.1: # Info and Relationships (A)
15+
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.
16+
input_aspects:
17+
- Accessibility Tree
18+
- CSS styling
19+
- DOM Tree
20+
acknowledgments:
21+
authors:
22+
- Giacomo Petri
23+
---
24+
25+
## Applicability
26+
27+
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`.
28+
29+
## Expectation
30+
31+
Each target element does not have any [global WAI-ARIA state or property](https://w3c.github.io/aria/#dfn-global).
32+
33+
## Assumptions
34+
35+
There are no assumptions.
36+
37+
## Accessibility Support
38+
39+
There are no accessibility support issues known.
40+
41+
## Background
42+
43+
While user agents consistently handle elements undergoing [Presentational Roles Conflict Resolution][], authors bear the responsibility of preventing such conflicts.
44+
45+
### Bibliography
46+
47+
- [WAI-ARIA 1.2 - Presentational Roles Conflict Resolution][Presentational Roles Conflict Resolution]
48+
49+
## Test Cases
50+
51+
### Passed
52+
53+
#### Passed Example 1
54+
55+
The `table` element with role `presentation` does not have any [global WAI-ARIA state or property](https://w3c.github.io/aria/#dfn-global).
56+
57+
```html
58+
<table role="presentation">
59+
<tbody>
60+
<tr>
61+
<td>January</td>
62+
<td>$100</td>
63+
</tr>
64+
<tr>
65+
<td>February</td>
66+
<td>$80</td>
67+
</tr>
68+
</tbody>
69+
</table>
70+
```
71+
72+
#### Passed Example 2
73+
74+
The `h1` element with role `none` has an `aria-colspan` which is a non-global role-specific WAI-ARIA property.
75+
76+
```html
77+
<h1 role="none" aria-level="2">ACT Rules</h1>
78+
```
79+
80+
### Failed
81+
82+
#### Failed Example 1
83+
84+
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).
85+
86+
```html
87+
<table role="presentation" aria-label="trend">
88+
<tbody>
89+
<tr>
90+
<td>January</td>
91+
<td>$100</td>
92+
</tr>
93+
<tr>
94+
<td>February</td>
95+
<td>$80</td>
96+
</tr>
97+
</tbody>
98+
</table>
99+
```
100+
101+
#### Failed Example 2
102+
103+
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).
104+
105+
```html
106+
<h1 role="none" aria-describedby="h1-desc">ACT Rules</h1>
107+
<div id="h1-desc">Read more about our intent</div>
108+
```
109+
110+
### Inapplicable
111+
112+
#### Inapplicable Example 1
113+
114+
This `button` element doesn't have an [explicit semantic role][] of `none` or `presentation`.
115+
116+
```html
117+
<button>Submit</button>
118+
```
119+
120+
#### Inapplicable Example 2
121+
122+
This `div` element has an [explicit semantic role][] of `button`, which differs from `none` or `presentation` roles.
123+
124+
```html
125+
<div role="button">Submit</div>
126+
```
127+
128+
#### Inapplicable Example 3
129+
130+
This `button` element with role `none` is not included in the accessibility tree.
131+
132+
```html
133+
<button role="none" style="display:none">Submit</button>
134+
```
135+
136+
#### Inapplicable Example 4
137+
138+
The `li` elements inherits the presentational role from their `ul` parent element, but doesn't have an explicit semantic presentational role itself.
139+
140+
```html
141+
<ul role="none">
142+
<li aria-description="2.2">WCAG</li>
143+
<li>ARIA</li>
144+
<li>ACT Rules</li>
145+
</ul>
146+
```
147+
148+
#### Inapplicable Example 5
149+
150+
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.
151+
152+
```html
153+
<table role="presentation">
154+
<tbody>
155+
<tr>
156+
<td aria-colspan="2">2024</td>
157+
</tr>
158+
<tr>
159+
<td>January</td>
160+
<td>$100</td>
161+
</tr>
162+
<tr>
163+
<td>February</td>
164+
<td>$80</td>
165+
</tr>
166+
</tbody>
167+
</table>
168+
```
169+
170+
[explicit semantic role]: #explicit-role 'Definition of Explicit Role'
171+
[inherited semantic role]: https://w3c.github.io/aria/#presentational-role-inheritance
172+
[included in the accessibility tree]: #included-in-the-accessibility-tree 'Definition of Included in the Accessibility Tree'
173+
[presentational roles conflict resolution]: https://www.w3.org/TR/wai-aria-1.2/#conflict_resolution_presentation_none 'Presentational Roles Conflict Resolution'
174+
[wai-aria 1.2]: https://www.w3.org/TR/wai-aria-1.2/
175+
[html or svg element]: #namespaced-element

0 commit comments

Comments
 (0)