# The element “a” should not appear as a descendant of an element with the attribute “role=menuitem”.

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

An `<a>` element is nested inside an element with `role="menuitem"`, which ARIA in HTML doesn't allow.

A menu item is a single control. Screen readers announce it as one item in the menu, and the menu keyboard pattern moves focus from item to item with the arrow keys. ARIA in HTML lets an element with `role="menuitem"` contain phrasing content only, with no interactive elements inside it. A link inside the menu item is a second control, and the menu pattern has no place for it.

When the `<a>` has an `href`, the validator reports a second warning for the same element, "The element "a" with the attribute "href" should not appear as a descendant of an element with the attribute "role=menuitem"." Both go away with the same fix. Validator builds from mid 2026 reported this check as an error, with "must not appear" in place of "should not appear".

The usual cause is a list where the `<li>` has `role="menuitem"` and the link sits inside it. Move `role="menuitem"` onto the `<a>` itself, and give the `<li>` `role="none"` to remove its list item semantics. Each menu item is then a single interactive element.

If the list is ordinary site navigation, drop `role="menu"` and `role="menuitem"` altogether. The menu roles are meant for application menus like the ones in desktop software, and they expect JavaScript that moves focus with the arrow keys. A `<nav>` element with a plain list of links needs no ARIA roles.

## Invalid example

```html
<ul role="menu" aria-label="Account">
  <li role="menuitem"><a href="/profile">Profile</a></li>
  <li role="menuitem"><a href="/settings">Settings</a></li>
</ul>
```

## Valid example

```html
<ul role="menu" aria-label="Account">
  <li role="none"><a role="menuitem" href="/profile">Profile</a></li>
  <li role="none"><a role="menuitem" href="/settings">Settings</a></li>
</ul>
```

## Valid example for site navigation

```html
<nav aria-label="Account">
  <ul>
    <li><a href="/profile">Profile</a></li>
    <li><a href="/settings">Settings</a></li>
  </ul>
</nav>
```