Skip to main content
HTML Validation

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

About This HTML Issue

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

<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

<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

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

Find issues like this automatically

Rocket Validator scans thousands of pages in seconds, detecting HTML issues across your entire site.

Help us improve our guides

Was this guide helpful?
🌍 Trusted by teams worldwide

Validate at scale.
Ship accessible websites, faster.

Automated HTML & accessibility validation for large sites. Check thousands of pages against WCAG guidelines and W3C standards in minutes, not days.

Scheduled Reports
API Access
Open Source Standards
€5 / week

1K Weekly

1,000 monthly checks. Cancel anytime.

Get 1K Weekly →

Join teams across 40+ countries