You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
This commit replaces this file with the contents from commit 86a8b09 i.e. upstream/develop.
I think that my mistake was: I committed a certain unrelated commit (intended for a feature branch unrelated to this one) onto my fork's develop branch. That was commit 81caf8a. What I should have done at that time was: make that commit onto my feature branch presentational-children-no-focusable-content-307n5z---examples-aug-2023.
Copy file name to clipboardExpand all lines: _rules/presentational-children-no-focusable-content-307n5z.md
+6-93Lines changed: 6 additions & 93 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -67,7 +67,7 @@ None of these `button` elements has [descendants][] that are included in [sequen
67
67
68
68
#### Passed Example 2
69
69
70
-
This element with the `checkbox` role has no [descendants][] that are included in [sequential focus navigation][]. Instead the link to the terms of service is adjacent, and `aria-labelledby` is used to provide its [accessible name][].
70
+
This element with `checkbox` role has no [descendants][] that are included in [sequential focus navigation][]. Instead the link to the terms of service is adjacent, and `aria-labelledby` is used to provide its [accessible name][].
71
71
72
72
```html
73
73
<pid="terms">
@@ -80,7 +80,7 @@ This element with the `checkbox` role has no [descendants][] that are included i
80
80
81
81
#### Passed Example 3
82
82
83
-
This element with the `menuitemcheckbox` role has an `input` element as a descendant. Because the `input` is disabled it is not included in [sequential focus navigation][].
83
+
This element with `menuitemcheckbox` role has an `input` element as a descendant. Because the `input` is disabled it is not included in [sequential focus navigation][].
84
84
85
85
**Note**: The `input` checkbox has a `role`[attribute value][] of `none` to ensure it is ignored by browsers that do not support [presentational children][].
86
86
@@ -93,15 +93,6 @@ This element with the `menuitemcheckbox` role has an `input` element as a descen
93
93
</ul>
94
94
```
95
95
96
-
#### Passed Example 4
97
-
98
-
This `<button>` element has an `<a>` element as a [child][]. The `<a>` element has no `href` attribute, so it isn't included in [sequential focus navigation][]. So this `<button>` element passes the rule.
99
-
100
-
```html
101
-
<button><a>button/link</a></button>
102
-
```
103
-
104
-
105
96
### Failed
106
97
107
98
#### Failed Example 1
@@ -117,15 +108,15 @@ This `button` element has a [child][] `span` element. Because the `span` element
117
108
118
109
#### Failed Example 2
119
110
120
-
This element with the `checkbox` role has an `a` element as a [child][]. Because the `a` element has an `href` attribute, it is included in [sequential focus navigation][].
111
+
This element with `checkbox` role has an `a` element as a [child][]. Because the `a` element has an `href` attribute, it is included in [sequential focus navigation][].
121
112
122
113
```html
123
114
<prole="checkbox"aria-checked="false"tabindex="0">I agree to the <ahref="/terms">terms of service</a></p>
124
115
```
125
116
126
117
#### Failed Example 3
127
118
128
-
This element with the `menuitemcheckbox` role has a checkbox as a child. Because the checkbox is not disabled, it is included in [sequential focus navigation][].
119
+
This element with `menuitemcheckbox` role has a checkbox as a child. Because the checkbox is not disabled, it is included in [sequential focus navigation][].
129
120
130
121
```html
131
122
<ulrole="menu">
@@ -136,93 +127,16 @@ This element with the `menuitemcheckbox` role has a checkbox as a child. Because
136
127
</ul>
137
128
```
138
129
139
-
#### Failed Example 4
140
-
141
-
This element with the `tab` role contains an `<a>` element. The `tab` role has [presentational children][]. The `a` element is included in [sequential focus navigation][]. So the element with the `tab` role fails the rule. (This tablist implementation is non-functional for users. It's not meant to function - it's only meant to show roles.)
142
-
143
-
```html
144
-
<ulrole="tablist">
145
-
<lirole="tab">
146
-
<ahref="#">Tab 1</a>
147
-
</li>
148
-
</ul>
149
-
```
150
-
151
-
#### Failed Example 5
152
-
153
-
This element with the `img` role contains an `<a>` element. The `img` role has [presentational children][]. The `<a>` element is included in [sequential focus navigation][]. So the element with the `img` role fails the rule. (Interestingly, no similar failure is possible with a standard HTML `<img>` element, because according to the HTML specification, the `<img>` element has no closing tag. So it's impossible to put anything inside of an `<img>` element.)
154
-
155
-
```html
156
-
<spanrole="img"aria-label="some ASCII art">****** This ASCII art ******* <ahref="#">contains a link.</a></span>
157
-
```
158
-
159
130
### Inapplicable
160
131
161
132
#### Inapplicable Example 1
162
133
163
-
None of the roles involved in this semantic table have [presentational children][]. (The roles are `table`, `row`, and `cell`, respectively, for the `<table>`, `<tr>`, and `<td>` elements.) So this rule does not apply.
134
+
This element has a `link` role which does not have [presentational children][].
164
135
165
136
```html
166
-
<table>
167
-
<thead>
168
-
<tr>
169
-
<thcolspan="2">semantic table header</th>
170
-
</tr>
171
-
</thead>
172
-
<tbody>
173
-
<tr>
174
-
<td><button>button in semantic table - no problem</button></td>
175
-
<td><ahref="#">anchor in semantic table - no problem</a></td>
176
-
</tr>
177
-
</tbody>
178
-
</table>
137
+
<ahref="https://w3.org">W3C Website</a>
179
138
```
180
139
181
-
#### Inapplicable Example 2
182
-
183
-
This `<a>` element has a `link` role, which does not have [presentational children][]. So this element - perhaps surprisingly - does not fail this rule, because it's inapplicable. This is the case even though it's invalid HTML. Any time there's a link as the <i>outer</i> element, that will be inapplicable under this rule. (If the elements were switched - that is, if the `<button>` element contained the `<a>` element - then that would fail this rule.)
The applicability of this rule does not include elements with an <i>explicit</i> role of `presentation`. Only <i>implicit</i> (through roles with [presentational children][]). This example shows that.
192
-
193
-
```html
194
-
<ul>
195
-
<lirole="presentation">
196
-
<ahref="#">inapplicable</a>
197
-
</li>
198
-
</ul>
199
-
```
200
-
201
-
#### Inapplicable Example 4
202
-
203
-
The applicability of this rule does not include hidden elements. It only includes <i>presentational</i> elements (through roles with [presentational children][]). These two terms - "hidden" and "presentational" - are often confused. When an element is "hidden", that means that it is completely omitted from the accessibility tree. When an element is "presentational", that means that its semantic role is omitted from the accessibility tree, but its content remains.
204
-
205
-
The [ARIA 1.2 specification]https://www.w3.org/TR/wai-aria-1.2/#presentation) mentions this confusion:
206
-
<ul>
207
-
<li>
208
-
<q>Many individuals erroneously consider role="presentation" to be synonymous with aria-hidden="true"</q>
209
-
</li>
210
-
<li>
211
-
<q>... the presentation role causes a given element to be treated as having no role or to be removed from the accessibility tree, but does not cause the content contained within the element to be removed from the accessibility tree.</q>
212
-
</li>
213
-
</ul>
214
-
215
-
Adding to this confusion is a third term: "decorative". The words "decorative" and "presentational" are often used interchangeably, but that usage is inaccurate. The word "decorative" often appears in a sentence such as "marking an image as decorative" - that is, by adding `alt=""` to an `<img>` element. "Decorative" in that context <i>does</i> mean "hidden" - and "hidden", again, is different from "presentational" - so using "decorative" and "presentational" interchangeably is inaccurate. At the time of writing (August 2023), the ACT definition of "[marked as decorative][]" unfortunately encourages this inaccurate usage: it states that <q>An element is marked as decorative if ... it has an explicit role of none or presentation</q>.
216
-
217
-
At any rate: this example shows that this rule does not apply to hidden elements.
218
-
219
-
```html
220
-
<buttonaria-hidden="true">
221
-
<ahref="#">inapplicable</a>
222
-
</button>
223
-
```
224
-
225
-
226
140
[accessible name]: #accessible-name'Definition of Accessible name'
227
141
[attribute value]: #attribute-value'Definition of Attribute value'
228
142
[semantic role]: #semantic-role'Definition of Semantic role'
@@ -233,4 +147,3 @@ At any rate: this example shows that this rule does not apply to hidden elements
0 commit comments