Uma janela modal aparece sobre a página e impede interação com o conteúdo ao redor até que seja fechada ou concluída. Se ela só parece modal visualmente, mas permite foco ou interação no fundo, pode confundir quem navega por teclado ou tecnologia assistiva.
Confira se precisa mesmo bloquear o restante
Use modal somente quando a tarefa exigir atenção e a página ao redor realmente ficar inativa. Para uma dica breve ou conteúdo que pode ser lido no fluxo, um painel não modal ou conteúdo na própria página pode ser mais simples.
A W3C APG alerta que aria-modal="true" só deve ser usado quando a interação fora da janela está de fato bloqueada e o fundo está visualmente obscurecido. Atributo ARIA não implementa esse bloqueio sozinho.
Teste o ciclo de foco
- Ative o botão que abre a janela e confirme que o foco entra no diálogo num ponto útil.
- Use Tab e Shift + Tab até o início e o fim; o foco deve permanecer dentro enquanto a modal está aberta.
- Confira que controles do fundo não podem ser ativados.
- Feche com o botão visível, com Escape quando adequado e após concluir a tarefa.
- Confirme que o foco retorna ao elemento que abriu a janela, ou ao próximo ponto lógico se esse elemento deixou de existir.
A sequência de Tab deve conter o foco do diálogo, segundo a orientação da WAI. A página também precisa de um nome visível associado ao diálogo e controles com rótulos que indiquem ações. Evite atribuir um nome a partir de vários parágrafos quando isso produzir um anúncio longo e sem estrutura.
Prefira semântica nativa quando possível
O elemento HTML <dialog> oferece funcionalidades nativas quando usado com o método modal apropriado, mas o site ainda precisa conferir nome, foco inicial, fechamento, foco de retorno e suporte nos navegadores escolhidos. Componentes customizados exigem implementação e teste equivalentes.
Não use aria-hidden para esconder o fundo sem entender a árvore e o comportamento de foco; isso pode ocultar o próprio diálogo ou deixar controles focáveis sem acesso. Para testar os caminhos sem mouse, siga o roteiro de teclado e foco.
Valide em teclado, celular, leitor de tela e nos navegadores usados pelo público. Os exemplos da APG WAI são padrões ilustrativos e pedem testes antes de uso em produção; passar por esta lista não certifica conformidade completa.