Projetar menus, popovers e modais acessíveis

A palavra menu tem quatro sentidos, e trocar um pelo outro no código custa visitante. Navegação é só um deles: a lista de links que leva de uma página do site a outra, como o índice de um catálogo.

Quando essa lista recebe o papel de menu de programa (role="menu"), quem usa leitor de tela ouve instrução de setas. Ali ela não funciona, porque a lista só responde ao Tab, e a pessoa fecha a página sem avisar ninguém.

Os outros três sentidos pedem código diferente. Editar ou excluir um item pede menu de ação, com teclado próprio. Mostrar e esconder um bloco pede um botão que declara se está aberto. A barra fixa de programa de computador quase nunca cabe num site. O agente, a ferramenta de IA que escreve o código, confunde os quatro.

Troque todo rótulo genérico por um que diz o destino, porque a pessoa decide clicar pela promessa que lê. Em vez de Continuar, escreva Criar conta grátis; em vez de Enviar, escreva Baixar o PDF.

Essa pista que o link dá antes do clique tem nome: aroma de informação. Rótulo vago é a forma mais barata de perder quem já estava quase comprando.

Escolha o propósito do menu primeiro e a forma depois, pelo número de itens, como no quadro abaixo. A barra do topo aguenta de cinco a sete links e a lista suspensa até oito itens por categoria.

O mega menu, painel largo de várias colunas, entra acima de 50 páginas. Um catálogo de 40 categorias já passa desse limite, e a barra sozinha vira fila cortada no celular.

Há medida oficial para o clique no menu: o INP, o tempo entre o toque da pessoa e a resposta que aparece na tela. Ele é um dos Core Web Vitals, as notas de experiência que o Google acompanha em toda página.

A faixa boa vai até 200 milissegundos, apurados nas visitas reais e separados entre celular e computador. Menu que demora a abrir derruba a página nessa nota, e a causa quase sempre é código demais rodando no clique.

Um pedido simples melhora o resto: mandar o navegador buscar a próxima página antes do clique, pela Speculation Rules API. Vale para os links do menu principal. Link que executa ação, como sair da conta, fica de fora, porque o pré-carregamento dispararia a ação sem ninguém clicar.

Aba aberta, filtro aplicado e número da página precisam viver no endereço da página (a URL), nunca só na memória da tela. É o endereço que a cliente copia para o WhatsApp, e é dele que o botão de voltar depende. Fora da URL, o link chega vazio do outro lado e o recarregamento apaga a escolha.

Em React, a base mais usada para montar telas em pedaços, o pacote nuqs faz essa ligação pronta. Sem React, um formulário que envia pela URL resolve igual.

A rolagem infinita, a lista que cresce sozinha enquanto a pessoa desce a tela, quebra as três garantias de uma vez. Sem número de página no endereço, o Google indexa só a primeira carga e quem navega pelo teclado nunca alcança o rodapé. Prefira paginação ou um botão de carregar mais que grave a página na URL.

O menu de ação responde a cinco movimentos de teclado, e o agente costuma entregar só o clique de mouse. As setas movem o foco, que é o destaque mostrando qual item está selecionado, e voltam ao primeiro item depois do último.

Home e End saltam para as pontas e uma letra pula para o item que começa com ela. Enter aciona, e Esc fecha devolvendo o foco ao botão que abriu. O defeito fica invisível até alguém testar sem encostar no mouse.

Quatro requisitos fecham o menu de celular. A gaveta que abre pelo ícone de três traços prende o foco do teclado dentro do painel. Ela fecha com Esc ou com um toque fora e devolve o foco ao botão que a abriu.

Ação usada toda semana não pode morar só dentro dessa gaveta, porque quem não vê a lista esquece que ela existe. Uma barra inferior com três a cinco seções, na faixa que o polegar alcança sem trocar a mão de posição, resolve isso.

Cada item obedece à régua de área de toque, o retângulo que responde ao dedo e que é maior que o desenho do ícone. O piso é 24 por 24 pixels, critério 2.5.8 da WCAG 2.2, a norma internacional de acessibilidade. A Apple pede 44 e o Android pede 48. Peça 48 e passa nas três.

Conte os itens da navegação principal e escolha a forma pelo quadro acima. Acima de sete links na barra, agrupe categorias ou peça mega menu; no celular, leve as três a cinco seções mais usadas para a barra inferior.

Depois leia cada rótulo isolado do resto da tela, porque é assim que ele chega a quem chegou de fora. Ver planos e preços nomeia o destino; Saiba mais não diz nada sozinho. Peça a lista de links, a medida do INP e o pré-carregamento num pedido só, deixando de fora o link que executa ação.

Percorra então o menu de ação e a gaveta sem tocar no mouse. Chegue ao botão pelo Tab, abra com Enter, cicle com as setas e feche com Esc. Confira que o foco volta ao botão de origem.

Por fim, aplique um filtro numa categoria e cole o endereço numa aba anônima. Se a tela não mostrar o mesmo resultado, o link que a cliente compartilha chega vazio, e é o que consertar antes de aprovar a entrega.

Abra menu, caixinha e janela com o que o navegador já traz

A forma de menu e o estado guardado na URL estão resolvidos, e o comportamento de abrir, ancorar e fechar ainda pode vir do navegador, sem script.

Menu suspenso, popover, janela modal e carrossel já vêm prontos no navegador e deixaram de exigir programação própria. Popover é a caixinha que abre presa a um botão, e carrossel é a faixa de imagens que desliza para o lado.

