Links and buttons Rule

Expandable sections need a summary with words in it summary-name

The summary element is the clickable heading of a details element, the browser's built-in expand and collapse control. It behaves like a button, so it needs a name. A summary that holds only an icon, or is empty and drawn with CSS, is announced as a nameless disclosure, so nobody using a screen reader knows what it opens.

WCAG 2.2 A 4.1.2 Name, Role, Value

Websight reports this as Summary elements must have discernible text

Who it affects

A student who is blind, using the university library's FAQ page hears 'summary, collapsed' six times in a row with no idea which one covers printing credits.

Someone with low vision who sets a larger text size sees only an arrow, because the heading text was drawn with CSS content that does not follow text settings.

Someone using voice control has no words to say to open the section.

Broken versus fixed

Both examples are live and rendered in a sandboxed frame. The broken one is deliberately broken.

Broken

A screen reader announces: summary, collapsed. Nothing says this is the section on borrowing limits.

Fixed

Announced: How many books can I borrow?, summary, collapsed. The arrow is still drawn with CSS, which is fine.

Show the markup behind both examples
Broken
<style>body{font-family:system-ui;margin:0;padding:16px}details{border:1px solid #d0d7de;border-radius:6px;padding:8px 12px;margin-bottom:8px}summary{cursor:pointer;font-weight:600;list-style:none}summary::before{content:"\25B6";display:inline-block;margin-right:8px;color:#1b5e9e}details[open] summary::before{content:"\25BC"}</style>
<details>
  <summary></summary>
  <p>Undergraduates can borrow up to 12 items at a time.</p>
</details>
<details>
  <summary></summary>
  <p>Printing credits are topped up at the ground floor desk.</p>
</details>
Fixed
<style>body{font-family:system-ui;margin:0;padding:16px}details{border:1px solid #d0d7de;border-radius:6px;padding:8px 12px;margin-bottom:8px}summary{cursor:pointer;font-weight:600;list-style:none}summary::before{content:"\25B6";display:inline-block;margin-right:8px;color:#1b5e9e}details[open] summary::before{content:"\25BC"}</style>
<details>
  <summary>How many books can I borrow?</summary>
  <p>Undergraduates can borrow up to 12 items at a time.</p>
</details>
<details>
  <summary>Where do I top up printing credits?</summary>
  <p>Printing credits are topped up at the ground floor desk.</p>
</details>

Test it by hand in two minutes

  1. Click an expandable section, then right click its heading and choose Inspect to confirm it is a details and summary pair. Check there is text between the summary tags.
  2. Press Tab to the summary and press Space or Enter. It should open. With VoiceOver or NVDA running, the announcement should include the question, not just 'summary'.
  3. Zoom the browser to 200 percent. Text drawn with CSS content often stays small or disappears; real text grows with the page.

The fix

Before
<details>
  <summary><span class="chevron"></span></summary>
  <p>Undergraduates can borrow up to 12 items at a time.</p>
</details>
After
<details>
  <summary>How many books can I borrow?</summary>
  <p>Undergraduates can borrow up to 12 items at a time.</p>
</details>

Put the question or heading inside the summary as real text. The chevron can stay as a CSS decoration.

Summary whose only content is an image

Before
<details>
  <summary><img src="hours.png"></summary>
  <p>Open 8am to 10pm in term time.</p>
</details>
After
<details>
  <summary><img src="hours.png" alt="Opening hours"></summary>
  <p>Open 8am to 10pm in term time.</p>
</details>

The alt text names the summary. Plain text is still better, because it reflows and translates.

Heading placed beside an empty summary

Before
<h3>Printing credits</h3>
<details>
  <summary></summary>
  <p>Top up at the ground floor desk.</p>
</details>
After
<details>
  <summary><h3>Printing credits</h3></summary>
  <p>Top up at the ground floor desk.</p>
</details>

A heading inside the summary names the control and keeps the section in the heading list. Beside it, it does neither.

Common mistakes

  • Deleting the summary element so the details has no heading; the browser then inserts a default one that just says Details.
  • Putting the question in a title attribute on the summary.
  • Drawing the words with CSS content, which some screen readers read and many do not.
  • Hiding the summary with display:none, which removes the control and leaves the section stuck open or closed.

WCAG criteria this rule maps to

axe-core tags this rule as WCAG 2.2 level A. It is one of the checks for:

The scanner can see a summary element with no text, no image alt and no ARIA name. It cannot tell whether the words describe what is inside the section. Automated tools find only part of the accessibility problems on a page; a pass on this rule is not a pass on the criterion.

A ARIA buttons, links and menu items need a name aria-command-name When you give an element role="button", role="link" or role="menuitem", you are promising assistive technology that it is a control. A Links must have text a screen reader can announce link-name Every link needs text that a screen reader can announce and a voice control user can say.

Scan your own page for this and 63 other checks

Open any page in Chrome, click Websight, and get a score out of 100 with every issue explained and a draft fix snippet per element.

Add Websight to Chrome

Free scans, no account, nothing leaves your computer. Automated tools find only part of the problems; the extension says so on every report.