Como tratar ações destrutivas

Combine risco, reversibilidade e alcance para decidir quando confirmar, desfazer ou executar uma ação destrutiva.

Wireframe de uma interface com uma ação de exclusão destacada e indicação de recuperação
Nível de impácto
Alto
Status
Recomendado
Nível de evidênica
Boa prática

Contexto

Ações destrutivas podem excluir dados, remover acesso, descartar alterações ou afetar várias pessoas. O objetivo não é adicionar uma confirmação a cada clique, e sim combinar o nível de proteção com o impacto, a frequência e a reversibilidade da ação.

Use esta regra junto de Como fechar um modal corretamente quando a confirmação usar uma janela modal e de Como preservar dados após um erro no formulário quando a ação fizer parte de um fluxo que pode descartar trabalho.

Classifique a ação pelo dano possível, pela frequência e pela possibilidade de desfazer.

Prefira uma ação reversível, como arquivar, desativar ou oferecer Desfazer, quando isso atender ao objetivo da pessoa.

Para uma ação irreversível ou de alto impacto, explique no contexto o que será afetado, se a recuperação será possível e qual será a consequência.

Use um rótulo específico no botão final, como Excluir projeto, Descartar alterações ou Remover membro. Evite Sim, OK e Confirmar.

Dê destaque de perigo ao comando que realmente executa a destruição, sem depender apenas da cor. Mantenha o cancelamento claro e fácil de alcançar.

Em exclusões em massa ou com dependências, mostre a quantidade, o escopo e os efeitos relevantes antes da decisão.

Use confirmação somente quando ela reduzir um risco real. Para ações rotineiras e reversíveis, prefira feedback imediato com uma oportunidade clara de desfazer.

Página do Apple Human Interface Guidelines mostrando um alerta com ação primária e secundária
A Apple apresenta um alerta com ação primária e secundária e orienta usar interrupções com parcimônia: ações destrutivas comuns e reversíveis podem usar desfazer, enquanto ações incomuns e irreversíveis justificam confirmação. Fonte: Apple Human Interface Guidelines, Alerts: https://developer.apple.com/design/human-interface-guidelines/alerts

Porque isso importa?

A WCAG 2.2, no critério 3.3.4, exige que ações que modificam ou excluem dados controláveis ofereçam pelo menos uma proteção adequada: reversão, conferência ou confirmação. O critério não exige uma janela de confirmação para toda ação de salvar, nem transforma o modal em solução universal.

O WAI-ARIA APG recomenda que, em um diálogo modal, o foco entre no diálogo, permaneça dentro dele durante a interação e retorne ao elemento que o abriu quando o diálogo fechar. Para uma decisão difícil de reverter, o foco inicial pode ficar na opção menos destrutiva.

A Apple orienta usar alertas com parcimônia: ações destrutivas comuns e reversíveis podem usar desfazer, enquanto ações incomuns e irreversíveis justificam uma interrupção para confirmação.

Carbon e GitHub Primer convergem em uma orientação contextual: o título, a mensagem e o botão devem dizer claramente o que acontecerá; ações perigosas recebem ênfase própria; e a fricção deve acompanhar o custo de um erro. Essas recomendações de design system são referências de implementação, não prova isolada de uma regra universal.

Use esta orientação para exclusão permanente, descarte de alterações sem recuperação, remoção de acesso, ações em massa, operações que afetam outras pessoas e mudanças difíceis de reverter.

Combine-a com uma confirmação quando a pessoa puder acionar a ação por engano e precisar revisar o objeto, o escopo ou a consequência antes de concluir.

Quando o item puder ser recuperado, considere arquivamento, lixeira, desativação ou uma mensagem de sucesso com Desfazer.

Evite confirmação para ações frequentes, intencionais, de baixo impacto e facilmente reversíveis. Evite também usar um modal para informar algo que não exige decisão.

Não use confirmação genérica, não esconda a consequência em texto secundário e não exija digitar uma frase para toda exclusão. A confirmação por texto deve ficar reservada para operações permanentes, amplas ou de alto alcance.

Página do IBM Carbon Design System mostrando a variante Danger de um modal
O IBM Carbon documenta Danger como uma variante transacional específica para ações destrutivas ou irreversíveis. A captura mostra como o sistema separa esse caso das variantes informativa, transacional e de progresso. Fonte: IBM Carbon Design System, Modal Usage: https://carbondesignsystem.com/components/modal/usage/

Recomendações

Faça

