ARIA role should be appropriate for the element

Rule ID: aria-allowed-role
Ruleset: axe-core 4.6
User Impact: Minor
Guidelines: Deque Best Practice

Need accessibility training?

Deque University offers an extensive curriculum of self-guided online courses for every skillset and experience level.

Compliance Data & Impact

User Impact

Minor
▼
Minor
Critical

Disabilities Affected

  • Blind
  • Deafblind
  • Mobility

Standard(s)

  • Deque Best Practice

    How to Fix the Problem

    Ensure all HTML elements with a role attribute are allowed to be assigned the role value. Refer to the HTML in ARIA specification opens in a new window to see which role values are allowed for a given HTML element and context.

    Correct markup solutions

    <ul role="menu">
  <li role="none">
    <button role="menuitem">Start</button>
  </li>
</ul>

    Incorrect markup solutions

    <ul role="button">Name</ul>

<button role="heading" aria-level="2">Welcome</button>

    Why it Matters

    Using WAI-ARIA roles where they are not allowed can interfere with the accessibility of the web page. Using an invalid HTML element and ARIA role combination will, at best, result in no effect on the accessibility of the application and, at worst, may trigger behavior that disables accessibility for entire portions of an application.

    When ARIA roles are used on HTML elements that are not in accordance with the HTML in ARIA specification, they conflict with the semantics of the elements which can cause assistive technology products to report nonsensical user interface (UI) information that does not represent the actual UI.

    Rule Description

    Not all WAI-ARIA role values are allowed on every HTML element. This Rule checks that each HTML element with an assigned role is allowed to have that role.

    The Algorithm (in simple terms)

    Check all elements containing WAI-ARIA role attribute values to ensure that the role value is allowed for the element.

    Resources

    Deque University Course Pages (subscription required)

    Contribute to axe-core on GitHub

    Other Resources

    You may also want to check out these other resources.

    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: