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/aria-required-accessible-name-gp8n89.md
+41-49Lines changed: 41 additions & 49 deletions
Original file line number
Diff line number
Diff line change
@@ -32,7 +32,7 @@ acknowledgments:
32
32
33
33
## Applicability
34
34
35
-
This rule applies to any [HTML or SVG element][] that is [included in the accessibility tree][] and has a [WAI-ARIA 1.2][wai-aria 1.2][explicit semantic role][] that requires an [accessible name][] either from the [author](https://www.w3.org/TR/wai-aria-1.2/#namefromauthor) or the [content](https://www.w3.org/TR/wai-aria-1.2/#namefromcontent), unless the element [implicit semantic role][]matches its [explicit semantic role][].
35
+
This rule applies to any [HTML or SVG element][] that is [included in the accessibility tree][] and has a [WAI-ARIA 1.2][wai-aria 1.2][semantic role][] that requires an [accessible name][] either from the [author](https://www.w3.org/TR/wai-aria-1.2/#namefromauthor) or the [content](https://www.w3.org/TR/wai-aria-1.2/#namefromcontent), unless the element has a presentational [explicit semantic role][]leading to a conflict resolved by [Presentational Roles Conflict Resolution][].
36
36
37
37
## Expectation
38
38
@@ -44,15 +44,15 @@ There are no assumptions.
44
44
45
45
## Accessibility Support
46
46
47
-
Elements with [explicit semantic role][] of `heading` and with no [accessible name][] seem to be consistently ignored by assistive technologies. Nonetheless, in the context of this rule, they fail since [WAI-ARIA 1.2][wai-aria 1.2] mandates the presence of an [accessible name][].
47
+
Elements with a [semantic role][] of `heading` and with no [accessible name][] seem to be consistently ignored by assistive technologies. Nonetheless, in the context of this rule, they fail since [WAI-ARIA 1.2][wai-aria 1.2] mandates the presence of an [accessible name][].
48
48
49
49
The [accessible name and description computation][] suggests that if an `aria-labelledby` attribute refers to an existing but empty element, the computation should stop and return an empty name without defaulting to the next steps. Several user agents and assistive technologies chose to use the next step in the computation in this case (ultimately defaulting to the content).
50
50
51
51
## Background
52
52
53
-
The applicability of this rule is limited to elements that have an [explicit semantic role][]that is not identical to their [implicit semantic role][]. Both [WAI-ARIA 1.2][wai-aria 1.2]and [ARIA in HTML](https://www.w3.org/TR/html-aria/#docconformance) discourage authors from using ARIA when the host language provides a feature with equivalent role semantics and values.
53
+
Although this ARIA rule mandates authors to ensure an [accessible name][]for each [HTML or SVG element][][included in the accessibility tree][] and possessing a [WAI-ARIA 1.2][wai-aria 1.2][semantic role][] requiring an [accessible name][], it does not automatically constitute a WCAG accessibility violation.
54
54
55
-
An example of an element that has an [implicit semantic role][] that is identical to its [explicit semantic role][] is a `<table role="table">` element. These elements are not applicable because they have extra requirements and should thus be checked separately.
55
+
For instance, consider a `search` landmark comprising a `form`element with a search label, search input, and search submit button. According to ARIA specifications, both the `search`role and the `form` role necessitate an [accessible name][]. However, adhering strictly to this rule may lead to repetitive announcements by assistive technologies like screen readers, overwhelming users. Therefore, while this might technically breach ARIA specs, it does not necessarily translate to a violation of WCAG accessibility standards.
56
56
57
57
Elements subjected to the [Presentational Roles Conflict Resolution][] are not part of this rule and must be tested separately.
58
58
@@ -72,13 +72,21 @@ Elements subjected to the [Presentational Roles Conflict Resolution][] are not p
72
72
73
73
#### Passed Example 1
74
74
75
+
This `button` element with an [implicit semantic role] of `button` has an [accessible name][] provided by its content.
76
+
77
+
```html
78
+
<button>Submit</button>
79
+
```
80
+
81
+
#### Passed Example 2
82
+
75
83
The `div` element with role `button` has an [accessible name][] provided by its content.
76
84
77
85
```html
78
86
<divrole="button"tabindex="0">Submit</div>
79
87
```
80
88
81
-
#### Passed Example 2
89
+
#### Passed Example 3
82
90
83
91
The `div` element with role `img` has an [accessible name][] provided by the `aria-label`[attribute value][].
84
92
@@ -88,7 +96,7 @@ The `div` element with role `img` has an [accessible name][] provided by the `ar
88
96
</div>
89
97
```
90
98
91
-
#### Passed Example 3
99
+
#### Passed Example 4
92
100
93
101
The `div` element with role `checkbox` has an [accessible name][] provided thanks to the `aria-labelledby` attribute.
94
102
@@ -97,7 +105,7 @@ The `div` element with role `checkbox` has an [accessible name][] provided thank
97
105
<divid="pass-agree-tc">I agree with terms and conditions</div>
98
106
```
99
107
100
-
#### Passed Example 4
108
+
#### Passed Example 5
101
109
102
110
The `div` element with role `dialog` has an [accessible name][] provided by the `aria-labelledby` attribute.
103
111
@@ -108,23 +116,23 @@ The `div` element with role `dialog` has an [accessible name][] provided by the
108
116
</div>
109
117
```
110
118
111
-
#### Passed Example 5
119
+
#### Passed Example 6
112
120
113
121
The `div` element with role `heading` has an [accessible name][] provided by its content.
114
122
115
123
```html
116
124
<divrole="heading"aria-level="1">Terms</div>
117
125
```
118
126
119
-
#### Passed Example 6
127
+
#### Passed Example 7
120
128
121
129
This `div` element with role `heading` is not [visible][], but is still [included in the accessibility tree][]. It has a non-empty [accessible name][] provided by its content.
The `div` element with role `link` has an [accessible name][] provided by its content.
130
138
@@ -144,6 +152,14 @@ The `div` element with role `button` doesn't have an [accessible name][].
144
152
145
153
#### Failed Example 2
146
154
155
+
This `button` element with an [implicit semantic role] of `button` doesn't have an [accessible name][].
156
+
157
+
```html
158
+
<button></button>
159
+
```
160
+
161
+
#### Failed Example 3
162
+
147
163
The `div` element with role `img` doesn't have an [accessible name][].
148
164
149
165
```html
@@ -152,7 +168,7 @@ The `div` element with role `img` doesn't have an [accessible name][].
152
168
</div>
153
169
```
154
170
155
-
#### Failed Example 3
171
+
#### Failed Example 4
156
172
157
173
The `div` element with role `checkbox` doesn't have an [accessible name][].
158
174
@@ -161,7 +177,7 @@ The `div` element with role `checkbox` doesn't have an [accessible name][].
161
177
<div>I agree with terms and conditions</div>
162
178
```
163
179
164
-
#### Failed Example 4
180
+
#### Failed Example 5
165
181
166
182
The `dialog` role accepts an [accessible name][] only from the author and not from its content. Therefore, the `div` element with role `dialog` doesn't have an [accessible name][].
167
183
@@ -172,15 +188,15 @@ The `dialog` role accepts an [accessible name][] only from the author and not fr
172
188
</div>
173
189
```
174
190
175
-
#### Failed Example 5
191
+
#### Failed Example 6
176
192
177
193
The `div` element with role `heading` has an empty [accessible name][] due to the empty `aria-label`[attribute value][].
The `div` element with role `button` has an empty [accessible name][] because the `value` attribute does not count in the computation of the [accessible name][].
195
211
196
212
```html
197
213
<divrole="button"value="test"></div>
198
214
```
199
215
200
-
#### Failed Example 8
216
+
#### Failed Example 9
201
217
202
218
This `div` element with role `button` is not [visible][], but is still [included in the accessibility tree][]. It doesn't have an [accessible name][], therefore failing the rule.
The `div` element with role `link` has an empty [accessible name][].
211
227
@@ -217,51 +233,26 @@ The `div` element with role `link` has an empty [accessible name][].
217
233
218
234
#### Inapplicable Example 1
219
235
220
-
This `button` element has no [explicit semantic role][].
236
+
This `div` element is not [included in the accessibility tree][], hence its [semantic role][] is not relevant.
221
237
222
238
```html
223
-
<button>Submit</button>
239
+
<divrole="button"style="display:none;"></div>
224
240
```
225
241
226
242
#### Inapplicable Example 2
227
243
228
-
This `div` element is not [included in the accessibility tree][], hence its [explicit semantic role][] is not relevant.
244
+
This `div` element has an [semantic role][] of `group`, which does not require an [accessible name][].
229
245
230
246
```html
231
-
<divrole="button"style="display:none;"></div>
247
+
<divrole="group">Some content</div>
232
248
```
233
249
234
250
#### Inapplicable Example 3
235
251
236
-
This `table` element has an [explicit semantic role][] of `table`, that is identical to its [implicit semantic role][].
237
-
238
-
```html
239
-
<tablerole="table">
240
-
<thead>
241
-
<tr>
242
-
<th>Table Header 1</th>
243
-
<th>Table Header 2</th>
244
-
</tr>
245
-
</thead>
246
-
<tbody>
247
-
<tr>
248
-
<td>Some content 1</td>
249
-
<td>Some content 2</td>
250
-
</tr>
251
-
<tr>
252
-
<td>Some content 3</td>
253
-
<td>Some content 4</td>
254
-
</tr>
255
-
</tbody>
256
-
</table>
257
-
```
258
-
259
-
#### Inapplicable Example 4
260
-
261
-
This `div` element has an [explicit semantic role][] of `group`, which does not require an [accessible name][].
252
+
This `button` element has an [explicit semantic role][] of `none`. leading to a conflict resolved by [Presentational Roles Conflict Resolution][], which is not covered by this rule.
262
253
263
254
```html
264
-
<divrole="group">Some content</div>
255
+
<buttonrole="none">submit</button>
265
256
```
266
257
267
258
<!-- Boundary example for future improvement -->
@@ -275,8 +266,9 @@ This `button` element has an [explicit semantic role][] of `none`. Although the
275
266
276
267
[accessible name]: #accessible-name'Definition of accessible name'
277
268
[attribute value]: #attribute-value'Definition of attribute value'
278
-
[explicit semantic role]: #explicit-role'Definition of Explicit Role'
269
+
[semantic role]: #semantic-role'Definition of Semantic Role'
279
270
[implicit semantic role]: #implicit-role'Definition of Implicit Role'
271
+
[explicit semantic role]: #explicit-role'Definition of Explicit Role'
280
272
[included in the accessibility tree]: #included-in-the-accessibility-tree'Definition of Included in the Accessibility Tree'
0 commit comments