---
title: "<summary> Discernible Text | Accessibility Rule"
description: Summary must have discernible text
source_url:
  html: https://testingbot.com/support/accessibility/web/rules/summary-name
  md: https://testingbot.com/support/accessibility/web/rules/summary-name/index.md
---
# Ensure summary elements have discernible text

Rule ID: summary-nameUser Impact: seriousGuidelines: WCAG 2.0

`<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](https://www.w3.org/TR/html52/interactive-elements.html#the-summary-element)
- [MDN: \<summary\>: The Summary disclosure element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary)

## Other Rules

Interested in other web accessibility rules? Please see these other rules:

- [svg-img-alt](https://testingbot.com/support/accessibility/web/rules/svg-img-alt)
- [td-headers-attr](https://testingbot.com/support/accessibility/web/rules/td-headers-attr)
- [th-has-data-cells](https://testingbot.com/support/accessibility/web/rules/th-has-data-cells)
- [valid-lang](https://testingbot.com/support/accessibility/web/rules/valid-lang)
- [video-caption](https://testingbot.com/support/accessibility/web/rules/video-caption)