Skip to content
Vispero CORADocs

Summary elements need a name

  • Rule: axe/summary-name
  • Checks: Summary elements must have discernible text
  • WCAG: 4.1.2
  • Fix class: content: A fix needs authored text.

Who it affects

Section titled “Who it affects”
  • People who use a screen reader or a braille display, most of them blind.
  • People who control the page by speaking.

How to fix it

Section titled “How to fix it”

The summary shows only an icon, such as a chevron

Section titled “The summary shows only an icon, such as a chevron”

Put text in the <summary> that names the content it reveals, and hide the icon from assistive technology. The browser already announces whether the section is open.

<details>
  <summary>Delivery options</summary>
  <p>Standard delivery takes three to five business days.</p>
</details>

The text that labels the section sits outside the <summary>

Section titled “The text that labels the section sits outside the <summary>”

Move the text into the <summary>, so it is announced with the control and clicking it opens the section.

The summary holds only an image with no alt

Section titled “The summary holds only an image with no alt”

Give the image an alt that names the section, or add text beside it and set the image to alt="".

Fixes that fail

Section titled “Fixes that fail”

Naming the summary for its state or action, such as “Expand” or “Toggle”

Section titled “Naming the summary for its state or action, such as “Expand” or “Toggle””

The browser already announces expanded or collapsed, and the name still says nothing about what the section holds.

Adding only a title attribute

Section titled “Adding only a title attribute”

axe accepts it, but it appears only on mouse hover, so people using a keyboard, touch or voice control see no name.

More on the rule

Section titled “More on the rule”

axe-core’s documentation of the rule

CORA’s fix guidance adapts content from accessibility-agents, under the MIT License: see its notice.