ARIA commands must have an accessible name

Rule ID: aria-command-name

Ruleset: axe-core 4.11

User Impact: Serious

Guidelines: WCAG 2.1 (A), WCAG 2.0 (A), WCAG 2.2 (A), Trusted Tester, EN 301 549, RGAA

Learn Web Accessibility

Subscribe to our extensive curriculum of online self-paced courses

Learn More about Deque University

Compliance Data & Impact

User Impact

Disabilities Affected

Blind
Low Vision
Mobility

Standard(s)

WCAG 2.1 (A)
WCAG 2.0 (A)
WCAG 2.2 (A)
Trusted Tester
EN 301 549
RGAA

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

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

RGAA

11.9.1: MUST: Each button's label is relevant.

How to Fix the Problem

Correct markup solutions

The aria-command-name rule has four markup patterns that pass test criteria:

<div role="link" id="al" aria-label="Name"></div>

<div role="button" id="alb" aria-labelledby="labeldiv"></div>

<div role="menuitem" id="combo" aria-label="Aria Name">Name</div>

<div role="link" id="title" title="Title"></div>

Ensure that each element with role="link", role="button", or role="menuitem" has one of the following characteristics:
- Inner text that is discernible to screen reader users.
- Non-empty aria-label attribute.
- aria-labelledby pointing to element with text which is discernible to screen reader users.

Incorrect markup solutions

The aria-command-name rule has four markup patterns that fail testing criteria:

<div role="link" id="empty"></div>

<div role="button" id="alempty" aria-label=""></div>

<div role="menuitem" id="albmissing" aria-labelledby="nonexistent"></div>

<div role="link" id="albempty" aria-labelledby="emptydiv"></div>
<div id="emptydiv"></div>

Why it Matters

Screen reader users are not able to discern the purpose of elements with role="link", role="button", or role="menuitem" that do not have an accessible name.

Rule Description

ARIA command elements must have discernible text that clearly describes the destination, purpose, function, or action for screen reader users.

Note: When testing with RGAA, an issue reported by this rule may need to be mapped to a different RGAA test such as 6.2.1 for links.

The Algorithm (in simple terms)

Checks all elements with role="link", role="button", or role="menuitem" 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.11 rules.

Was this information helpful?

You have already given your feedback, thank you..