Menu

GUIA DO COMPONENTE

Explore os comportamentos antes de definir a interface.

Design de Interação

Questionamentos que devem ser feitos ao se projetar componentes do tipo Menu.

Importante:
Dependendo do contexto de construção de seus respectivos componentes, é possível que haja mais questionamentos, bem como alguns dos apresentados aqui não ser necessários. A avaliação precisa ser feita caso a caso.

Projetando para a "não interação"

Antes de interagir é possível perceber que o menu contém opções de navegação?
O item atual ou seção ativa é visualmente identificável?
Itens com submenu deixam claro que abrem mais opções?

Projetando para uso com mouse (qualquer dispositivo de apontamento)

Há feedback visual ao passar o mouse em itens acionáveis?
Ao clicar em um link, a página ou seção correspondente é carregada?
Ao clicar em um acionador de submenu, o submenu abre ou fecha de forma previsível?

Projetando para uso com gestos

O menu abre e fecha de forma confortável em telas pequenas?
Itens e acionadores possuem área tocável suficiente?
A ordem visual no menu mobile acompanha a ordem de navegação?

Projetando para uso com teclado (qualquer dispositivo que não seja de apontamento)

Links e botões do menu têm foco visível?
TAB percorre os itens na ordem esperada?
ESC fecha submenus ou menus temporários quando aplicável?
O foco retorna para o acionador quando um menu temporário é fechado?

Projetando para uso com leitor de telas

A região de navegação tem nome acessível quando necessário?
Links possuem nomes claros e únicos dentro do contexto?
Submenus expõem estado aberto ou fechado quando aplicável?

Métodos de Interação

Possíveis métodos de interação em componentes do tipo Menu.

Importante:
Apenas os principais métodos estão listados aqui. Componentes customizados devem ter estudos aprofundados.

Interação com mouse (qualquer dispositivo de apontamento)

Clicar em links navega para o destino correspondente.
Clicar em botões de submenu alterna sua exibição.
Hover pode revelar pistas visuais, mas não deve ser o único método de abertura.

Interação com teclado (qualquer dispositivo que não seja de apontamento)

TAB navega pelos links e botões do menu.
ENTER aciona links e botões.
SPACE aciona botões de abertura quando existirem.
ESC fecha menus ou submenus temporários quando aplicável.

Interação com teclado (ou gestos) + leitor de telas

Use nav para menus de navegação.
Use listas quando houver agrupamento de links.
Use aria-expanded em acionadores de submenu.
Evite aplicar role="menu" em navegação comum de site.

Gherkin

Metodologia BDD (Behavior-Driven Development ou Desenvolvimento Orientado ao Comportamento) com foco em 3 pilares: Histórias de Usuário, Critérios de Aceite e Sintaxes Gherkin (Dado (Given), Quando (When), Então (Then)). , Ref 2 (abre em uma nova aba).

Cenário: Considerando que estou em uma página que contém menu de navegação

Navegação por teclado

QUANDO uso a tecla Tab para mover o foco para o menu
VEJO foco visível nos links e botões do menu
ENTÃO, quando aciono um link com Enter
VEJO que o destino correspondente é carregado
ENTÃO, quando aciono um botão de submenu
VEJO que o submenu abre ou fecha

Leitor de telas para desktop

Quando uso um leitor de tela no computador (NVDA, JAWS, VoiceOver) e navego pelo componente
- OUÇO que o menu pertence a uma região de navegação quando aplicável.
- OUÇO nomes claros para links e botões.
- OUÇO o estado aberto ou fechado em acionadores de submenu.
ENTÃO, quando interajo com o componente quando aplicável
OUÇO ou percebo que a informação, estado, conteúdo ou ação correspondente está disponível.

Leitor de telas para dispositivos móveis

QUANDO uso um leitor de tela no celular (Talkback, VoiceOver) e deslizo o dedo para navegar pelo componente, acontece o seguinte:
- OUÇO que o menu pertence a uma região de navegação quando aplicável.
- OUÇO nomes claros para links e botões.
- Consigo abrir, navegar e fechar o menu sem acessar conteúdo escondido indevidamente.
ENTÃO, quando interajo com o componente quando aplicável
OUÇO ou percebo que a informação, estado, conteúdo ou ação correspondente está disponível.

Pontos de Atenção

Pontos de atenção para se preocupar em componentes do tipo Menu.

Menu de navegação de site não deve ser tratado automaticamente como role="menu"; esse padrão é mais adequado para menus de aplicação.
Submenus acionados apenas por hover deixam pessoas usuárias de teclado e toque de fora.
Menu mobile deve manter ordem visual e ordem de foco coerentes.

Referências

Referências adicionais sobre componentes do tipo Menu.

Importante:
A maior parte das referências estão na plataforma do curso junto com as aulas citadas neste material.

Isenção de responsabilidade:
Os links indicados aqui não são recomendações, mas apenas uma curadoria de referências onde você pode encontrar componentes construídos. É importante ressaltar que não há uma unificação nos formatos de construção e não há garantias de que os links mencionados aqui cumpram todos os padrões de design. Dúvidas devem ser direcionadas para as respectivas equipes envolvidas nas construções dos materiais indicados. Antes de "copiar" algum modelo apresentado, leve em consideração que todos os materiais são atualizados constantemente e que os padrões (principalmente proprietários) podem sofrer alterações.