Ensure summary elements have discernible text

<summary> elements, which act as controls for expanding and collapsing <details> sections, must contain clear and descriptive text to indicate their purpose to all users, including those relying on assistive technologies.

About This Rule

This guideline ensures that <summary> elements have discernible text, enhancing accessibility for users who rely on screen readers. Adhering to this practice aligns with the following standards:

• WCAG 2.1 (A): 4.1.2 Name, Role, Value
• WCAG 2.0 (A): 4.1.2 Name, Role, Value
• WCAG 2.2 (A): 4.1.2 Name, Role, Value
• Section 508: 1194.22(a) - A text equivalent for every non-text element shall be provided (e.g., via "alt", "longdesc", or in element content)
• Trusted Tester: 6.A - The purpose of each link or button can be determined from any combination of the link/button text, accessible name, accessible description, and/or programmatically determined link/button context.
• EN 301 549: 9.4.1.2 Name, Role, Value

Why It Matters

Screen reader users depend on accessible names to understand the function of interactive elements. A <summary> element without discernible text fails to convey its purpose, potentially preventing users from discovering and accessing the content within the associated <details> element. This lack of information can hinder navigation and content discovery for individuals with disabilities. ([dequeuniversity.com](https://dequeuniversity.com/rules/axe/4.10/summary-name?application=RuleDescription&utm_source=chatgpt.com))

How to Fix

To enhance accessibility:

• Provide Visible Text Within the <summary> Element: Include descriptive text directly inside the <summary> tag to clearly indicate the content or purpose of the expandable section.
  

  <details>
    <summary>More Information</summary>
    <p>Additional details about the topic.</p>
  </details>

• Use ARIA Attributes for Non-Visible Text: If the <summary> element lacks visible text (e.g., when using a background image), provide an accessible name using ARIA attributes:
  • aria-label: Adds an invisible label to the element.
  • aria-labelledby: References another element that contains the descriptive text.
  • title: Offers a tooltip alternative that some screen readers may announce.
  

  <!-- Using aria-label -->
  <details>
    <summary aria-label="More Information"></summary>
    <p>Additional details about the topic.</p>
  </details>
  
  <!-- Using aria-labelledby -->
  <span id="summary1-label" class="visually-hidden">More Information</span>
  <details>
    <summary aria-labelledby="summary1-label"></summary>
    <p>Additional details about the topic.</p>
  </details>
  
  <!-- Using title attribute -->
  <details>
    <summary title="More Information"></summary>
    <p>Additional details about the topic.</p>
  </details>

Examples

Incorrect

A <summary> element without discernible text:

<details>
  <summary></summary>
  <p>Additional details about the topic.</p>
</details>

Correct

A <summary> element with descriptive text:

<details>
  <summary>More Information</summary>
  <p>Additional details about the topic.</p>
</details>

More Information

• W3C: The Summary Element
• MDN: <summary>: The Summary disclosure element