Skip to content

Commit 22ad17b

Browse files
Fixing mistaken branch/merge.
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.
1 parent a37cfd3 commit 22ad17b

1 file changed

Lines changed: 6 additions & 93 deletions

File tree

_rules/presentational-children-no-focusable-content-307n5z.md

Lines changed: 6 additions & 93 deletions
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@ None of these `button` elements has [descendants][] that are included in [sequen
6767

6868
#### Passed Example 2
6969

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][].
7171

7272
```html
7373
<p id="terms">
@@ -80,7 +80,7 @@ This element with the `checkbox` role has no [descendants][] that are included i
8080

8181
#### Passed Example 3
8282

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][].
8484

8585
**Note**: The `input` checkbox has a `role` [attribute value][] of `none` to ensure it is ignored by browsers that do not support [presentational children][].
8686

@@ -93,15 +93,6 @@ This element with the `menuitemcheckbox` role has an `input` element as a descen
9393
</ul>
9494
```
9595

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-
10596
### Failed
10697

10798
#### Failed Example 1
@@ -117,15 +108,15 @@ This `button` element has a [child][] `span` element. Because the `span` element
117108

118109
#### Failed Example 2
119110

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][].
121112

122113
```html
123114
<p role="checkbox" aria-checked="false" tabindex="0">I agree to the <a href="/terms">terms of service</a></p>
124115
```
125116

126117
#### Failed Example 3
127118

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][].
129120

130121
```html
131122
<ul role="menu">
@@ -136,93 +127,16 @@ This element with the `menuitemcheckbox` role has a checkbox as a child. Because
136127
</ul>
137128
```
138129

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-
<ul role="tablist">
145-
<li role="tab">
146-
<a href="#">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-
<span role="img" aria-label="some ASCII art">****** This ASCII art ******* <a href="#">contains a link.</a></span>
157-
```
158-
159130
### Inapplicable
160131

161132
#### Inapplicable Example 1
162133

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][].
164135

165136
```html
166-
<table>
167-
<thead>
168-
<tr>
169-
<th colspan="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><a href="#">anchor in semantic table - no problem</a></td>
176-
</tr>
177-
</tbody>
178-
</table>
137+
<a href="https://w3.org">W3C Website</a>
179138
```
180139

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.)
184-
185-
```html
186-
<a href="https://w3.org"><button>W3C Website</button></a>
187-
```
188-
189-
#### Inapplicable Example 3
190-
191-
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-
<li role="presentation">
196-
<a href="#">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-
<button aria-hidden="true">
221-
<a href="#">inapplicable</a>
222-
</button>
223-
```
224-
225-
226140
[accessible name]: #accessible-name 'Definition of Accessible name'
227141
[attribute value]: #attribute-value 'Definition of Attribute value'
228142
[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
233147
[sequential focus navigation]: https://html.spec.whatwg.org/#sequential-focus-navigation 'HTML sequential focus navigation, 2020/10/21'
234148
[flat tree]: https://drafts.csswg.org/css-scoping/#flat-tree 'CSS Scoping definition of Flat tree, working draft'
235149
[html or svg element]: #namespaced-element
236-
[marked as decorative]: /glossary/#marked-as-decorative

0 commit comments

Comments
 (0)