Rampsight

All rules

Names and roles

Disclosure summaries need text

Why it matters

An empty <summary> gives the expand/collapse control no name, so the person hears "collapsed" with no indication of what is hidden.

How to fix it

  1. Put the section title inside <summary>.
  2. Keep it short — it is both the control name and the visible heading.

In markup

Fails
<details>
  <summary></summary>
  <p>Shipping is free above 50 EUR.</p>
</details>
Passes
<details>
  <summary>Shipping costs</summary>
  <p>Shipping is free above 50 EUR.</p>
</details>

The requirement behind it

This rule is one way of failing the following WCAG 2.2 success criteria. The W3C, which writes the standard, explains each of them:

Further reading

Deque University on summary-name (opens in new tab)

Deque maintains axe-core, the open-source engine our scanner runs. Their page documents the rule as the engine implements it.

Automated checks find failures a browser can prove. They cannot judge whether a caption is accurate, whether an alt text is useful, or whether a page can be operated end to end with a keyboard — those need a person.