Rule ID: ace-struct-summary-name

Verify that summary elements have descriptive accessible names

WCAG 2.0 (A) 4.1.2: Name, Role, Value Blind Low Vision Mobility Legal Risk

What This Rule Checks

The <summary> element acts as a disclosure toggle for <details> content. It must have descriptive text so screen reader users understand what content will be revealed or hidden when activated.

Who Is Affected

This issue primarily affects: Blind users, who rely entirely on screen readers or braille displays to navigate and interact with content; Low Vision users, who may use screen magnification, custom fonts, or high-contrast modes; Mobility users, who navigate using keyboards, switches, voice control, or other assistive input devices.

Why This Matters

The <summary> element serves as a disclosure toggle. Screen readers announce it as “disclosure triangle” followed by the text. An empty summary provides no indication of what content will be revealed, making the control useless for screen reader users.

How to Fix

Add clear, descriptive text content inside the <summary> element. Avoid leaving it empty or using vague labels like “Click here.” The text should describe the content within the associated <details> block.

Code Examples

Incorrect Markup Solutions:

Code example

<!-- Empty summary element -->
<details>
  <summary></summary>

  <p>
    Hidden content revealed on click.
  </p>
</details>

Copy

Correct Markup Solutions:

Code example

<!-- Summary with descriptive text -->
<details>
  <summary>View shipping details</summary>

  <p>
    Free shipping on orders over $50.
    Delivery in 5-7 business days.
  </p>
</details>

Copy

Common Mistakes to Avoid

Leaving the <summary> element empty.
Using vague text like “Details” or “More info” without context.
Placing only an icon inside <summary> without a text label.

AI Auto-Fix Available

This rule supports ACE™ AI Auto-Fix. When a violation is detected, ACE can automatically generate a code fix for review. The AI analyzes the specific element in context and proposes a targeted remediation that preserves your existing markup and styling. You can preview, modify, and approve the fix before it is applied.

Tip: Proper document structure enables assistive technologies to present content meaningfully. Headings, lists, and semantic HTML elements create a navigable outline of the page that screen reader users depend on.

Related WCAG Criteria

4.1.2: Name, Role, Value