Rol Control compuesto

`menubar`

Marca un contenedor como barra de menú persistente — la franja horizontal siempre visible con menús al estilo Archivo/Edición/Ver de las aplicaciones de escritorio. Distinto de menu, que es un desplegable. Casi nunca es el patrón adecuado en la web.

Cuándo utilizarlo

Para una barra de menú persistente de tipo aplicación que replica el menú principal de una aplicación de escritorio (Archivo, Edición, Ver…). Los usos más legítimos se dan en herramientas de autoría web, entornos de desarrollo integrado (IDE) y aplicaciones de productividad a pantalla completa.

Si la «barra de menú» es en realidad la navegación del encabezado del sitio, NO es una menubar. Se debe usar <nav> con <ul> de enlaces <a>. El rol menubar exige tabulación única, navegación por teclas de flecha y cierre mediante Escape; ninguna de estas características corresponde a la expectativa del usuario en un encabezado de sitio.

Los elementos secundarios de una menubar son habitualmente activadores role="menuitem" que abren submenús (aria-haspopup="menu").

Contrato de teclado y foco

Según el patrón de menubar APG:

Tab accede a la menubar y enfoca el primer elemento o el último que tuvo el foco; Tab sale de ella.
Las flechas Izquierda/Derecha mueven el foco entre los elementos de nivel superior de la menubar (con retorno al inicio/final).
La flecha Abajo (o Enter/Espacio) abre el submenú del elemento enfocado y mueve el foco al primer menuitem.
La flecha Arriba abre el submenú y mueve el foco al último menuitem.
Escape dentro de un submenú lo cierra y devuelve el foco al elemento de la menubar correspondiente.
Escritura anticipada: escribir una letra salta al siguiente elemento que comienza por esa letra.

Se debe emplear un tabindex dinámico (roving tabindex).

Fallos habituales

role="menubar" en el <nav> principal del sitio. Desajuste entre el rol anunciado y la expectativa del usuario.
Todos los elementos tienen tabindex="0", por lo que Tab recorre toda la menubar. El patrón exige tabulación única.
Submenús que se abren al pasar el puntero pero no con la flecha Abajo.
Sin aria-haspopup/aria-expanded en los elementos de la menubar que activan submenús.
Escape dentro de un submenú lo contrae pero pierde el foco: debe devolverlo al elemento padre de la menubar.

Ejemplo

<ul role="menubar" aria-label="Documento">
  <li role="menuitem" tabindex="0"  aria-haspopup="menu" aria-expanded="false">Archivo</li>
  <li role="menuitem" tabindex="-1" aria-haspopup="menu" aria-expanded="false">Edición</li>
  <li role="menuitem" tabindex="-1" aria-haspopup="menu" aria-expanded="false">Ver</li>
  <li role="menuitem" tabindex="-1" aria-haspopup="menu" aria-expanded="false">Ayuda</li>
</ul>