Web Design e neurodiversidade: Criando uma rede mais inclusiva

Originalmente publicado no site Editor X.

Tradução por Luana Ferreti.

---

Já passou da hora de nós começarmos a considerar indivíduos neurodiversos como uma parte integral do público geral, e não apenas casos à parte. Segundo o Google Trends, o termo neurodiversidade tem ganhado atenção rapidamente desde 2018, e nunca tinha estado tão popular como está agora.

Um design acessível para usuários neurodiversos é um design acessível para todo mundo. Se você não conhece muito bem o termo, temos aqui uma introdução do conceito e um resumo de como aplicar princípios chaves no seu web design.

O que é a neurodiversidade? 

Para entender a ideia por trás da neurodiversidade, é melhor começar explicando duas abordagens médicas básicas. Apesar de parecer ser algo complexo, é na verdade bem simples.

Quando ouvimos que alguém está lidando com uma condição médica, costumamos questionar a sua causa. Essa abordagem é conhecida como patogênese – a procura pela origem e pelo mecanismo que causou uma doença.

A salutogênese, por outro lado, tem um foco completamente diferente. Ao invés de achar as razões por trás de uma doença, essa abordagem gira em torno dos fatores que apoiam a saúde e o bom funcionamento do corpo. O termo foi criado por Aaron Antonovsky, que também afirmava que não existe a dicotomia do saudável ou doente. Em vez disso, ele descreve a relação entre saúde e doença como um continuum.

O conceito da neurodiversidade, criado por Judy Singer e Harvey Blume (citado acima) nos anos 90, possui raízes provindas da abordagem salutogénica. Em vez de categorizar o TDAH e o autismo como doenças, eles são referidos como variações nas funções mentais, sem tratar eles como doenças ou como um déficit. Inclusive, esse conceito é baseado no modelo social da deficiência, que argumenta que são as barreiras e as estruturas presentes na sociedade que tornam um indivíduo deficiente, e não a sua condição física.

Um ambiente mais inclusivo

Você sabia que aproximadamente 15% da população é considerada neurodivergente, porém apenas metade dessa quantia está ciente disso? Mesmo que você trabalhe em um ambiente com poucas pessoas, é bem provável que um de seus colegas seja uma pessoa neurodivergente.

O conceito da neurodiversidade no design é geralmente levantado no contexto do local de trabalho. Usemos a dislexia como exemplo. Estima-se que em torno de 700 milhões de pessoas no mundo todo são disléxicas, e muitas delas são empreendedores de muito sucesso – como Richard Branson ou Jamie Oliver. Funcionários que se enquadram no espectro do autismo são muito propensos a ter sucesso em uma ampla gama de campos relacionados à tecnologia, incluindo programação e análise. 

Esses fatores incentivam muitas companhias a criar escritórios mais inclusivos para que todos os funcionários possam alcançar seu potencial máximo.

Tão importante quanto é a forma como abordamos o design para usuários neurodiversos. Com cerca de uma em cada sete pessoas sendo neurodiversas, isso está longe de ser um caso extremo. Neste artigo, vamos nos concentrar no aspecto que vai além do local de trabalho: a web.

Veja como você pode tornar seu web design mais neurodiverso:

O que considerar ao fazer um design para a neurodiversidade

Tipografia

A escolha da fonte é uma decisão de design crucial em termos de estética, mas é ainda mais importante para o seu público neurodivergente. Aqui está o que você deve manter em mente:

• Use fontes sem serifa: Fontes sem serifa (como a usada nesta matéria) costumam ser a escolha mais popular para o corpo do texto de um site, e são também preferidas por usuários disléxicos. Serifas dificultam a diferenciação das letras, principalmente letras como d e b, ou p e q. Algumas das fontes recomendadas incluem: Arial, Verdana, Open Sans, ou Lato. E uma curiosidade: Apesar da Comic Sans ser a maior inimiga de muitos designers, a fonte é considerada benéfica para usuários disléxicos!

• Mantenha uma distância segura: Se você realmente precisa usar uma fonte serifada, é melhor limitá-la apenas aos títulos e aumentar o kerning entre as letras. A British Dyslexia Association sugere 35% como a largura ideal das letras, com o espaçamento entre palavras sendo pelo menos 3,5 vezes maior do que a largura das letras. Basta lembrar os números 35 e 3.5 e você vai acertar.
• Deixe grande o suficiente: isso é importante não apenas para usuários neurodiversos, mas também para pessoas com deficiência visual. O tamanho sugerido é entre 12 e 14, sendo que o título deve ser pelo menos 20% maior que o corpo do texto.

