Um menu de navegação deve ser acionável e permitir que a pessoa chegue aos links, saiba quando um submenu abriu e saia dele sem mouse. Para a navegação comum de um site, um botão de divulgação (disclosure) com links costuma ser mais simples que atribuir papéis de menu de aplicação.
Teste por teclado
- Recarregue a página e navegue com
Tab/Shift+Tab. Cada botão e link precisa mostrar foco; a ordem deve seguir a organização visual e não saltar para conteúdo oculto. - No botão que abre submenu, teste
EntereEspaço. Confirme que o controle anuncia expandido/recolhido (aria-expanded) e que o submenu fechado sai da ordem de foco e da árvore acessível. - Com o submenu aberto, use
Tabpara visitar cada link;Enterabre o destino. Ao chegar ao fim,Tabdeve avançar para o próximo controle, sem prender a pessoa. Escapedeve fechar submenu e devolver foco ao botão que o abriu. Reabra, feche também clicando fora e confirme que o estado acessível foi atualizado.- Repita com viewport estreito, zoom, leitor de tela quando disponível e página rolada; veja se cabeçalho fixo não encobre foco e se o menu não fecha antes do link poder ser alcançado.
Escolha e implemente um padrão coerente
- Disclosure de navegação: links seguem no fluxo de Tab; botão expõe estado com
aria-expandede relação poraria-controls. W3C APG descreve teclas de fechamento e foco para o exemplo de navegação disclosure. - Widget
menu/menubar: use apenas se realmente for um menu de aplicação que imita menus de software. Esse padrão demanda gerenciamento de foco e setas; Tab/Shift+Tab não percorrem cada item da mesma maneira. ARIA sozinha não implementa o comportamento. - Links sem submenu: permaneçam links normais, com URL e ativação padrão. Não transforme todo item em botão sem necessidade.
Registre por componente: tecla, estado esperado, posição do foco ao abrir/fechar e resultado. Corrija a implementação até todos os passos funcionarem sem mouse. Leia exemplo W3C de navegação disclosure e o padrão menu/menubar. Veja também o núcleo de sites institucionais.