Summary must have discernible text

Rule ID: summary-name
Ruleset: axe-core 4.10
User Impact: Serious
Guidelines: WCAG 2.1 (A), WCAG 2.0 (A), WCAG 2.2 (A), Section 508, Trusted Tester, EN 301 549

Accessibility testing for dev teams - No experience required

Find and fix up to 80% of accessibility issues with axe DevTools Pro. Get started with your free trial today. No credit card needed.

Compliance Data & Impact

User Impact

Serious
▼
Minor
Critical

Disabilities Affected

  • Blind
  • Deafblind

Standard(s)

  • WCAG 2.1 (A)
  • WCAG 2.0 (A)
  • WCAG 2.2 (A)
  • Section 508
  • Trusted Tester
  • EN 301 549

WCAG Success Criteria [WCAG 2.1 (A)]

  • 4.1.2: MUST: Name, Role, Value

WCAG Success Criteria [WCAG 2.0 (A)]

  • 4.1.2: MUST: Name, Role, Value

WCAG Success Criteria [WCAG 2.2 (A)]

  • 4.1.2: MUST: Name, Role, Value

Section 508 Guidelines

  • 1194.22: MUST: Web based intranet and Internet Information & Applications
  • 1194.22 (a): MUST: A text equivalent for every non-text element shall be provided (e.g., via "alt", "longdesc", or in element content)

Trusted Tester Guidelines

  • 6.A: MUST: The purpose of each link or button can be determined from any combination of the link/button text, accessible name, accessible description, and/or programmatically determined link/button context.

EN 301 549 Guidelines

  • 9.4.1.2: MUST: Name, Role, Value

How to Fix the Problem

Correct markup solutions

There are several methods for passing all checks of summary-name. The most reliable method for creating an accessible summary element is to put a text inside the summary element: 

<details>
  <summary id="text">Name</summary>
  ...
</details>

Alternative methods

It is also possible to give a summary element a hidden alternative text. This can be used when the summary has no visible text, such as when using a CSS background image. Methods for providing a hidden alternative include:

  • Using the aria-label="text alternative here" attribute.
  • Using the aria-labelledby="id-to-element-with-text" attribute.
  • Using the title="tooltip alternative here" attribute.

Why it Matters

Screen reader users are not able to discern the purpose of summary elements that do not have an accessible name. This prevents them from understanding the purpose of the control, and will likely mean they won't find information hidden with the details element.

Rule Description

Summary elements are used as a control for expanding and collapsing the details element. These summary elements must have a discernable text that clearly indicates the topic or purpose of the information that will be revealed when using the control.

The summary-name rule separates functionality from the button-name rule since summary elements have different inherent semantics from button elements.

The Algorithm (in simple terms)

Checks all summary elements that are used as a control for a details element to ensure that they have a discernable, accessible name.

Resources

Deque University Course Pages (subscription required)

No related course information available.

Contribute to axe-core on GitHub

Refer to the complete list of axe 4.10 rules.

Was this information helpful?

You have already given your feedback, thank you..

Your response was as follows:

Was this information helpful?
Date/Time feedback was submitted: