Skip to main content

Cornell University

Web Accessibility Reviews

All ACT Rules

Summary element has non-empty accessible name

Applicability

This rule applies to HTML summary elements for which all the following are true:

  • the element is [included in the accessibility tree][]; and
  • the element works as the [summary button for its parent details element][details summary]; and
  • the element has no [explicit role][], or the [explicit role][] is ignored due to a [presentational role conflict][presentational roles conflict].

Expectation

Each target element has an [accessible name][] that is not empty (""), nor just the name of the ::marker pseudo element.

Assumptions

The rule assumes that all summary elements are user interface components as defined by WCAG 2.

Accessibility Support

There is a difference in how user agents expose the triangle indicating the control's expand state. As a result, some user agents include the triangle in the accessible name of the summary element.

Background

This rule is only applicable to summary elements that the browser will use as controls for a details element. While this rule is not applicable to summary elements with an [explicit semantic role][], most of the time these likely do still require an [accessible name][]. This is covered by other rules, such as the [Button has non-empty accessible name][97a4e1].

If the summary element is not included in the accessibility tree, but is still included in sequential focus navigation, this can result in accessibility issues not tested by this rule. This is covered under [Element with aria-hidden has no content in sequential focus navigation][6cfa84].

Note that some user agents expose the summary element with a button role. This deviates from the implicit ARIA semantics described in ARIA in HTML. Because some browsers do not give summary elements a button role, these elements need to be tested separately from the Button has non-empty accessible name ACT rule.

Bibliography

Test Cases

Passed

Passed Example 1

This summary element has an [accessible name][] because of its text content.

<details>
	<summary>Opening times</summary>
	<p>This is a website. We are available 24/7.</p>
</details>

Passed Example 2

This summary element has an [accessible name][] because of its aria-label attribute.

<details>
	<summary aria-label="Opening times"></summary>
	<p>This is a website. We are available 24/7.</p>
</details>

Passed Example 3

This summary element has an [accessible name][] because of its aria-labelledby attribute.

<span id="opening-times">Opening times</span>
<details>
	<summary aria-labelledby="opening-times"></summary>
	<p>This is a website. We are available 24/7.</p>
</details>

Passed Example 4

This summary element has an [accessible name][] because of its text content. It does not need to be the first child element of details.

<details>
	<p>This is a website. We are available 24/7.</p>
	<summary>Opening times</summary>
</details>

Passed Example 5

This first summary element has an [accessible name][] because of its text content. The second summary element is inapplicable because only the first summary element will be used as a control for the details element.

<details>
	<summary>Opening times</summary>
	<summary></summary>
	<p>This is a website. We are available 24/7.</p>
</details>

Failed

Failed Example 1

This summary element has no [accessible name][], or an accessible name with just the ::marker pseudo element, because it has no content or attribute that can provide it.

<details>
	<summary></summary>
	<p>This is a website. We are available 24/7.</p>
</details>

Failed Example 2

This summary element has an [explicit role][] of none. However, it is [focusable][] (by default) which causes [Presentational Roles Conflict Resolution][presentational roles conflict]. It fails because it has an empty [accessible name][].

<details>
	<summary role="none"></summary>
	<p>This is a website. We are available 24/7.</p>
</details>

Failed Example 3

This first summary element has no [accessible name][] because it is empty. The second summary element is inapplicable because only the first summary element will be used as a control for the details element.

<details>
	<summary></summary>
	<summary>Opening times</summary>
	<p>This is a website. We are available 24/7.</p>
</details>

Inapplicable

Inapplicable Example 1

This summary element is not a child of a details element and so will not be interactive.

<summary></summary>

Inapplicable Example 2

This summary element is not a direct child of a details element and so will not be interactive.

<details>
	<div>
		<summary></summary>
	</div>
	<p>This is a website. We are available 24/7.</p>
</details>

Inapplicable Example 3

This summary element has an explicit semantic role of button. These are tested under [Button has non-empty accessible name][97a4e1] instead. Note that while this example does not fail WCAG, under ARIA in HTML it is not allowed to override the role of a [summary for its parent details][details summary].

<details>
	<summary role="button">Opening hours</summary>
	<p>This is a website. We are available 24/7.</p>
</details>

Inapplicable Example 4

This summary element is hidden to everyone.

<details style="display:none">
	<summary></summary>
	<p>This is a website. We are available 24/7.</p>
</details>

AI Prompt