Rol Control

`menuitem`

Marca un elemento como una opción accionable dentro de un menú o barra de menú. No existe un equivalente HTML — los menús son una construcción exclusiva de ARIA. Use este rol solo cuando esté construyendo un menú de aplicación real (estilo escritorio); una lista de navegación común NO debe usar menu/menuitem.

Cuándo utilizarlo

Solo dentro de role="menu" o role="menubar", y únicamente cuando el menú sea un menú de aplicación — del tipo que imita la barra Archivo/Editar/Ver de una aplicación de escritorio, con navegación de un solo punto de tabulación, flechas del teclado y cierre con Escape.

La navegación principal de un sitio NO es un menú. Use <nav> con una <ul> de enlaces <a>. Confundir ambos conceptos es el error de ARIA más frecuente en la web: atrapa a los usuarios de teclado en la navegación por flechas cuando Tab sería más natural, y les indica a los lectores de pantalla «menú de aplicación» cuando el contenido son simplemente enlaces.

Roles hermanos: menuitemcheckbox (para elementos de menú que alternan un estado) y menuitemradio (para opciones exclusivas dentro de un menú).

Contrato de teclado y foco

Según el patrón de menú de la APG:

Tab entra y sale del menú — al entrar, el foco cae sobre el primer menuitem. Tab NO recorre los elementos uno a uno.
Las flechas Arriba/Abajo mueven el foco entre los elementos (con retorno al extremo opuesto).
Las flechas Derecha/Izquierda abren submenús o regresan al elemento padre.
Enter o Barra espaciadora activan el elemento enfocado.
Escape cierra el menú y devuelve el foco al disparador.
Escribir una letra salta al siguiente elemento que comienza con esa letra (escritura anticipada).

Use un tabindex dinámico: solo el menuitem actualmente enfocado tiene tabindex="0"; el resto tiene tabindex="-1".

Errores frecuentes

Usar role="menuitem" para un enlace ordinario en la navegación del sitio. Provoca trampas de teclado y un anuncio incorrecto en el lector de pantalla.
Asignar tabindex="0" a todos los menuitems, de modo que Tab recorra cada uno. El patrón exige un único punto de tabulación.
Submenús que se abren al pasar el cursor pero no al pulsar la flecha Derecha.
Escape cierra el submenú pero pierde el foco, dejando al usuario fuera del menú sin referencia.
Elementos sin nombre accesible porque el único contenido es un icono — añada aria-label.

Ejemplo

<button id="fileBtn" aria-haspopup="menu" aria-expanded="false" aria-controls="fileMenu">
  Archivo
</button>
<ul id="fileMenu" role="menu" aria-labelledby="fileBtn" hidden>
  <li role="menuitem" tabindex="0">Nuevo</li>
  <li role="menuitem" tabindex="-1">Abrir</li>
  <li role="menuitem" tabindex="-1" aria-haspopup="menu" aria-expanded="false">
    Abrir reciente
  </li>
  <li role="separator"></li>
  <li role="menuitem" tabindex="-1">Guardar</li>
</ul>