Digital Accessibility Knowledge Base

    aria-command-name

    ARIA button, link, and menuitem must have an accessible name

    Who might be affected
    Screen Reader
    Low Vision
    Voice Control

    Description

    Each control in the UI must have an accessible name that includes controls created using non-semantic elements and ARIA roles, e.g., <div role="button" />.
    Accessible names are essential for assistive technologies users to conceive and interact with the UI controls.
    Learn more about accessible names

    Quick Fixes

    Ensure that all the UI controls defined using the ARIA role attribute have valid accessible names.

    1✓ <div role="button" tabindex="0">Submit</div>
    2✓ <div role="button" tabindex="0" aria-label="Next"></div>
    3

    4  <div id="link-destination">Go to product page</div>
    5✓ <div role="link" tabindex="0" aria-labelledby="link-destination"></div>
    6

    7✓ <div role="menuitem" id="combo" aria-label="Menu Item Name">Name</div>
    1✗ <div role="button" tabindex="0">♥</div>
    2✗ <div role="button" tabindex="0" aria-label=""></div>
    3

    4  <div id="link-destination"><!-- An empty element --></div>
    5✗ <div role="link"  tabindex="0" aria-labelledby="link-destination"></div>

    How Users Are Affected

    The accessible name is used by assistive technologies to label, announce and trigger actions of interactable UI elements (e.g. buttons, links, input fields etc.). When interactable elements don’t have a valid accessible name, assistive technologies lack the hook they are designed to use.

    WCAG Success criteria

    This issue might cause elements to fail one or more of the following Success criteria:
    1.1.1 Non-text-content (A) | 4.1.2 Name, Role, Value (A)