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

> Canonical HTML version: https://rocketvalidator.com/html-validation/an-element-with-the-attribute-role-menuitem-must-not-appear-as-a-descendant-of-the-a-element
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

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

```html
<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

```html
<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.
