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

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

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

    Refer to the complete list of axe 4.11 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: