Digital Accessibility Knowledge Base

summary-name

Summary must have discernible text

Who might be affected
Screen Reader
Voice Control

Description

The <summary> element provides the visible name and the accessible name for the <details> element (i.e., native HTML disclosure). Therefore, the <summary> element is essential for assistive technology users to perceive and understand the element's purpose.

Note that even though this test will also pass if the accessible name is not visible (i.e., aria-label, aria-labelledby, or title attributes), it is still highly recommended to provide a visible name by a text node or a popover label (like a tooltip) so all users can easily perceive the element's content and purpose.

Quick Fixes

Ensure that the summary element contains a valid text node that describes the <details> element’s content.

1✓
2<details>
3    <summary>The details element's title</summary>
4    <!-- The details element's content -->
5</details>
6

The following examples will also pass this test; however, unless providing a visible tooltip or another visible alternative, other users will find it difficult to assess the purpose and context of the <details> element's content.

1✓
2<details>
3    <summary aria-label="The details element's title"></summary>
4    <!-- The details element's content -->
5</details>
6

7

8✓
9<h3 id="disclosure-heading">The details element's title</h3>
10<details>
11    <summary aria-labelledby="disclosure-heading"></summary>
12    <!-- The details element's content -->
13</details>
14

15

16✓
17<details>
18    <summary title="The details element's title"></summary>
19    <!-- The details element's content -->
20</details>

The test fails when the <summary> element is provided without a text node or an alternative name attribute.

1✗
2<details>
3    <summary></summary>
4    <!-- The details element's content -->
5</details>

How Users Are Affected

The accessible name is used by assistive technologies to label, announce and trigger actions of interactive UI elements. When interactive elements don’t have a valid accessible name, assistive technologies lack the hook they are designed to use to parse and read the content accurately.

WCAG Success criteria

This issue might cause elements to fail one or more of the following Success criteria:
[4.1.2 Name, role, value)] (A)