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
Copy file name to clipboardExpand all lines: _rules/presentational-children-no-focusable-content-307n5z.md
+57-8Lines changed: 57 additions & 8 deletions
Original file line number
Diff line number
Diff line change
@@ -43,16 +43,17 @@ This rule assumes that elements that are part of [sequential focus navigation][]
43
43
44
44
Several major browsers ignore the WAI-ARIA requirements on [presentational children][] for most or sometimes all roles, or in presence of focusable content. Since some browsers implement presentational children while others do not, pages failing this rule may only be problematic with some browsers.
45
45
46
+
This rule is often misunderstood as applying to elements with an _explicit_ role of `presentation`. In fact, this rule only applies to elements which have been given an _implicit_ role of `presentation` through the [presentational children][] mechanism. Similarly, this rule does not apply to elements with `aria-hidden="true"`.
47
+
46
48
### Related rules
47
49
48
-
-[Element with aria-hidden has no focusable content](https://www.w3.org/WAI/standards-guidelines/act/rules/6cfa84/)
50
+
-[Element with aria-hidden has no content in sequential focus navigation](https://www.w3.org/WAI/standards-guidelines/act/rules/6cfa84/)
49
51
50
52
### Bibliography
51
53
52
54
-[Understanding Success Criterion 1.3.1: Info and Relationships](https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships)
-[Element with aria-hidden has no focusable content](aria-hidden-no-focusable-content-6cfa84.md)
56
57
57
58
## Test Cases
58
59
@@ -68,7 +69,7 @@ None of these `button` elements has [descendants][] that are included in [sequen
68
69
69
70
#### Passed Example 2
70
71
71
-
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][].
72
+
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][].
72
73
73
74
```html
74
75
<pid="terms">
@@ -81,7 +82,7 @@ This element with `checkbox` role has no [descendants][] that are included in [s
81
82
82
83
#### Passed Example 3
83
84
84
-
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][].
85
+
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][].
85
86
86
87
**Note**: The `input` checkbox has a `role`[attribute value][] of `none` to ensure it is ignored by browsers that do not support [presentational children][].
87
88
@@ -94,6 +95,15 @@ This element with `menuitemcheckbox` role has an `input` element as a descendant
94
95
</ul>
95
96
```
96
97
98
+
#### Passed Example 4
99
+
100
+
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.
101
+
102
+
```html
103
+
<button><a>button/link</a></button>
104
+
```
105
+
106
+
97
107
### Failed
98
108
99
109
#### Failed Example 1
@@ -109,15 +119,15 @@ This `button` element has a [child][] `span` element. Because the `span` element
109
119
110
120
#### Failed Example 2
111
121
112
-
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][].
122
+
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][].
113
123
114
124
```html
115
125
<prole="checkbox"aria-checked="false"tabindex="0">I agree to the <ahref="/terms">terms of service</a></p>
116
126
```
117
127
118
128
#### Failed Example 3
119
129
120
-
This element with `menuitemcheckbox` role has a checkbox as a child. Because the checkbox is not disabled, it is included in [sequential focus navigation][].
130
+
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][].
121
131
122
132
```html
123
133
<ulrole="menu">
@@ -128,14 +138,53 @@ This element with `menuitemcheckbox` role has a checkbox as a child. Because the
128
138
</ul>
129
139
```
130
140
141
+
#### Failed Example 4
142
+
143
+
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.)
144
+
145
+
```html
146
+
<ulrole="tablist">
147
+
<lirole="tab">
148
+
<ahref="#">Tab 1</a>
149
+
</li>
150
+
</ul>
151
+
```
152
+
153
+
#### Failed Example 5
154
+
155
+
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.
156
+
157
+
```html
158
+
<spanrole="img"aria-label="some ASCII art">****** This ASCII art ******* <ahref="#">contains a link.</a></span>
159
+
```
160
+
131
161
### Inapplicable
132
162
133
163
#### Inapplicable Example 1
134
164
135
-
This element has a `link` role which does not have [presentational children][].
165
+
None of the roles that build this semantic table structure (`table` for `table`, `row` for `tr`, `columnheader` for `th`, and `cell` for `td`) have [presentational children][]. So this rule does not apply to them.
166
+
167
+
```html
168
+
<table>
169
+
<thead>
170
+
<tr>
171
+
<th><ahref="#">link in table header cell - no problem</a></th>
172
+
</tr>
173
+
</thead>
174
+
<tbody>
175
+
<tr>
176
+
<td><ahref="#">link in table data cell - no problem</a></td>
177
+
</tr>
178
+
</tbody>
179
+
</table>
180
+
```
181
+
182
+
#### Inapplicable Example 2
183
+
184
+
This `a` element has a `link` role, which does not have [presentational children][]. So this `a` element does not fail this rule, because it's inapplicable. To have a "focusable element within a focusable element" like this is a bad practice, but this rule doesn't directly check for it.
0 commit comments