Skip to content

Commit 7e71738

Browse files
WilcoFierstombrunetJym77giacomo-petri
authored
New rule: Summary element has non-empty accessible name (#2202)
* New rule: Summary element has non-empty accessible name * Fix tests * Apply suggestions from code review Co-authored-by: Tom Brunet <[email protected]> * Update summary-non-empty-accessible-name-2t702h.md * Update _rules/summary-non-empty-accessible-name-2t702h.md * Apply suggestions from code review Co-authored-by: Jean-Yves Moyen <[email protected]> * Update _rules/summary-non-empty-accessible-name-2t702h.md * Update _rules/summary-non-empty-accessible-name-2t702h.md * Update _rules/summary-non-empty-accessible-name-2t702h.md * Apply suggestions from code review Co-authored-by: Jean-Yves Moyen <[email protected]> Co-authored-by: Giacomo Petri <[email protected]> * Update _rules/summary-non-empty-accessible-name-2t702h.md Co-authored-by: Giacomo Petri <[email protected]> * Update _rules/summary-non-empty-accessible-name-2t702h.md * Update _rules/summary-non-empty-accessible-name-2t702h.md * Apply suggestions from code review Co-authored-by: Jean-Yves Moyen <[email protected]> * Update _rules/summary-non-empty-accessible-name-2t702h.md --------- Co-authored-by: Tom Brunet <[email protected]> Co-authored-by: Jean-Yves Moyen <[email protected]> Co-authored-by: Giacomo Petri <[email protected]>
1 parent d9a44b4 commit 7e71738

File tree

1 file changed

+206
-0
lines changed

1 file changed

+206
-0
lines changed

‎_rules/summary-non-empty-accessible-name-2t702h.md

+206
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,206 @@
1+
---
2+
id: 2t702h
3+
name: Summary element has non-empty accessible name
4+
rule_type: atomic
5+
description: |
6+
This rule checks that each `summary` element has a non-empty accessible name.
7+
accessibility_requirements:
8+
wcag20:4.1.2: # Name, Role, Value (A)
9+
forConformance: true
10+
failed: not satisfied
11+
passed: further testing needed
12+
inapplicable: further testing needed
13+
input_aspects:
14+
- Accessibility Tree
15+
- DOM Tree
16+
- CSS Styling
17+
acknowledgments:
18+
authors:
19+
- Wilco Fiers
20+
---
21+
22+
## Applicability
23+
24+
This rule applies to HTML `summary` elements for which all the following is true:
25+
26+
- the element is [included in the accessibility tree][]; and
27+
- the element works as the [summary button for its parent `details` element][details summary]; and
28+
- the element has no [explicit role][], or the [explicit role][] is ignored due to a [presentational role conflict][].
29+
30+
## Expectation
31+
32+
Each target element has an [accessible name][] that is not empty (`""`), nor just the name of the `::marker` pseudo element.
33+
34+
## Assumptions
35+
36+
The rule assumes that all `summary` elements are [user interface components as defined by WCAG 2](https://www.w3.org/TR/WCAG22/#dfn-user-interface-components).
37+
38+
## Accessibility Support
39+
40+
There is a difference in how user agents expose the triangle indicating the control's expand state. As a result, some user agents include the triangle in the accessible name of the summary element.
41+
42+
## Background
43+
44+
This rule is only applicable to `summary` elements that the browser will use as controls for a `details` element. While this rule is not applicable to `summary` elements with an [explicit semantic role][], most of the time these likely do still require an [accessible name][]. This is covered by other rules, such as the [Button has non-empty accessible name][97a4e1].
45+
46+
If the `summary` element is not included in the accessibility tree, but is still included in sequential focus navigation, this can result in accessibility issues not tested by this rule. This is covered under [Element with aria-hidden has no content in sequential focus navigation][6cfa84].
47+
48+
Note that some user agents expose the `summary` element with a `button` role. This deviates from the implicit ARIA semantics described in [ARIA in HTML](https://www.w3.org/TR/html-aria/#el-summary). Because some browsers do not give `summary` elements a button role, these elements need to be tested separately from the [Button has non-empty accessible name](https://www.w3.org/WAI/standards-guidelines/act/rules/97a4e1/) ACT rule.
49+
50+
### Bibliography
51+
52+
- [Understanding Success Criterion 4.1.2: Name, Role, Value](https://www.w3.org/WAI/WCAG22/Understanding/name-role-value)
53+
- [ARIA14: Using aria-label to provide an invisible label where a visible label cannot be used](https://www.w3.org/WAI/WCAG22/Techniques/aria/ARIA14)
54+
- [ARIA16: Using aria-labelledby to provide a name for user interface controls](https://www.w3.org/WAI/WCAG22/Techniques/aria/ARIA16)
55+
- [Summary element entry for ARIA in HTML](https://www.w3.org/TR/html-aria/#el-summary)
56+
57+
## Test Cases
58+
59+
### Passed
60+
61+
#### Passed Example 1
62+
63+
This `summary` element has an [accessible name][] because of its text content.
64+
65+
```html
66+
<details>
67+
<summary>Opening times</summary>
68+
<p>This is a website. We are available 24/7.</p>
69+
</details>
70+
```
71+
72+
#### Passed Example 2
73+
74+
This `summary` element has an [accessible name][] because of its `aria-label` attribute.
75+
76+
```html
77+
<details>
78+
<summary aria-label="Opening times"></summary>
79+
<p>This is a website. We are available 24/7.</p>
80+
</details>
81+
```
82+
83+
#### Passed Example 3
84+
85+
This `summary` element has an [accessible name][] because of its `aria-labelledby` attribute.
86+
87+
```html
88+
<span id="opening-times">Opening times</span>
89+
<details>
90+
<summary aria-labelledby="opening-times"></summary>
91+
<p>This is a website. We are available 24/7.</p>
92+
</details>
93+
```
94+
95+
#### Passed Example 4
96+
97+
This `summary` element has an [accessible name][] because of its text content. It does not need to be the first child element of `details`.
98+
99+
```html
100+
<details>
101+
<p>This is a website. We are available 24/7.</p>
102+
<summary>Opening times</summary>
103+
</details>
104+
```
105+
106+
#### Passed Example 5
107+
108+
This first `summary` element has an [accessible name][] because of its text content. The second `summary` element is inapplicable because only the first `summary` element will be used as a control for the `details` element.
109+
110+
```html
111+
<details>
112+
<summary>Opening times</summary>
113+
<summary></summary>
114+
<p>This is a website. We are available 24/7.</p>
115+
</details>
116+
```
117+
118+
### Failed
119+
120+
#### Failed Example 1
121+
122+
This `summary` element has no [accessible name][], or an accessible name with just the `::marker` pseudo element, because it has no content or attribute that can provide it.
123+
124+
```html
125+
<details>
126+
<summary></summary>
127+
<p>This is a website. We are available 24/7.</p>
128+
</details>
129+
```
130+
131+
#### Failed Example 2
132+
133+
This `summary` element has an [explicit role][] of `none`. However, it is [focusable][] (by default) which causes [Presentational Roles Conflict Resolution][]. It fails because it has an empty [accessible name][].
134+
135+
```html
136+
<details>
137+
<summary role="none"></summary>
138+
<p>This is a website. We are available 24/7.</p>
139+
</details>
140+
```
141+
142+
#### Failed Example 3
143+
144+
This first `summary` element has no [accessible name][] because it is empty. The second `summary` element is inapplicable because only the first `summary` element will be used as a control for the `details` element.
145+
146+
```html
147+
<details>
148+
<summary></summary>
149+
<summary>Opening times</summary>
150+
<p>This is a website. We are available 24/7.</p>
151+
</details>
152+
```
153+
154+
### Inapplicable
155+
156+
#### Inapplicable Example 1
157+
158+
This `summary` element is not a child of a `details` element and so will not be interactive.
159+
160+
```html
161+
<summary></summary>
162+
```
163+
164+
#### Inapplicable Example 2
165+
166+
This `summary` element is not a direct child of a `details` element and so will not be interactive.
167+
168+
```html
169+
<details>
170+
<div>
171+
<summary></summary>
172+
</div>
173+
<p>This is a website. We are available 24/7.</p>
174+
</details>
175+
```
176+
177+
#### Inapplicable Example 3
178+
179+
This `summary` element has an explicit semantic role of `button`. These are tested under [Button has non-empty accessible name][97a4e1] instead. Note that while this example does not fail WCAG, under [ARIA in HTML](https://www.w3.org/TR/html-aria/#dfn-no-role) it is not allowed to override the role of a [summary for its parent details][details summary].
180+
181+
```html
182+
<details>
183+
<summary role="button">Opening hours</summary>
184+
<p>This is a website. We are available 24/7.</p>
185+
</details>
186+
```
187+
188+
#### Inapplicable Example 4
189+
190+
This `summary` element is hidden to everyone.
191+
192+
```html
193+
<details style="display:none">
194+
<summary></summary>
195+
<p>This is a website. We are available 24/7.</p>
196+
</details>
197+
```
198+
199+
[accessible name]: #accessible-name 'Definition of accessible name'
200+
[explicit role]: #explicit-role 'Definition of explicit role'
201+
[focusable]: #focusable 'Definition of focusable'
202+
[included in the accessibility tree]: #included-in-the-accessibility-tree 'Definition of included in the accessibility tree'
203+
[presentational roles conflict resolution]: https://www.w3.org/TR/wai-aria-1.2/#conflict_resolution_presentation_none 'Presentational Roles Conflict Resolution'
204+
[details summary]: https://html.spec.whatwg.org/multipage/interactive-elements.html#summary-for-its-parent-details ' HTML 5 definition of summary for its parent details'
205+
[97a4e1]: https://www.w3.org/WAI/standards-guidelines/act/rules/97a4e1/
206+
[6cfa84]: https://www.w3.org/WAI/standards-guidelines/act/rules/6cfa84/

0 commit comments

Comments
 (0)