Verificação HTML: Um elemento com "role=menuitem" deve estar contido em, ou pertencer a, um elemento com "role=menubar" ou "role=menu".

Sobre este problema HTML

A especificação WAI-ARIA define requisitos rigorosos de propriedade para certas roles. A role menuitem representa uma opção num conjunto de escolhas e só tem significado quando existe dentro do contexto de um menu. Quando um menuitem aparece fora de um menu ou menubar, os leitores de ecrã e outras tecnologias assistivas não têm forma de determinar que pertence a um widget de menu. Não conseguem anunciar o número total de itens, fornecer navegação por teclado entre itens, ou transmitir a estrutura hierárquica do menu ao utilizador.

Este requisito segue o conceito de elementos próprios obrigatórios e roles de contexto obrigatórias em ARIA. Tal como um elemento <li> pertence dentro de um <ul> ou <ol>, um menuitem pertence dentro de um menu ou menubar. A relação pode ser estabelecida de duas formas:

Aninhamento no DOM — o elemento menuitem é um descendente DOM do elemento menu ou menubar.
O atributo aria-owns — o elemento menu ou menubar usa aria-owns para referenciar o menuitem pelo seu id, estabelecendo propriedade mesmo quando os elementos não estão aninhados no DOM.

É importante notar que as roles de menu ARIA são destinadas a menus de estilo aplicação — o tipo que encontraria numa aplicação de desktop (por exemplo, menus File, Edit, View). Não são destinadas à navegação padrão de websites. Para navegação típica de site, use elementos HTML semânticos como <nav> com elementos <ul>, <li>, e <a> em vez disso.

Como corrigir

Identifique todos os elementos com role="menuitem" na sua marcação.
Certifique-se de que cada um está contido dentro de um elemento que tenha role="menu" ou role="menubar", seja através de aninhamento no DOM ou via aria-owns.
Escolha a role pai correta:
- Use role="menubar" para uma barra de menu persistente, tipicamente horizontal (como o menu de nível superior de uma aplicação de desktop).
- Use role="menu" para um menu popup ou dropdown que contém um grupo de itens de menu.
Se está a usar menus para navegação de site, considere remover as roles de menu ARIA inteiramente e usar HTML semântico (<nav>, <ul>, <li>, <a>) em vez disso.

Exemplos

Incorreto — `menuitem` sem contexto de menu

Isto desencadeia o erro do validador porque os elementos menuitem não têm um pai menu ou menubar:

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

Correto — `menuitem` dentro de um `menu`

Envolver os itens num elemento com role="menu" resolve o 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>

Correto — `menuitem` dentro de um `menubar`

Para uma barra de menu horizontal persistente com ações de estilo aplicação:

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

Correto — menus aninhados com submenus dropdown

Um menubar com um menu dropdown contendo elementos menuitem adicionais:

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

Correto — usando `aria-owns` para propriedade sem aninhamento no DOM

Quando os elementos menuitem não podem ser aninhados dentro do menu no DOM (por exemplo, devido a restrições de layout), use aria-owns para estabelecer a relação:

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

Melhor alternativa — use HTML semântico para navegação de site

Se está a construir navegação padrão de website (não um menu de estilo aplicação), evite completamente as roles de menu 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>

Esta abordagem é mais simples, mais acessível por defeito, e não desencadeia o aviso do validador. Reserve role="menu", role="menubar", e role="menuitem" para verdadeiros menus de estilo aplicação que implementam padrões completos de interação por teclado conforme descrito no ARIA Authoring Practices Guide.