Validación HTML: Un elemento con "role=menuitem" debe estar contenido en, o ser propiedad de, un elemento con "role=menubar" o "role=menu".

Acerca de este problema HTML

La especificación WAI-ARIA define requisitos estrictos de propiedad para ciertos roles. El rol menuitem representa una opción en un conjunto de opciones y solo tiene sentido cuando existe dentro del contexto de un menú. Cuando un menuitem aparece fuera de un menu o menubar, los lectores de pantalla y otras tecnologías de asistencia no tienen forma de determinar que pertenece a un widget de menú. No pueden anunciar el número total de elementos, proporcionar navegación por teclado entre elementos, o transmitir la estructura jerárquica del menú al usuario.

Este requisito sigue el concepto de elementos propios requeridos y roles de contexto requeridos en ARIA. Igual que un elemento <li> pertenece dentro de un <ul> o <ol>, un menuitem pertenece dentro de un menu o menubar. La relación puede establecerse de dos maneras:

Anidamiento DOM — el elemento menuitem es un descendiente DOM del elemento menu o menubar.
El atributo aria-owns — el elemento menu o menubar utiliza aria-owns para referenciar el menuitem por su id, estableciendo la propiedad incluso cuando los elementos no están anidados en el DOM.

Es importante tener en cuenta que los roles de menú ARIA están destinados para menús de estilo aplicación — el tipo que encontrarías en una aplicación de escritorio (por ejemplo, menús Archivo, Editar, Ver). No están destinados para navegación estándar de sitios web. Para navegación típica de sitio, utiliza elementos HTML semánticos como <nav> con elementos <ul>, <li>, y <a> en su lugar.

Cómo solucionarlo

Identifica cada elemento con role="menuitem" en tu marcado.
Asegúrate de que cada uno esté contenido dentro de un elemento que tenga role="menu" o role="menubar", ya sea a través de anidamiento DOM o mediante aria-owns.
Elige el rol padre correcto:
- Usa role="menubar" para una barra de menú persistente, típicamente horizontal (como el menú de nivel superior de una aplicación de escritorio).
- Usa role="menu" para un menú popup o desplegable que contiene un grupo de elementos de menú.
Si estás usando menús para navegación del sitio, considera eliminar completamente los roles de menú ARIA y usar HTML semántico (<nav>, <ul>, <li>, <a>) en su lugar.

Ejemplos

Incorrecto — `menuitem` sin contexto de menú

Esto activa el error del validador porque los elementos menuitem no tienen un menu o menubar padre:

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

Correcto — `menuitem` dentro de un `menu`

Envolver los elementos en un elemento con role="menu" resuelve el problema:

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

Correcto — `menuitem` dentro de un `menubar`

Para una barra de menú horizontal persistente con acciones de estilo aplicación:

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

Correcto — menús anidados con submenús desplegables

Un menubar con un menu desplegable que contiene elementos menuitem adicionales:

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

Correcto — usando `aria-owns` para propiedad sin anidamiento DOM

Cuando los elementos menuitem no pueden anidarse dentro del menu en el DOM (por ejemplo, debido a restricciones de diseño), usa aria-owns para establecer la relación:

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

Mejor alternativa — usa HTML semántico para navegación del sitio

Si estás construyendo navegación estándar de sitio web (no un menú de estilo aplicación), evita completamente los roles de menú ARIA:

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

Este enfoque es más simple, más accesible por defecto, y no activa la advertencia del validador. Reserva role="menu", role="menubar", y role="menuitem" para menús verdaderamente de estilo aplicación que implementen patrones completos de interacción por teclado como se describe en la Guía de Prácticas de Autoría ARIA.