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

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.

Environment / Applicability

• Product/Feature: Accessibility checking (HTML semantics and ARIA)
• Audience: Content authors, developers, accessibility teams
• Technologies affected: Screen readers, keyboard navigation, assistive technologies

Symptoms

This issue impacts users who rely on assistive technologies to understand and navigate content:

• Screen reader users rely on accessible names to identify the purpose of interactive elements 
• Users with cognitive disabilities benefit from clear and descriptive labels that explain functionality 
• Keyboard-only users may also depend on accessible names to understand controls when navigating through a page

If a <summary> element does not have an accessible name, users may not understand what content will be revealed when it is activated.

Cause

This issue occurs when a <summary> element:

• Contains no visible text
• Has empty or missing accessible text
• Relies only on a default marker icon or non-descriptive content

Because the <summary> element functions as an interactive control, it must expose a non-empty accessible name to be usable by assistive technologies.

Resolution

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