In one paragraph
Summary elements must have discernible text means a tested disclosure summary lacks an accepted accessible name. Put meaningful visible wording inside the appropriate summary, or provide another correct naming relationship when justified. The label should identify the content being disclosed, not merely a plus icon. A passing name check does not validate every details structure, responsive state, or browser's exposure of nested semantics.
Why it matters
The native details and summary pair can provide expandable content without recreating a disclosure from generic elements. The summary identifies the control before users open it and should remain understandable when the panel is closed.
A question rendered outside an icon-only summary is not automatically associated merely because the layout places them together. Hidden wording or a reference can contribute when correctly implemented, but an unnecessary override can also replace useful visible text.
Browser accessibility mappings for summary and nested heading content differ. Do not promise every screen reader exposes a heading placed inside summary identically, or add another button inside the toggle just to obtain a name. Prefer a clear simple native structure and test the target combinations.
How WebAuditOS evaluates this finding
The supplied summary-name rule checks the applicable first summary used by a details element and accepts exposed content or supported author naming paths. Hidden, extra, or out-of-context summary elements can fall outside this check.
Serious impact maps to high severity. A details element with no authored summary can receive a browser default and is outside the rule as documented. A generic default or non-empty name is not proof that the topic is clear or the HTML content model is valid.
How to fix it
- Identify each disclosure's actual subject and inspect its rendered structure. Use summary as the appropriate first child of details rather than scattering extra summary elements through the page.
- Prefer useful visible wording. For example:
<details>
<summary>Delivery options</summary>
<p>Available services are shown before checkout.</p>
</details>Use actual content and truthful wording. The native structure supplies a basic disclosure, not a complete evaluation of styling, nested content, and task flow.
- Keep decorative chevrons or plus symbols supplementary to the name. If artwork is hidden from assistive technology, ensure meaningful wording remains available.
- If visible descriptive text sits elsewhere by design, use a valid appropriate naming relationship and unique references. Inspect the computed name rather than assuming nearby content is automatically included.
- Avoid redundant manual state that drifts from the native open state. Do not add a script that intercepts keyboard events or overrides native activation unless a complete tested design requires it.
- Test keyboard opening and closing, visible focus, content access after expansion, and focus when a panel is collapsed. A control should not disappear or leave focus in inaccessible content.
- Review heading navigation separately if summary contains headings. Test actual exposure across supported browsers rather than relying on one mapping or one source-only outline.
- Rescan relevant states and inspect repeated disclosures, translated labels, and narrow layouts. A row of toggles all named More can pass presence while remaining difficult to distinguish.
What the fix can break
Removing the native marker without an adequate replacement can conceal the affordance. Keep the expanded/collapsed interaction understandable visually and programmatically.
An aria-label can override the displayed question. Keep name and visible text aligned for voice users and collaboration.
Do not replace missing authored wording with a vague tooltip solely to pass. Prefer a persistent understandable label for the disclosure's actual subject.
Questions
Does nearby text automatically name the summary?
No. Put meaningful content in the control or establish a correct naming relationship.
Does a browser default label prove the disclosure is clear?
No. It can satisfy a basic interface fallback without describing the specific content.
Are headings inside summary exposed identically everywhere?
No. Browser mappings vary; test the actual combinations if that heading structure matters.
Which related checks help?
Review button names, link names, and the automation limits guide.
What severity does this get in the report?
High. An axe finding takes its severity from the impact axe reports for the element that failed, and the report maps critical and serious to high, moderate to medium, minor to low. This rule is declared serious in axe-core, so a failure arrives as high.