Práticas recomendadas
  • Nomeie a ação e o objeto.
  • Explique a consequência.
  • Prefira desfazer quando possível.
  • Confirme o que é irreversível.
  • Mantenha cancelar claro.
  • Proteja o foco do teclado.
Wireframe de diálogo de confirmação com cancelamento seguro e ação destrutiva destacada
Exemplo correto: a confirmação contextualiza a consequência, mantém o cancelamento claro e destaca apenas a ação destrutiva.

Evite

Práticas a evitar
  • Não use “Sim” ou “OK”.
  • Não confirme toda ação.
  • Não dependa só de vermelho.
  • Não esconda o alcance.
  • Não remova a recuperação.
  • Não deixe o foco perdido.
Wireframe de uma interface com várias ações destrutivas competindo visualmente
Exemplo incorreto: várias ações destrutivas competem pelo destaque, sem contexto suficiente para avaliar o risco.
Página do GitHub Primer documentando o cenário Delete e suas orientações de confirmação
O GitHub Primer diferencia excluir permanentemente de remover uma associação e recomenda ajustar a fricção ao impacto: desfazer para ações reversíveis, diálogo para um recurso isolado e confirmação mais forte para grande alcance. Fonte: GitHub Primer, Delete: https://www.primer.style/product/scenario-patterns/delete/

Acessibilidade

Use um diálogo semântico com nome acessível, descrição associada e comportamento modal real quando a confirmação bloquear o restante da interface. O fundo deve ficar inerte para mouse, teclado e tecnologias assistivas.

Ao abrir, mova o foco para um elemento dentro do diálogo. Em uma ação destrutiva e difícil de reverter, considere iniciar pelo cancelamento ou pela opção menos destrutiva. Mantenha Tab e Shift + Tab dentro do diálogo e permita fechar com Esc quando isso não contrariar o fluxo.

Ao fechar, devolva o foco ao controle que abriu a confirmação. Se esse controle ou o item tiver sido removido, mova o foco para um destino lógico e estável.

Não use apenas cor, ícone ou posição para comunicar o risco. O rótulo do botão e a mensagem devem ser compreensíveis sem esses sinais.

Checklist

  • A ação tem impacto e alcance definidos?
  • É possível desfazer ou recuperar?
  • O rótulo identifica o verbo e o objeto?
  • A consequência está explícita?
  • A confirmação é realmente necessária?
  • O comando destrutivo tem ênfase adequada?
  • Cancelar é claro e fácil de acionar?
  • Exclusões em massa mostram o escopo?
  • O foco entra e permanece no diálogo?
  • O foco retorna a um destino lógico?
  • A decisão funciona sem depender de cor?

Referências

W3C. Understanding Success Criterion 3.3.4: Error Prevention (Legal, Financial, Data). Define que ações que modificam ou excluem dados controláveis devem oferecer reversão, conferência ou confirmação. A página também esclarece que isso não exige confirmação para cada ação de salvar. Consultar a fonte.

W3C WAI-ARIA APG. Dialog (Modal) Pattern. Documenta foco dentro do diálogo, ciclo de teclado, retorno do foco e a possibilidade de iniciar pelo controle menos destrutivo em ações difíceis de reverter. Consultar a fonte.

Apple Human Interface Guidelines. Alerts. Recomenda usar alertas com parcimônia, evitar interrupções para ações comuns e reversíveis e confirmar ações destrutivas incomuns e irreversíveis. É uma orientação específica para plataformas Apple. Consultar a fonte.

IBM Carbon Design System. Modal Usage. Recomenda uma variante de perigo para ações destrutivas ou irreversíveis e orienta que o título e o botão descrevam a ação que acontecerá. É uma referência contextual de design system. Consultar a fonte.

GitHub Primer. Delete scenario. Relaciona a fricção ao custo do erro, recomenda desfazer quando possível, diferencia remover de excluir e orienta rótulos específicos para o botão destrutivo. É uma referência contextual de produto e sistema de design. Consultar a fonte.

GitHub Primer. ConfirmationDialog accessibility. Demonstra título específico, consequência explícita, botão de perigo, foco inicial no cancelamento para ações perigosas e retorno do foco ao acionador. É uma implementação contextual que deve ser testada no produto real. Consultar a fonte.

GOV.UK Design System. Button. Recomenda reservar o botão de aviso para consequências destrutivas sérias e difíceis de desfazer, usar uma etapa adicional de confirmação e não depender apenas da cor. É uma referência governamental contextual. Consultar a fonte.

Veja também

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