Agora que já abordamos a tipografia, é hora de falar sobre linguagem:

Linguagem

A Linguagem objetiva é um dos maiores aliados da neurodiversidade. Ela é definida pelo Governo dos EUA como uma “escrita clara, concisa, bem organizada, e que segue outras práticas adequadas ao assunto ou campo e ao público-alvo.

A parte do público-alvo é crucial. O que é claro para uma audiência de advogados, pode ser difícil de compreender para o público em geral. Contudo, alguns praticantes da UX writing (escrita UX) se preocupam que a linguagem objetiva terá um impacto negativo em sua autoridade.

Escrever em termos simples não faz com que você soe menos profissional. Pelo contrário, torna a sua escrita mais acessível, pois considera uma parte do público que normalmente não é incluída. Uma linguagem inclusiva para pessoas com dislexia, TDAH e outros tipos de neurodiversidade também é benéfica para todos os leitores.

Aqui está o que você deve considerar – e por quê:

Mantenha a voz ativa: isso torna a vida mais fácil para praticamente todos. As frases na voz passiva são mais longas e mais difíceis de compreender. Os usuários com TDAH ficarão entediados, os disléxicos terão ainda mais problemas para ler e o mesmo acontecerá com os leitores no espectro.

• Evite metáforas: Pessoas que se enquadram no espectro do autismo geralmente têm problemas para entender metáforas, como expressões idiomáticas e outras figuras de linguagem. Em vez de armar um barraco, é mais inclusivo dizer que alguém criou uma confusão.

• Formate sua escrita: divida grandes pedaços de texto em parágrafos menores. Parágrafos longos são frustrantes e impossibilitam o foco, especialmente para aqueles com capacidade limitada de atenção. O uso de marcadores também ajuda, assim como os estamos usando aqui.

• Use botões descritivos: em vez de usar uma microcopy vaga, como Clique aqui, descreva a finalidade do botão. Alguns exemplos: Upload de imagens, Cadastre-se, Baixe o e-book. Essa mudança simples torna a navegação mais suave e reduz a ansiedade.

Por último, mas não menos importante, você pode testar seu texto com ferramentas automatizadas gratuitas. É uma maneira rápida de ver se a cópia do seu site está escrita em linguagem simples. Confira nossas sugestões no final deste artigo.

Paleta de cores e contraste

A iniciativa Living Autism do Reino Unido sugere o uso de cores suaves em um design inclusivo para a neurodiversidade. Como as pessoas no espectro são mais sensíveis à estimulação sensorial em geral, elas também tendem a ser afetadas por cores muito brilhantes. Estudos sugerem que crianças com TEA, principalmente meninos, preferem marrom e verde ao amarelo, pois este último pode ser considerado muito intenso.

Então, qual é o esquema de cores certo? Ainda faltam pesquisas voltadas especificamente para o web design. Quando se trata do ambiente físico, um grupo chamado GA Architects testou uma variedade de cores com um grupo de crianças no espectro. Aqui está a paleta considerada preferida:

Como era de se esperar, a preferência por tons de azul e verde é visível. As cores não estão totalmente saturadas, o que as torna menos estimulantes e, portanto, potencialmente distrativas. Essas descobertas podem servir de inspiração para sua próxima paleta de cores amigável à neurodiversidade.

É isso sobre as cores, mas e o contraste?

Fazer a escolha certa é crucial para pessoas com dislexia. Surpreendentemente, o contraste clássico em preto e branco às vezes pode ser muito extremo (mais uma vez, pense nos usuários do espectro e no público altamente sensível em geral). O Paul Crichton, do UserZoom, menciona que está trabalhando com um usuário disléxico que prefere uma combinação de vermelho e rosa claro. No final deste artigo, você encontrará uma lista de ferramentas gratuitas que ajudarão a configurar o contraste certo em seu site.

Estimulação sensorial

Esta parte pode ser um pouco complicada. Enquanto os usuários no espectro do autismo possuem alta consciência sensorial, as pessoas com TDAH buscarão mais estimulação. Manter o equilíbrio certo aqui pode ser desafiador, mas há um conjunto de regras gerais a seguir:

• Tenha cuidado com as animações: Excesso de estimulação pode induzir ansiedade em pessoas no espectro do autismo, o que pode até causar dor física, reclusão ou colapso. O que parece uma pequena inconveniência para você pode ser uma experiência desafiadora para alguém com TEA. O uso de elementos animados deve ser limitado a instâncias em que eles atendam a um propósito. Lembre-se também de não torná-los muito invasivos.

