# An element with “role=menuitem” must be contained in, or owned by, an element with “role=menubar” or “role=menu”.

> Canonical HTML version: https://rocketvalidator.com/html-validation/an-element-with-role-menuitem-must-be-contained-in-or-owned-by-an-element-with-role-menubar-or-role-menu
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

The WAI-ARIA specification defines strict ownership requirements for certain roles. The `menuitem` role represents an option in a set of choices and is only meaningful when it exists within the context of a menu. When a `menuitem` appears outside of a `menu` or `menubar`, screen readers and other assistive technologies have no way to determine that it belongs to a menu widget. They cannot announce the total number of items, provide keyboard navigation between items, or convey the menu's hierarchical structure to the user.

This requirement follows the concept of **required owned elements** and **required context roles** in ARIA. Just as a `<li>` element belongs inside a `<ul>` or `<ol>`, a `menuitem` belongs inside a `menu` or `menubar`. The relationship can be established in two ways:

1. **DOM nesting** — the `menuitem` element is a DOM descendant of the `menu` or `menubar` element.
2. **The `aria-owns` attribute** — the `menu` or `menubar` element uses `aria-owns` to reference the `menuitem` by its `id`, establishing ownership even when the elements aren't nested in the DOM.

It's important to note that ARIA menu roles are intended for **application-style menus** — the kind you'd find in a desktop application (e.g., File, Edit, View menus). They are **not** meant for standard website navigation. For typical site navigation, use semantic HTML elements like `<nav>` with `<ul>`, `<li>`, and `<a>` elements instead.

## How to fix it

1. **Identify every element with `role="menuitem"`** in your markup.
2. **Ensure each one is contained within** an element that has `role="menu"` or `role="menubar"`, either through DOM nesting or via `aria-owns`.
3. **Choose the correct parent role:**
   - Use `role="menubar"` for a persistent, typically horizontal menu bar (like a desktop application's top-level menu).
   - Use `role="menu"` for a popup or dropdown menu that contains a group of menu items.
4. **If you're using menus for site navigation**, consider removing the ARIA menu roles entirely and using semantic HTML (`<nav>`, `<ul>`, `<li>`, `<a>`) instead.

## Examples

### Incorrect — `menuitem` without a menu context

This triggers the validator error because the `menuitem` elements have no parent `menu` or `menubar`:

```html
<div>
  <div role="menuitem">Cut</div>
  <div role="menuitem">Copy</div>
  <div role="menuitem">Paste</div>
</div>
```

### Correct — `menuitem` inside a `menu`

Wrapping the items in an element with `role="menu"` resolves the issue:

```html
<div role="menu">
  <div role="menuitem" tabindex="0">Cut</div>
  <div role="menuitem" tabindex="-1">Copy</div>
  <div role="menuitem" tabindex="-1">Paste</div>
</div>
```

### Correct — `menuitem` inside a `menubar`

For a persistent horizontal menu bar with application-style actions:

```html
<div role="menubar">
  <div role="menuitem" tabindex="0">File</div>
  <div role="menuitem" tabindex="-1">Edit</div>
  <div role="menuitem" tabindex="-1">View</div>
</div>
```

### Correct — nested menus with dropdown submenus

A `menubar` with a dropdown `menu` containing additional `menuitem` elements:

```html
<div role="menubar">
  <div role="menuitem" tabindex="0" aria-haspopup="true" aria-expanded="false">
    File
    <div role="menu">
      <div role="menuitem" tabindex="-1">New</div>
      <div role="menuitem" tabindex="-1">Open</div>
      <div role="menuitem" tabindex="-1">Save</div>
    </div>
  </div>
  <div role="menuitem" tabindex="-1" aria-haspopup="true" aria-expanded="false">
    Edit
    <div role="menu">
      <div role="menuitem" tabindex="-1">Cut</div>
      <div role="menuitem" tabindex="-1">Copy</div>
      <div role="menuitem" tabindex="-1">Paste</div>
    </div>
  </div>
</div>
```

### Correct — using `aria-owns` for ownership without DOM nesting

When the `menuitem` elements cannot be nested inside the `menu` in the DOM (e.g., due to layout constraints), use `aria-owns` to establish the relationship:

```html
<div role="menu" aria-owns="item-cut item-copy item-paste"></div>

<div role="menuitem" id="item-cut" tabindex="0">Cut</div>
<div role="menuitem" id="item-copy" tabindex="-1">Copy</div>
<div role="menuitem" id="item-paste" tabindex="-1">Paste</div>
```

### Better alternative — use semantic HTML for site navigation

If you're building standard website navigation (not an application-style menu), avoid ARIA menu roles altogether:

```html
<nav aria-label="Main navigation">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>
```

This approach is simpler, more accessible by default, and doesn't trigger the validator warning. Reserve `role="menu"`, `role="menubar"`, and `role="menuitem"` for true application-style menus that implement full keyboard interaction patterns as described in the [ARIA Authoring Practices Guide](https://www.w3.org/WAI/ARIA/apg/patterns/menubar/).