Modais— 5 motivos para nunca mais usa-los ☠

Os modais são invasivos, confusos, usados com muita frequência, pouco acessíveis, bloqueiam a interação da pessoa usuária com a janela principal, são usados como gaveta de lixo de interação, difíceis de fechar, proporcionam uma experiência frustrante em telas pequenas e aumentam a carga cognitiva com conteúdo ou interação não essenciais.

Tá! Foram mais de 5, mas deu para entender o quão ruim os modais podem ser para a experiência, usabilidade e acessibilidade, né?

Nesse artigo, eu vou abordar algumas estratégias que eu, enquanto pessoa desenvolvedora de software, uso para remover modais das aplicações que eu já trabalhei.

Em 2019, eu trabalhei com um Designer incrível chamado Pedro Ivo. Ele me apresentou o site modalz modalz modalz e me explicou como um modal pode ser ruim para a experiência da pessoa usuária. Desde então eu travei uma guerra contra os modais.

Sempre que eu encontro um modal, eu faço uma pergunta que eu aprendi nesse site:

“Porque isso precisa ser um modal?”

Logo em seguida, eu dou uma sugestão para a pessoa Designer do meu time de como poderíamos substituir o modal, e adivinhem:

Não precisava ser um modal!

Os modais são facilmente substituídos por outros elementos, como elementos de expansão, conteúdo em linha, uma nova página ou caixa de diálogos laterais que não bloqueiam a interação com a janela principal.

Eu já perdi as contas de quantos modais eu evitei, mostrando o poder dos accordions para o meu time de Designers kkk

O case do Zoom

O Zoom poderia ter usado um modal de confirmação ao sair, mas não usou! Apesar de parecer estranho no início, essa opção é interessante e traz alguns benefícios para a usabilidade e acessibilidade.

Por exemplo, após clicar em sair, caso alguém fale com você, é possível abrir o microfone com apenas 1 clique, sem a necessidade de fechar um modal primeiro para só depois conseguir responder.

Como acertar no uso do modal

Se você testou todas as alternativas e nenhuma deu certo, e você realmente considera importante o uso do modal, certifique-se de que seu modal seja bom!

Torne fácil a ação de fechar, por tecla de escape, clicando fora da janela modal e um botão Fechar claramente rotulado. Limite a interação a uma tarefa simples. Seja breve e conciso em seu conteúdo. Acessível para leitores de telas e fontes maiores, se você não puder torná-lo acessível, não use um modal.

Mesmo que seja permitido pela WCAG e exista formas de torna-los acessíveis para leitores de tela, eu particularmente continuo não gostando de usa-los, pois geram sobrecarga cognitiva e podem prejudicar a experiência de pessoas com DCNA — Deficiências Cognitivas Neuronais ou de Aprendizagem. Eu sou autista, se o modal não é acessível para 1 pessoa do meu clã, não é acessível!

Evite abrir um modal a partir de outro modal. Não use modais de tela cheia, nesse caso pode facilmente ser uma nova página. Nunca crie modais com várias etapas. Nunca abra um modal automaticamente, a menos que seja solicitado pela pessoa usuária. Evite modais de marketing, ninguém gosta.

Como criar um modal acessível para teclado e leitores de tela

➊ Ao abrir o modal, mova o foco para o primeiro item do Modal.
➋ Bloquear a interação com a página que está atrás do Modal.
➌ Colocar um botão de fechar grande, com rótulo e função acessível.

No tutorial da W3C e tutorial do Web Accessibility Guidelines tem alguns exemplos de código e explicações de como tornar um Modal acessível. Mas, sempre lembre:

Modal acessível é aquele que não existe.

E aí? Você vai se unir a mim na luta contra os modais?

Para quem prefere assistir vídeos, confira o resumão desse artigo no YouTube:

Esse conteúdo foi inspirado no site modalz modalz modalz. Obrigada por ler. Espero que esse conteúdo seja útil para você e seu time☺