Skip to content

Commit dceaf1d

Browse files
Create aria-allowed-child-element-with-presentational-parent-1g88p9.md
allowed child element of another element with presentational role does not cause presentational roles conflicts
1 parent 25d2111 commit dceaf1d

File tree

1 file changed

+173
-0
lines changed

1 file changed

+173
-0
lines changed
Lines changed: 173 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,173 @@
1+
---
2+
id: gp1889
3+
name: ARIA allowed child element of another element with presentational role
4+
rule_type: atomic
5+
description: |
6+
This rule checks that allowed child element of another element with presentational role does not cause presentational roles conflicts
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 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.
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][], is an [allowed child element](https://w3c.github.io/aria/#mustContain) of another element with an [explicit semantic role][] of `none` or `presentation`.
28+
29+
## Expectation
30+
31+
For each target element one of the following is true:
32+
- The element doesn't have any [explicit semantic role][];
33+
- The element has an [explicit semantic role][] of `none` or `presentation`.
34+
35+
## Assumptions
36+
37+
There are no assumptions.
38+
39+
## Accessibility Support
40+
41+
There are no accessibility support issues known.
42+
43+
## Background
44+
45+
While user agents consistently handle elements undergoing [Presentational Roles Conflict Resolution][], authors bear the responsibility of preventing such conflicts.
46+
47+
### Bibliography
48+
49+
- [WAI-ARIA 1.2 - Presentational Roles Conflict Resolution][Presentational Roles Conflict Resolution]
50+
51+
## Test Cases
52+
53+
### Passed
54+
55+
#### Passed Example 1
56+
57+
The `li` elements inherit the presentational role from their `ul` parent element with an [explicit semantic role][] of `none`.
58+
59+
```html
60+
<ul role="none">
61+
<li>WCAG</li>
62+
<li>ARIA</li>
63+
<li>ACT Rules</li>
64+
</ul>
65+
```
66+
67+
#### Passed Example 2
68+
69+
The `tr` and `td` elements inherit the presentational role from their `table` ancestor element with an [explicit semantic role][] of `presentation`.
70+
71+
```html
72+
<table role='presentation'>
73+
<tbody>
74+
<tr>
75+
<td>ACT Rules</td>
76+
<td>WCAG</td>
77+
</tr>
78+
<tr>
79+
<td>ARIA</td>
80+
<td></td>
81+
</tr>
82+
</tbody>
83+
</table>
84+
```
85+
86+
#### Passed Example 3
87+
88+
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`.
89+
90+
```html
91+
<ul role="none">
92+
<li role="none">WCAG</li>
93+
<li role="none">ARIA</li>
94+
<li role="none">ACT Rules</li>
95+
</ul>
96+
```
97+
98+
### Failed
99+
100+
#### Failed Example 1
101+
102+
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`.
103+
104+
```html
105+
<ul role="none">
106+
<li role="listitem">WCAG</li>
107+
<li role="listitem">ARIA</li>
108+
<li role="listitem">ACT Rules</li>
109+
</ul>
110+
```
111+
112+
#### Failed Example 2
113+
114+
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`.
115+
116+
```html
117+
<table role='presentation'>
118+
<tbody>
119+
<tr>
120+
<td role="cell">ACT Rules</td>
121+
<td role="cell">WCAG</td>
122+
</tr>
123+
<tr>
124+
<td role="cell">ARIA</td>
125+
<td role="cell"></td>
126+
</tr>
127+
</tbody>
128+
</table>
129+
```
130+
131+
### Inapplicable
132+
133+
#### Inapplicable Example 1
134+
135+
The `li` elements are no included in the accessibility tree.
136+
137+
```html
138+
<ul role="none" style="display:none">
139+
<li role="none">WCAG</li>
140+
<li role="none">ARIA</li>
141+
<li role="none">ACT Rules</li>
142+
</ul>
143+
```
144+
145+
#### Inapplicable Example 2
146+
147+
The `ul` element doesn't have a role of `none` or `presentation`.
148+
149+
```html
150+
<ul>
151+
<li role="listitem">WCAG</li>
152+
<li role="listitem">ARIA</li>
153+
<li role="listitem">ACT Rules</li>
154+
</ul>
155+
```
156+
157+
#### Inapplicable Example 3
158+
159+
The `a` elements with a semantic role of `link` are not [allowed child element](https://w3c.github.io/aria/#mustContain) of the `ul` element.
160+
161+
```html
162+
<ul role="presentation">
163+
<a href="https://www.w3.org/TR/WCAG22/">WCAG</button>
164+
<a href="https://w3c.github.io/aria/">ARIA</button>
165+
</ul>
166+
```
167+
168+
[explicit semantic role]: #explicit-role 'Definition of Explicit Role'
169+
[inherited semantic role]: https://w3c.github.io/aria/#presentational-role-inheritance
170+
[included in the accessibility tree]: #included-in-the-accessibility-tree 'Definition of Included in the Accessibility Tree'
171+
[presentational roles conflict resolution]: https://www.w3.org/TR/wai-aria-1.2/#conflict_resolution_presentation_none 'Presentational Roles Conflict Resolution'
172+
[wai-aria 1.2]: https://www.w3.org/TR/wai-aria-1.2/
173+
[html or svg element]: #namespaced-element

0 commit comments

Comments
 (0)