summary-name

Description

Every <summary> element must have discernible text.

The <summary> element acts as the interactive label for a <details> disclosure widget. When a <summary> element lacks text, screen reader users cannot determine the purpose of the control or what content will be revealed when they activate it. This text is essential for providing an accessible name to the disclosure button.

The summary-name rule aligns with WCAG Success Criterion 4.1.2 (Name, Role, Value), which requires that the name and role for every user interface component can be programmatically determined.

Examples

In the following example, the <summary> element is empty, providing no information to assistive technologies.

In the following corrected example, descriptive text is added within the <summary> tags:

How to fix?

To fix violations of the summary-name rule, follow these steps:

• Locate all <summary> elements in your code.

• Ensure each <summary> element contains text that describes the content it reveals.

• If you use an icon or image inside the <summary> instead of text, provide an accessible name using aria-label on the <summary> or alt text on the image.

• Avoid leaving the <summary> empty or using only whitespace.

Reference

• WCAG Success Criterion 4.1.2: Name, Role, Value