Uma coisa que em geral ninguém comenta tanto em eventos de UI e Design Visual é o fato que normalmente treinamos para deixar nossas interfaces apenas visualmente interessantes. Quando alguém fala do tema acessibilidade é como se fosse algo muito distante de nós. “Isso é trabalho do pessoal de front”. Será?

A pessoa de front-end pode ter tomado cuidado com alguns pontos, mas se o layout peca em outros, não adianta muita coisa. Um site com código acessível e o layout não é como arrumar metade de uma sala bem bagunçada.

Depois do seu primeiro feedback de um usuário daltônico que não consegue diferenciar o ícone verde do cinza você começa a pensar um pouco fora da sua bolha “vamos deixar isso tudo bem bonito”.

E quando falamos de acessibilidade, não estamos nos referindo somente à pessoas com deficiência (PCD) mas também criando um site mais fácil de usar para idosos por exemplo.

Mas deve ser difícil…

Ninguém falou que seria fácil, mas não é um bicho de sete cabeças. Algumas decisões que tomamos ao fazer um layout podem mudar totalmente a experiência de usuário de uma pessoa. Abaixo um exemplo de uma formulário apresentando um erro, repare no preciso tom de vermelho usado na borda:

form nao acessivel
Ué…

O que poderíamos fazer ali? Reforçar visualmente quais campos estão com erro! Algo que o Facebook faz por exemplo é colocar ícones para indicar isso:

form mais acessivel
Agora fica mais fácil

Nunca passarás informação relevante apenas por cor.

Só isso? Fácil mesmo então!

Opa, pelo menos é um começo, pois existem muitos outros pontos interessantes para pensarmos quando estamos “leiautando”, por exemplo:

  • evitar cores muito contrastantes e uso de figuras de linguagem pensando no público autista (TEA)
  • usar gráficos para acompanhar textos muito longos pensando em pessoas com dislexia
  • fornecer legendas em vídeos com o público Surdo em mente
  • parar de achar que uma fonte de 10px é um tamanho bom e ficar com o discurso de “qualquer coisa a pessoa dá zoom, né?”

Reparou que tudo isso pode ser benéfico para pessoas que não possuem nenhuma dessas deficiências e particularidades também? Quando você deixa seu design inclusivo automaticamente já melhora a usabilidade para todos e todas.

E onde vejo a documentação disso tudo?

Existe a WCAG 2.1 (Diretrizes de Acessibilidade para Conteúdo Web) organizado pela W3C, empresa por trás dos padrões web.

Se a leitura for muito pesada para você (assim como foi para mim) recomendo o magnífico trabalho do Marcelo Salles que mostra todas as diretrizes de acessibilidade web de forma simples e prática.

Além do próprio Marcelo citado acima, recomendo o trabalho da Talita Pagani e do Reinaldo Ferraz que além de serem ótimas referências no assunto sempre estão palestrando sobre.

Agora pare de preguiça e entenda que um design bem feito é um design inclusivo. Existem alguns plugins focados em acessibilidade que podem te ajudar com isso.

Qual conteúdo ou pessoa faltou citar aqui? Compartilha com a gente nos comentários!

Que tal receber dicas de UX direto no seu e-mail?

Receba a newsletter que eu escrevo pessoalmente, com práticas de usabilidade, insights do mercado de UX e dicas do Figma