Skip to content

Commit b0c4d28

Browse files
WilcoFiersWilcoFiers
committed
New rule: Summary element has non-empty accessible name
1 parent dff94b2 commit b0c4d28

File tree

1 file changed

+181
-0
lines changed

1 file changed

+181
-0
lines changed

‎_rules/summary-non-empty-accessible-name-97a4e1 copy.md

Lines changed: 181 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,181 @@
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, all the following are true:
25+
26+
- the element is [included in the accessibility tree][]; and
27+
- the element's [DOM tree][] parent is an HTML `details` element; and
28+
- the element is the first `summary` element of its siblings; and
29+
- the element has no [explicit role][], or an [explicit role][] which causes a [presentational role conflict][].
30+
31+
## Expectation
32+
33+
Each target element has an [accessible name][] that is not empty (`""`).
34+
35+
## Assumptions
36+
37+
- 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).
38+
39+
## Accessibility Support
40+
41+
- Implementation of [Presentational Roles Conflict Resolution][] varies from one browser or assistive technology to another. Depending on this, some elements can have a [semantic role][] of `button` and fail this rule with some technology but users of other technologies would not experience any accessibility issue.
42+
43+
## Background
44+
45+
This rule is only applicable to `summary` elements that the browser will use as controls for a `summary` 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].
46+
47+
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].
48+
49+
### Bibliography
50+
51+
- [HTML Accessibility API Mappings 1.0 (working draft), 5.2 `input type="button"`, `input type="submit"` and `input type="reset"`](https://www.w3.org/TR/html-aam/#input-type-button-input-type-submit-and-input-type-reset)
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+
56+
## Test Cases
57+
58+
### Passed
59+
60+
#### Passed Example 1
61+
62+
This `summary` element has an [accessible name][] because of its text content.
63+
64+
```html
65+
<details>
66+
<summary>Opening times</summary>
67+
<p>This is a website. We are available 24/7.</p>
68+
</details>
69+
```
70+
71+
#### Passed Example 2
72+
73+
This `summary` element has an [accessible name][] because of its `aria-label` attribute.
74+
75+
```html
76+
<details>
77+
<summary aria-label="Opening times"></summary>
78+
<p>This is a website. We are available 24/7.</p>
79+
</details>
80+
```
81+
82+
#### Passed Example 3
83+
84+
This `summary` element has an [accessible name][] because of its `aria-labelledby` attribute.
85+
86+
```html
87+
<span id="opening-times">Opening times</span>
88+
<details>
89+
<summary aria-labelledby="opening-times"></summary>
90+
<p>This is a website. We are available 24/7.</p>
91+
</details>
92+
```
93+
94+
#### Passed Example 4
95+
96+
This `summary` element has an [accessible name][] because of its text content. It does not need to be the first child element of `details`.
97+
98+
```html
99+
<details>
100+
<p>This is a website. We are available 24/7.</p>
101+
<summary>Opening times</summary>
102+
</details>
103+
```
104+
105+
### Failed
106+
107+
#### Failed Example 1
108+
109+
This `summary` element has no [accessible name][] because it has no content or attribute that can provide it.
110+
111+
<details>
112+
<summary></summary>
113+
<p>This is a website. We are available 24/7.</p>
114+
</details>
115+
116+
#### Failed Example 2
117+
118+
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][].
119+
120+
```html
121+
<details>
122+
<summary role="none"></summary>
123+
<p>This is a website. We are available 24/7.</p>
124+
</details>
125+
```
126+
127+
### Inapplicable
128+
129+
#### Inapplicable Example 1
130+
131+
This `summary` element is not a child of a `details` element and so will not be interactive.
132+
133+
```html
134+
<summary></summary>
135+
```
136+
137+
#### Inapplicable Example 2
138+
139+
This `summary` element is not a direct child of a `details` element and so will not be interactive.
140+
141+
```html
142+
<details>
143+
<div>
144+
<summary></summary>
145+
</div>
146+
<p>This is a website. We are available 24/7.</p>
147+
</details>
148+
```
149+
150+
#### Inapplicable Example 3
151+
152+
This `summary` element has an explicit semantic role of `button`. These are tested under [Button has non-empty accessible name][97a4e1] instead.
153+
154+
```html
155+
<details>
156+
<summary role="button">Opening hours</summary>
157+
<p>This is a website. We are available 24/7.</p>
158+
</details>
159+
```
160+
161+
#### Inapplicable Example 4
162+
163+
This `summary` element is hidden to everyone.
164+
165+
```html
166+
<details style="display:none">
167+
<summary></summary>
168+
<p>This is a website. We are available 24/7.</p>
169+
</details>
170+
```
171+
172+
[accessible name]: #accessible-name 'Definition of accessible name'
173+
[attribute value]: #attribute-value 'Definition of Attribute Value'
174+
[explicit role]: #explicit-role 'Definition of explicit role'
175+
[focusable]: #focusable 'Definition of focusable'
176+
[html aam input button]: https://www.w3.org/TR/html-aam-1.0/#input-type-button-input-type-submit-and-input-type-reset 'HTML Accessibility API Mapping, reset and submit buttons'
177+
[included in the accessibility tree]: #included-in-the-accessibility-tree 'Definition of included in the accessibility tree'
178+
[presentational roles conflict resolution]: https://www.w3.org/TR/wai-aria-1.2/#conflict_resolution_presentation_none 'Presentational Roles Conflict Resolution'
179+
[semantic role]: #semantic-role 'Definition of Semantic Role'
180+
[97a4e1]: https://www.w3.org/WAI/standards-guidelines/act/rules/97a4e1/
181+
[6cfa84]: https://www.w3.org/WAI/standards-guidelines/act/rules/6cfa84/

0 commit comments

Comments
 (0)