An element with the attribute “role=menuitem” must not appear as a descendant of the “a” element.

An element with role="menuitem" cannot be a descendant of an <a> element because the <a> element already has an implicit interactive role, and nesting interactive or widget roles inside it creates conflicting semantics for assistive technologies.

The <a> element has an implicit ARIA role of link. When a role="menuitem" element is placed inside an <a>, screen readers receive contradictory signals: the outer element says "this is a link" while the inner element says "this is a menu item." The WAI-ARIA specification restricts which roles can appear as descendants of interactive elements to prevent this kind of ambiguity.

The fix depends on what you're trying to build. If you want a navigation menu where each item is a link, apply role="menuitem" directly on the <a> element itself, rather than on a child inside it. The <a> element can accept the menuitem role, which overrides its default link role.

HTML examples

Invalid: role="menuitem" nested inside an anchor

<ul role="menu">
  <li role="none">
    <a href="/home">
      <span role="menuitem">Home</span>
    </a>
  </li>
  <li role="none">
    <a href="/about">
      <span role="menuitem">About</span>
    </a>
  </li>
</ul>

Valid: role="menuitem" applied directly to the anchor

<ul role="menu">
  <li role="none">
    <a href="/home" role="menuitem">Home</a>
  </li>
  <li role="none">
    <a href="/about" role="menuitem">About</a>
  </li>
</ul>

Setting role="menuitem" on the <a> element itself gives assistive technologies a single, clear role. The role="none" on each <li> removes the default listitem semantics, which is expected when using the menu pattern since the menu role manages its own item structure.

Learn more:

MDN Reference

ARIA Roles - MDN Web Docs

→

MDN Reference

The a element - MDN Web Docs

→

W3C Reference

ARIA in HTML

→