Um menu suspenso de navegação mostra links quando a pessoa ativa um controle. O controle precisa anunciar se o grupo está aberto, funcionar sem hover e permitir chegar a cada destino com teclado e toque.
Prefira o padrão de divulgação para links de site
Links de navegação comuns não são necessariamente o mesmo tipo de componente que um menu de aplicativo com comandos. A W3C APG observa que navegação típica de sites geralmente não precisa do papel ARIA menu. Comece com elementos HTML nativos e acrescente ARIA apenas para descrever o estado que não é evidente de outra forma.
Um botão pode controlar uma lista de links. Quando fecha, use aria-expanded="false"; quando abre, atualize para true. A lista permanece como links comuns, na sequência normal de Tab.
<button type="button" aria-expanded="false" aria-controls="menu-servicos">
Serviços
</button>
<ul id="menu-servicos" hidden>
<li><a href="/servicos/criacao-de-sites-institucionais/">Sites institucionais</a></li>
</ul>O exemplo é estrutural: a implementação precisa conectar o botão ao comportamento que alterna visibilidade, manter o estado sincronizado e assegurar que a lista fechada não receba foco.
Teste mouse, toque e teclado
Ative o controle com Enter e Espaço. Confira que os links ficam disponíveis após abrir, que Tab percorre cada destino e que Escape fecha o grupo quando essa interação é implementada, devolvendo o foco ao botão. No celular, abra e feche com toque e verifique que o botão tem área confortável e estado visual perceptível.
Não esconda submenu somente em hover: a mesma função precisa estar disponível por foco/ativação e toque. Se um item de primeiro nível também navega para uma página, avalie separar o link e o botão que expande os filhos para que cada ação seja clara.
Revise estados e hierarquia
O nome do botão precisa descrever o assunto dos links. Indique o destino atual com um estado apropriado, como aria-current="page" no link atual, e mantenha a navegação organizada em listas. Evite mudar para role="menu" sem implementar o padrão completo de teclado e gerenciamento de foco esperado para widgets de menu.
Confira a sequência com o roteiro testar navegação por teclado e foco visível e valide o comportamento da página em leitor de tela e dispositivos reais. O padrão de divulgação da W3C explica os estados básicos de expandir e recolher.
Os exemplos da APG são referências de padrão, não código para copiar sem teste. HTML semântico e ARIA não corrigem sozinhos um menu que não se comporta de forma coerente.