Logotipo CamaraUX - Consultoria em UX Design
Ver currículo

Quando não usar modal

Evite modais para fluxos longos, mensagens comuns e conteúdo que não precisa bloquear a página.

Wireframe minimalista de uma página interativa contrastada com uma modal evitável.
Componente
Área
Tipo
Nível de impácto
Alto
Status
Evitar
Nível de evidênica
Forte evidência

Contexto

Uma modal interrompe o fluxo e impede a interação com a página ao fundo. Quando usada para tarefas extensas ou situações rotineiras, ela aumenta a complexidade e dificulta a navegação.

Antes de usar uma modal, verifique se o conteúdo pode permanecer na página, aparecer como mensagem contextual ou ser apresentado em uma tela própria.

Use uma página para fluxos longos, um alerta para mensagens de status e um painel ou seção expansível para informações complementares. Reserve a modal para decisões curtas que realmente exigem atenção imediata.

Interface real do IBM Cloud com uma área de configuração editável na própria página, sem modal.
Exemplo real: o Carbon Design System apresenta uma criação inline para uma tarefa simples, mantendo o contexto da página visível e interagível. Fonte: Carbon Design System — Create flows: https://v10.carbondesignsystem.com/community/patterns/create-flows/

Porque isso importa?

Modais bloqueiam o conteúdo, interrompem o contexto e podem criar problemas de foco, rolagem e leitura em dispositivos móveis e tecnologias assistivas.

O USWDS recomenda considerar outra solução sempre que possível e classifica modais como último recurso, especialmente para fluxos com várias etapas, mensagens comuns, conteúdo extenso e links externos.

  • O fluxo tem várias etapas.
  • O formulário é longo.
  • O conteúdo exige leitura extensa.
  • A mensagem é comum ou rotineira.
  • A página pode continuar interativa.
  • O usuário precisa navegar para outro endereço.
  • Exibir mensagens de sucesso.
  • Mostrar erros de campos.
  • Apresentar textos longos.
  • Solicitar tarefas complexas.
  • Bloquear links externos.
  • Abrir automaticamente sem necessidade.
Interface real do IBM Cloud com notificações toast de aviso e sucesso apresentadas sem bloquear a página.
Exemplo real: o Carbon Design System mostra notificações toast de aviso e sucesso como feedback não bloqueante, uma alternativa menos interruptiva que uma modal quando a informação não exige bloqueio. Fonte: Carbon Design System — Notifications: https://carbondesignsystem.com/patterns/notification-pattern/

Recomendações

Faça

Práticas recomendadas
  • Prefira uma página própria.
  • Mostre erros no contexto.
  • Use alertas para status.
  • Mantenha a página interativa.
  • Teste o fluxo no mobile.
  • Reserve modal para exceções.
Exemplo correto: uma tarefa longa permanece na página, com mensagem contextual e conteúdo interativo sem bloqueio.
A tarefa permanece na página, com mensagem contextual e conteúdo interativo sem bloqueio.

Evite

Práticas a evitar
  • Não coloque um fluxo inteiro em modal.
  • Não use modal para toda mensagem.
  • Não esconda conteúdo importante.
  • Não interrompa sem ação do usuário.
  • Não force confirmação de links.
  • Não use rolagem como solução padrão.
Exemplo incorreto: uma modal bloqueia a página para um fluxo longo e uma mensagem que poderiam aparecer no contexto.
A modal bloqueia a página para uma tarefa longa e uma mensagem que poderiam aparecer no contexto.
Página real do GOV.UK com resumo de erro no topo e mensagem associada ao campo de nome.
Exemplo real: o GOV.UK apresenta um resumo de erros no topo e uma mensagem associada ao campo dentro do próprio fluxo, sem abrir uma modal para a validação. Fonte: GOV.UK Design System — Error summary: https://design-system.service.gov.uk/components/error-summary/

Acessibilidade

Se a modal for mantida, ela deve seguir o padrão de diálogo acessível: foco dentro da janela, navegação previsível por teclado, fechamento claro e retorno do foco ao elemento acionador.

Use aria-modal="true" somente quando o conteúdo ao fundo estiver realmente inativo para todas as pessoas. Caso contrário, a semântica pode esconder conteúdo necessário para usuários de tecnologias assistivas.

Teste a alternativa escolhida com teclado, zoom, leitor de tela e diferentes tamanhos de tela.

Checklist

  • A tarefa pode ser concluída na página?
  • O fluxo possui várias etapas?
  • O conteúdo é curto?
  • A mensagem é realmente crítica?
  • O usuário iniciou a ação?
  • Existe uma alternativa menos interruptiva?
  • A página continua utilizável no mobile?
  • Links externos estão livres de bloqueios?
  • A alternativa foi testada com teclado e leitor de tela?

Referências

  • U.S. Web Design System — Modal. Recomenda considerar outra solução antes de usar uma modal e orienta evitá-la em fluxos complexos, mensagens comuns, conteúdo longo e links externos. Consultar o componente.
  • W3C — ARIA Authoring Practices Guide: Dialog (Modal) Pattern. Explica que uma modal torna o conteúdo ao fundo inativo e exige controle adequado de foco, teclado e retorno ao elemento acionador. Consultar o padrão.
  • Padrão Digital de Governo — componente Modal. Define a modal como uma interrupção proposital e recomenda conteúdo conciso, ações claras e uso adequado ao tipo de tarefa. Consultar o componente.
  • AMAWeb — Checklist ABNT NBR 17225. Apoia a verificação de foco visível, ordem previsível, ausência de bloqueio do teclado e acessibilidade por teclado em componentes sobrepostos. Consultar a checklist.
  • AMAWeb — Manual de acessibilidade digital. Reúne orientações sobre operação por teclado, foco, semântica e compatibilidade com tecnologias assistivas. Consultar o Manual.
Veja também

Esta recomendação foi útil para você?