summary-name-present

Summary elements have an accessible name

automaticWCAG 4.1.2 (A)confidence: highseverity: seriousrobust

Checks that <summary> elements expose a non-empty accessible name.

Applies to. Applies to <summary> elements included in the accessibility tree that work as the summary button of their parent <details>: the first <summary> child of a <details>. Any other <summary> (outside a <details>, nested deeper, or a second one) is not a control at all, it neither takes focus nor toggles anything, so it has nothing to name (as ACT 2t702h has it).

Expectation. The element has a non-empty accessible name from aria-label, from an aria-labelledby that resolves to non-empty text, from title, or from its own subtree text, where a descendant's own name (an <img alt>, aria-label or title) counts as that descendant's contribution.

Examples

pass

<details>
  <summary>More details</summary>
  <p>Body</p>
</details>

Visible text content names the <summary>.

fail

<details>
  <summary></summary>
  <p>Body</p>
</details>

No text content and no accessible name.

How to check

When this rule can’t decide, it reports cantTell and leaves the question to a person. Each question it can ask is listed here under its reason code, with the steps to answer it. A finding carries the same steps as howToCheck, in the scan’s language. See Output schema.

`name_closedContent`

Find the summary the report names and note the text or icon it shows on screen.
Open the Accessibility pane in the browser's developer tools and read the element's accessible name, which the browser works out from content no script can read.
With a screen reader, move to the element and listen to the name announced.

Pass. The accessibility tree shows a name for the summary, taken from its content, and the screen reader announces it.

Fail. The summary has no name in the accessibility tree, since its content gives none, which fails WCAG 4.1.2.

`name_contentTooDeep`

Find the summary the report names and note the text it shows on screen.
Open the Accessibility pane in the browser's developer tools and read the element's accessible name, which the browser works out from all of its nested content.
With a screen reader, move to the element and listen to the name announced.

Pass. The accessibility tree shows a name for the summary, taken from its nested content, and the screen reader announces it.

Fail. The summary has no name in the accessibility tree, since its content gives none, which fails WCAG 4.1.2.

View source