• Evite a reprodução automática: Movimentos inesperados são surpreendentes e assustadores, os sons então, nem se fala! Não é apenas super estimulante, mas também uma distração – enquanto os usuários no espectro ficarão sobrecarregados, o grupo com TDAH terá dificuldade em se concentrar. Para entender melhor isso, conversamos com um dos usuários do HCM Deck, uma plataforma de aprendizado e desenvolvimento. O usuário, que tem transtorno de déficit de atenção, nos disse que mesmo uma pequena distração em um site o faz perder completamente o controle.

• Adicione legendas: às vezes, usuários neurodivergentes podem ter dificuldade em entender os sons ou os recursos visuais. Para transmitir uma ideia de forma eficaz, faz sentido fornecer uma alternativa, como uma legenda para a imagem ou para o vídeo. É claro que também funciona ao contrário – vale a pena fornecer uma imagem para ilustrar o texto.

• Isso nos leva a outro aspecto – as sugestões visuais:

Sugestões visuais, hierarquia e consistência

Uma hierarquia coerente cria uma sensação de segurança e melhora a experiência geral do usuário, não apenas para o neurodivergente. Veja como alcançar isso:

Indicadores visuais: Conforme mencionado acima, certifique-se de transmitir as informações por diferentes meios. Por exemplo, é uma boa prática adicionar ícones ao lado de tags e cabeçalhos. Essas dicas ajudam os usuários que usam técnicas de leitura objetiva e também tornam as informações mais fáceis de lembrar. Apenas uma observação: lembre-se de escolher ícones simples para evitar superestimulação. 

• Consistência:  Todos nós gostamos de coerência no web design, mas a falta dela se torna ainda mais problemática para o público neurodivergente. A National Autistic Society do Reino Unido afirma que as pessoas autistas têm uma necessidade cada vez maior de consistência. Entre outras coisas, aconselham os designers a se certificarem de que os mecanismos de navegação e os links são sempre indicados da mesma forma em todo o site.

• Hierarquia: a hierarquia visual clara ajuda todos os grupos de usuários neurodivergentes, desde os do espectro até os disléxicos e as pessoas com dificuldade de concentração. Usar títulos, cores e estilos consistentes os ajuda a seguir e compreender o conteúdo sem muitos problemas.

Como ter certeza de que seu web design é compatível com a neurodiversidade

Você não precisa descobrir todos esses aspectos sozinho. Há uma série de diretrizes e ferramentas que podem te ajudar:

Padrão WCAG e acessibilidade cognitiva

WCAG (Web Content Accessibility Guidelines, ou Diretrizes de acessibilidade de conteúdo da web em português) são o decálogo do web design inclusivo. É um recurso amplamente aclamado por boas práticas, e também tem uma parte dedicada especificamente à neurodiversidade.

Seu guia de Acessibilidade Cognitiva é um tesouro de informações sobre web design para públicos neurodiversos. A página é constantemente atualizada graças ao Coga TF, abreviação de Cognitive and Learning Disabilities Accessibility Task Force (Força-tarefa de acessibilidade para deficiências cognitivas e de aprendizagem). Se você está procurando uma fonte confiável e atualizada, esta é a melhor escolha.

Verificadores de contraste

Existem múltiplos verificadores de contraste gratuitos disponíveis online, como o fornecido pelo WebAIM. Você pode usá-los para ver se seu site atende a diferentes tipos de padrões WCAG, como WCAG AA e AAA.

Se você gostaria de usar um plug-in dedicado para sua ferramenta de design (sendo ela Figma, Sketch ou Adobe XD), você com certeza vai gostar da Stark. Esta extensão vem com uma variedade enorme de ferramentas de conformidade de acessibilidade.

Ferramentas de linguagem objetiva

Hemingway te ajudará a garantir que o seu site seja fácil de entender. A versão do aplicativo da web é gratuita e destaca todas as partes que podem ser melhoradas para tornar o texto mais claro.

Conclusão

Conforme mencionado no início deste artigo, a neurodiversidade não é apenas uma exceção rara. Como designers, precisamos atender a todos os diferentes tipos de pessoas, em vez de marginalizar certos usuários. Esperamos que essas ferramentas e conhecimentos forneçam a você uma nova perspectiva sobre o web design. Por que não tornar seu próximo projeto um pouco mais inclusivo para todos?