Skip to content

Commit 08c3596

Browse files
Update aria-required-accessible-name-gp8n89.md
1 parent a5a4b62 commit 08c3596

File tree

1 file changed

+41
-49
lines changed

1 file changed

+41
-49
lines changed

_rules/aria-required-accessible-name-gp8n89.md

Lines changed: 41 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ acknowledgments:
3232

3333
## Applicability
3434

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

3737
## Expectation
3838

@@ -44,15 +44,15 @@ There are no assumptions.
4444

4545
## Accessibility Support
4646

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

4949
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).
5050

5151
## Background
5252

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.
5454

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.
5656

5757
Elements subjected to the [Presentational Roles Conflict Resolution][] are not part of this rule and must be tested separately.
5858

@@ -72,13 +72,21 @@ Elements subjected to the [Presentational Roles Conflict Resolution][] are not p
7272

7373
#### Passed Example 1
7474

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+
7583
The `div` element with role `button` has an [accessible name][] provided by its content.
7684

7785
```html
7886
<div role="button" tabindex="0">Submit</div>
7987
```
8088

81-
#### Passed Example 2
89+
#### Passed Example 3
8290

8391
The `div` element with role `img` has an [accessible name][] provided by the `aria-label` [attribute value][].
8492

@@ -88,7 +96,7 @@ The `div` element with role `img` has an [accessible name][] provided by the `ar
8896
</div>
8997
```
9098

91-
#### Passed Example 3
99+
#### Passed Example 4
92100

93101
The `div` element with role `checkbox` has an [accessible name][] provided thanks to the `aria-labelledby` attribute.
94102

@@ -97,7 +105,7 @@ The `div` element with role `checkbox` has an [accessible name][] provided thank
97105
<div id="pass-agree-tc">I agree with terms and conditions</div>
98106
```
99107

100-
#### Passed Example 4
108+
#### Passed Example 5
101109

102110
The `div` element with role `dialog` has an [accessible name][] provided by the `aria-labelledby` attribute.
103111

@@ -108,23 +116,23 @@ The `div` element with role `dialog` has an [accessible name][] provided by the
108116
</div>
109117
```
110118

111-
#### Passed Example 5
119+
#### Passed Example 6
112120

113121
The `div` element with role `heading` has an [accessible name][] provided by its content.
114122

115123
```html
116124
<div role="heading" aria-level="1">Terms</div>
117125
```
118126

119-
#### Passed Example 6
127+
#### Passed Example 7
120128

121129
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.
122130

123131
```html
124132
<div role="heading" aria-level="1" style="position: absolute; left: -9999px">ACT rules</div>
125133
```
126134

127-
#### Passed Example 7
135+
#### Passed Example 8
128136

129137
The `div` element with role `link` has an [accessible name][] provided by its content.
130138

@@ -144,6 +152,14 @@ The `div` element with role `button` doesn't have an [accessible name][].
144152

145153
#### Failed Example 2
146154

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+
147163
The `div` element with role `img` doesn't have an [accessible name][].
148164

149165
```html
@@ -152,7 +168,7 @@ The `div` element with role `img` doesn't have an [accessible name][].
152168
</div>
153169
```
154170

155-
#### Failed Example 3
171+
#### Failed Example 4
156172

157173
The `div` element with role `checkbox` doesn't have an [accessible name][].
158174

@@ -161,7 +177,7 @@ The `div` element with role `checkbox` doesn't have an [accessible name][].
161177
<div>I agree with terms and conditions</div>
162178
```
163179

164-
#### Failed Example 4
180+
#### Failed Example 5
165181

166182
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][].
167183

@@ -172,15 +188,15 @@ The `dialog` role accepts an [accessible name][] only from the author and not fr
172188
</div>
173189
```
174190

175-
#### Failed Example 5
191+
#### Failed Example 6
176192

177193
The `div` element with role `heading` has an empty [accessible name][] due to the empty `aria-label` [attribute value][].
178194

179195
```html
180196
<div role="heading" aria-level="1" aria-label="">Terms</div>
181197
```
182198

183-
#### Failed Example 6
199+
#### Failed Example 7
184200

185201
The `div` element with role `heading` has an empty [accessible name][] given by its `aria-labelledby` attribute.
186202

@@ -189,23 +205,23 @@ The `div` element with role `heading` has an empty [accessible name][] given by
189205
<div role="heading" aria-level="1" aria-labelledby="fail-heading">ACT Rules</div>
190206
```
191207

192-
#### Failed Example 7
208+
#### Failed Example 8
193209

194210
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][].
195211

196212
```html
197213
<div role="button" value="test"></div>
198214
```
199215

200-
#### Failed Example 8
216+
#### Failed Example 9
201217

202218
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.
203219

204220
```html
205221
<div role="button" style="position: absolute; left: -9999px" tabindex="0"></div>
206222
```
207223

208-
#### Failed Example 9
224+
#### Failed Example 10
209225

210226
The `div` element with role `link` has an empty [accessible name][].
211227

@@ -217,51 +233,26 @@ The `div` element with role `link` has an empty [accessible name][].
217233

218234
#### Inapplicable Example 1
219235

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.
221237

222238
```html
223-
<button>Submit</button>
239+
<div role="button" style="display:none;"></div>
224240
```
225241

226242
#### Inapplicable Example 2
227243

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

230246
```html
231-
<div role="button" style="display:none;"></div>
247+
<div role="group">Some content</div>
232248
```
233249

234250
#### Inapplicable Example 3
235251

236-
This `table` element has an [explicit semantic role][] of `table`, that is identical to its [implicit semantic role][].
237-
238-
```html
239-
<table role="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.
262253

263254
```html
264-
<div role="group">Some content</div>
255+
<button role="none">submit</button>
265256
```
266257

267258
<!-- Boundary example for future improvement -->
@@ -275,8 +266,9 @@ This `button` element has an [explicit semantic role][] of `none`. Although the
275266

276267
[accessible name]: #accessible-name 'Definition of accessible name'
277268
[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'
279270
[implicit semantic role]: #implicit-role 'Definition of Implicit Role'
271+
[explicit semantic role]: #explicit-role 'Definition of Explicit Role'
280272
[included in the accessibility tree]: #included-in-the-accessibility-tree 'Definition of Included in the Accessibility Tree'
281273
[presentational roles conflict resolution]: https://www.w3.org/TR/wai-aria-1.2/#conflict_resolution_presentation_none 'Presentational Roles Conflict Resolution'
282274
[wai-aria 1.2]: https://www.w3.org/TR/wai-aria-1.2/

0 commit comments

Comments
 (0)