Skip to content

summary-non-empty-accessible-name-2t702h.md

Latest commit

 

History

History
executable file
·
207 lines (151 loc) · 7.57 KB

summary-non-empty-accessible-name-2t702h.md

File metadata and controls

executable file
·
207 lines (151 loc) · 7.57 KB
id 2t702h
name Summary element has non-empty accessible name
rules_format 1.1
rule_type atomic
description This rule checks that each `summary` element has a non-empty accessible name.
accessibility_requirements
wcag20:4.1.2
forConformance failed passed inapplicable
true
not satisfied
further testing needed
further testing needed
input_aspects
Accessibility Tree
DOM Tree
CSS Styling
acknowledgments
authors
Wilco Fiers

Applicability

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

Expectation

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

Background

This rule is only applicable to summary elements that the browser will use as controls for a details element. Even though the HTML specification - The summary element requires the summary element to be the first child of details, this is not required for WCAG. And while this rule is not applicable to summary elements with an explicit 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.

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.

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.

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.

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. 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 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 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>