Accessibility Rule: summary Element Has No Accessible Name (Explained)

Summary

This rule ensures that expandable content controls clearly communicate their purpose to users through meaningful labels. When a summary element lacks an accessible name, users may not understand what action the control performs or what content it will reveal.

Overview

Providing descriptive names for interactive elements helps users understand their purpose and how to interact with them. The <summary> element acts as a control that expands or collapses content, so it must have an accessible name that clearly describes what it does.

What This Rule Means

What does the accessibility rule “summary element has no accessible name” mean?

Why This Matters (Impact)

The <summary> element acts as a control that expands or collapses content within a <details> element. Because it functions as an interactive control, it must have an accessible name that clearly describes what it does.

Providing descriptive names for interactive elements helps users understand their purpose and how to interact with them. If a <summary> element does not have an accessible name, users may not understand what content will be revealed when it is activated.

How the Check Works

Ensure that every <summary> element includes a clear and descriptive accessible name.

You can do this by:

• Adding visible, descriptive text inside the <summary> element
• Providing an accessible name using attributes such as: 
  • aria-label
  • aria-labelledby

Example

<details>
  <summary>Learn more about pricing</summary>
  <p>Detailed pricing information goes here.</p>
</details>

Example (using ARIA)

<summary aria-label="Expand pricing details"></summary>

Tip: Visible text is preferred whenever possible, as it benefits all users—not just those using assistive technology.

Additional information

• This rule checks whether each <summary> element used as the control for a <details> element has a non-empty accessible name.

  The rule applies when:

  • The <summary> element is used as the toggle control of a <details> element 
  • The element is included in the accessibility tree 
  • The element does not have a conflicting explicit role 

• An accessible name can be provided through:

  • Visible text inside the <summary> element 
  • Attributes such as aria-label or aria-labelledby 

• The rule fails if the <summary> element:

  • Has no text content or accessible name 
  • Has an empty accessible name 
  • Only exposes non-descriptive content (such as the default marker icon) 
• For detailed technical requirements, see the official rule documentation:
  • <summary> element has non-empty accessible name