O navegador entrega abertura, fechamento ao clicar fora, posicionamento e indicadores por atributo de HTML e regra de CSS. Cada script que a empresa deixa de manter é uma fonte de defeito a menos. O ganho aparece quando você revisa o que o agente de IA entregou pronto.

Três atributos substituem o script de abrir e fechar. O popovertarget num botão abre a caixinha, e o clique fora fecha sozinho.

O elemento dialog com closedby faz o mesmo com a janela modal, aquela que cobre a tela e exige uma resposta. O par commandfor e command, da Invoker Commands API, abre e fecha pelo atributo.

Consulte na tabela adiante o suporte de cada recurso, junto com o que acontece onde ele ainda não chegou. Onde o comando por atributo falta, o botão fica parado, e aí entra o único script aceitável: o mínimo que abre e fecha a janela.

A armadilha é a janela sem botão de fechar visível. Quem usa leitor de tela fica preso dentro dela, e nenhum atributo novo conserta isso.

:has() é o seletor que faz o elemento de fora reagir ao que existe dentro dele. É ele que marca o item ativo do menu sem script: a barra muda quando um link avisa que representa a página atual. Onde ele falta, os itens seguem legíveis e clicáveis, só sem o destaque.

O anchor positioning, o posicionamento ancorado nativo, prende a caixa ao botão que a abriu, inclusive o painel largo de um mega menu. Sem ele, a caixa abre no centro da tela e continua utilizável.

Peça o Floating UI, a biblioteca que calcula essa posição por JavaScript. Ela entra só enquanto o painel de visitas mostrar muito navegador antigo demais para a âncora nativa.

A lista suspensa de opções com visual próprio, o customizable select, ainda está em desenvolvimento. Enquanto ela não chega, o agente reimplementa a lista à mão, e daí nasce a maior parte do script de menu que você vai manter depois.

O plano B mais barato é o select nativo sem enfeite, que já é acessível e sobe o teclado certo no celular.

Carrossel simples também dispensa programação. Os pseudoelementos ::scroll-marker desenham os pontinhos de posição a partir da própria rolagem, o movimento de arrastar a faixa para o lado. Sem suporte, a faixa rola por toque, só sem os pontinhos.

Quando o carrossel precisa de mais, o Embla resolve com cerca de 4 kB. O Swiper pesa dez vezes isso e só entra quando o efeito 3D pronto justifica o peso.

A animação de entrada também é nativa. O @starting-style anima a abertura da caixinha e da janela. A View Transitions same-document, a troca animada entre dois estados da mesma página, vem antes de qualquer biblioteca. Sem suporte, a troca acontece seca e ninguém perde conteúdo.

O critério de decisão é o navegador do seu público, lido no painel de visitas do site. Use o recurso nativo quando a maioria do acesso vem de navegador atualizado e o plano B da tabela ainda cumpre a função. Reserve a biblioteca para onde esse plano B quebra.

Papel de menu de programa numa navegação simples continua errado, com ou sem script.

Peça os quatro recursos num pedido só, com o plano B de cada um escrito junto, e você evita quatro conversas separadas com o agente. Numa página de reservas isso vira item ativo por :has(), popover ancorado com a diária, carrossel com ::scroll-marker e uma janela modal com botão de fechar à vista.

Antes de aprovar, percorra a tela com Tab, feche com Esc e repita tudo no celular. Depois abra a mesma página num navegador antigo: se o conteúdo continuar visível e utilizável, só sem o enfeite, o plano B está de pé.

Só onde ele não estiver, e a fatia de navegador antigo no painel de visitas justificar, peça uma biblioteca como Floating UI ou Embla.

Guia prático: o que a navegação de 51 templates e 154 componentes esquece

A navegação é a peça que o visitante usa sem pensar, e por isso quase ninguém confere. Medindo o código-fonte dos 51 templates estudados em 07/10/2026:

Os dois últimos números juntos dizem muito. Em 20 templates, quem abre no celular perde a navegação inteira e fica só com o botão de contato. Nos 26 que têm botão de menu, só 3 informam se o menu está aberto (aria-expanded), 7 dão nome ao botão e 1 fecha o menu com Esc. Nenhum template marca o link da página atual nem oferece link para pular direto ao conteúdo.

Um erro fica escondido entre os números. Dos 27 templates com âncoras, 19 têm cabeçalho fixo, e só 1 do conjunto reserva espaço para ele com scroll-padding ou scroll-margin. Sem isso, o clique em "Serviços" leva à seção com o título escondido embaixo do cabeçalho.

Os 154 componentes de navegação da biblioteca estudada vão pelo mesmo caminho: 28 menus suspensos, 22 docks, 16 barras laterais e 14 abas, 81 sem campo de licença. Nos 67 exemplos de uso preenchidos, aria-expanded aparece em 1 e o tratamento de Esc em nenhum.

Guia prático: menu, janela e lista de opções nativos, com o que chegou de julho a setembro

A aula montou menu, popover e janela com o que o navegador já traz. Entre julho e setembro de 2026, três peças mudaram: o Chrome 154 parou de fechar popover e janela quando a pessoa rola a tela no toque, o Safari 27 passou a aceitar o select com visual próprio e o posicionamento ancorado ganhou valor inicial comum no Chrome e no Safari. Você sai daqui pedindo a janela que ocupa a tela no celular e vira caixa no computador, com o mesmo código.

Aplicar os recursos ao projeto