Summary Name

Summary elements must include clear, discernible text so users understand the purpose of the disclosure widget. This blog explains what the summary-name rule checks, why meaningful text is essential for accessible disclosure widgets, how to implement summary elements correctly and how this supports WCAG 2.2 and wider accessibility expectations. The article is fully original, accurate and structured using the Welcoming Web content framework.

What it is

The summary-name rule checks whether a <summary> element contains discernible text. <summary> is used within the <details> element to provide a visible label that describes what content will be revealed.

If the <summary> lacks readable text, assistive technologies cannot announce its purpose.

Why it matters

When a summary element has no discernible text: - screen readers may announce it only as “button” without context, - users cannot understand what the disclosure will reveal, - people with cognitive impairments may be confused by unlabeled toggles, - keyboard and switch users may activate the wrong element, - navigation becomes unpredictable and less usable.

Meaningful summary text ensures the component functions as a clear, accessible control.

Who delivers it

Designers define the language used in summary headings. Content authors ensure meaningful descriptions are provided for each disclosure widget. Front end developers implement <details> and <summary> with correct structure and visible text. Accessibility specialists and QA testers validate that summary elements expose clear accessible names. Welcoming Web assists by detecting <summary> elements without discernible text.

How to ensure summary elements have discernible text

1. Provide meaningful visible text within the <summary> element

The text must describe the content being revealed.

<details>  <summary>Shipping information</summary>  <p>Orders are processed within 2–3 working days.</p></details>

2. Avoid empty or decorative summaries

Do not rely on icons, arrows or symbols as the only label.

3. Use additional ARIA only when required

If a summary requires extra context, pair it with aria-describedby.

4. Ensure CSS does not visually hide the summary text

Hidden text must remain programmatically available and readable.

5. Check dynamic content for missing labels

Some UI frameworks inject empty summaries unless explicitly defined.

Best practice guidance

Use plain, descriptive text that clearly communicates what the user can expect when expanding the section. Avoid sentence fragments or overly long labels. Keep naming patterns consistent across all disclosure widgets within your design system.

Compliance mapping

Providing discernible text for summary elements supports: - WCAG 2.2 Name, Role, Value success criterion, - WCAG 2.2 Labels and Instructions requirements, - ADA Title III expectations for understandable UI controls, - EN 301 549 guidance on programmatically determinable names, - Equality Act 2010 duties for accessible component behaviour.

Welcoming Web supports alignment with recognised standards but does not issue or guarantee compliance certification.

How Welcoming Web supports teams

Welcoming Web identifies <summary> elements that lack descriptive text. The platform highlights issues within disclosure components and provides recommended remediation approaches.

Key points for development teams

Ensure summary elements contain clear text. Avoid icon-only or empty summaries. Keep descriptions meaningful and concise. Test summary behaviour with screen readers. Maintain consistency across components.

Call to action

Run an audit Check your site for summary elements without discernible text. Supports WCAG 2.2 and ADA goals.

FAQs

What does the summary-name rule check

It checks whether <summary> elements contain readable, meaningful text.

Why must summaries have discernible text

They must be understandable so users know what content will be revealed.

Can a summary be icon-only

No. Icons alone do not provide discernible text.

Can ARIA replace summary text

No. Summary requires visible, readable text for all users.

Should all disclosure widgets use summary

Yes. <summary> provides the correct semantic structure.

Can CSS hide summary text

Only if a visually hidden technique is used that keeps the text accessible.

Does fixing summary names guarantee WCAG compliance

It supports naming requirements but does not guarantee full compliance.

How does Welcoming Web help with summary naming

Welcoming Web detects missing or unclear summary text and guides remediation.

Disclaimer

Welcoming Web supports accessibility improvement and alignment with recognised standards but does not issue or guarantee compliance certification.