Back to Info and Examples for Accessibility Insights for Web
summary-name
All <summary> elements must have discernible text
Why it matters
The <summary> HTML element represents a brief summary, caption, or legend for the rest of the content of its parent <details> element. Together, a <summary> and <details> element can be used to create a native HTML disclosure widget.
If a <summary> element does not have discernible text or an accessible name, a screen reader user cannot determine
the purpose of the element, nor what the disclosure widget is meant to represent.
How to fix
For each <summary> element, provide discernible text using one of the following methods:
- Provide inner text content that is available to assistive technologies (not marked with
display: noneoraria-hidden="true") - Provide a
titleattribute - Privide an
aria-labelattribute - Provide an
aria-labelledbyattribute referencing visible text - Only in the event a name cannot be determined, remove the
<summary>element and the user agent will supply a localized "Details" string as the summary.
Example
Fail
<details> element contains a <summary> element that does not have discernible text.<details>
<summary></summary>
<p>The <summary> HTML element represents a brief summary, caption, or legend for the rest of the content of its parent <details> element. Together, a <summary> and <details> element can be used to create a native HTML disclosure widget.</p>
<summary></summary>
<p>The <summary> HTML element represents a brief summary, caption, or legend for the rest of the content of its parent <details> element. Together, a <summary> and <details> element can be used to create a native HTML disclosure widget.</p>
Pass
<summary> element a discernible text label and accessible name.<details>
<summary>Summary Element</summary>
<p>The <summary> HTML element represents a brief summary, caption, or legend for the rest of the content of its parent <details> element. Together, a <summary> and <details> element can be used to create a native HTML disclosure widget.</p>
<summary>Summary Element</summary>
<p>The <summary> HTML element represents a brief summary, caption, or legend for the rest of the content of its parent <details> element. Together, a <summary> and <details> element can be used to create a native HTML disclosure widget.</p>
About this rule
This rule passes if ANY of the following is true:
- Element has inner text content that is visible to screen readers
- Element has an
aria-labelledbyattribute that references an element or elements containing text - Element has a non-empty
aria-labelattribute - Element has a non-empty
titleattribute - The parent
<details>element does not have a<summary>element