Contexto
Fechar uma modal não é apenas remover uma camada visual. A pessoa precisa saber qual ação encerra o diálogo, o que acontece com os dados e para onde o foco retorna.
Ofereça um botão de fechar visível e nomeado. Use “Cancelar” quando a tarefa puder ser abandonada e uma ação primária com verbo específico.
Ao fechar, remova o bloqueio do fundo e devolva o foco ao elemento que abriu a modal. Se houver dados não salvos, explique o efeito de fechar e confirme antes de descartá-los.
Porque isso importa?
Sem uma saída clara, a pessoa pode ficar presa, perder dados ou não entender se a tarefa foi concluída. O retorno do foco preserva a orientação para quem usa teclado ou leitor de tela.
Um “X” sem nome acessível ou um botão “OK” ambíguo não informa o resultado da ação. Fechar, cancelar, salvar e descartar são ações diferentes.
Quando usar?
- Quando a modal tiver uma saída visível e compreensível.
- Quando “Fechar”, “Cancelar” e “Salvar” produzirem efeitos diferentes.
- Quando Escape puder encerrar a modal sem ambiguidade.
- Quando dados não salvos forem preservados ou confirmados antes do descarte.
- Quando o foco puder retornar ao elemento que abriu a modal.
Quando evitar?
- Quando o único fechamento for um X sem nome acessível.
- Quando fechar descartar dados silenciosamente.
- Quando “Sim”, “Não” ou “OK” esconderem o efeito da ação.
- Quando Escape puder apagar trabalho sem confirmação.
- Quando a modal não devolver o foco ao contexto anterior.
Recomendações
Faça
- Nomeie o botão de fechar.
- Mostre uma saída visível.
- Diferencie fechar, cancelar e salvar.
- Confirme o descarte de dados.
- Permita Escape quando apropriado.
- Retorne o foco ao acionador.
Evite
- Não use X sem nome.
- Não descarte dados silenciosamente.
- Não confunda fechar e salvar.
- Não use “Sim” e “Não” isolados.
- Não deixe o foco escapar.
- Não perca o contexto.
