Diretrizes de acessibilidade de e-mail: padrões e práticas recomendadas

Dê uma olhada ao redor, ouça o que está acontecendo. Você vê tudo claro, no modo colorido? E você ouve barulhos e vozes bem? Parabéns, você certamente é uma pessoa de sorte. Além disso, você é realmente muito feliz. Você tem visão e audição!

Você pode pensar que essas habilidades são comuns e dadas por padrão a todos? E se eu lhe disser que 4,5% dos destinatários da sua lista de contatos sofrem de daltonismo, por isso é difícil para eles ler ou entender o conteúdo do seu e-mail?

Embora o daltonismo não seja o único distúrbio generalizado. Apenas um fato simples: 285 milhões de pessoas em todo o mundo sofrem de deficiências visuais graves que tornam a visão um problema mesmo com lentes de contato ou óculos.

E 5% da população da Terra tem deficiência auditiva. Em outros termos, mais de 360 ​​milhões.

Isso é algo para se pensar. Não podemos ignorar todas essas pessoas. Devemos fazer o nosso melhor para sermos amigáveis ​​com eles e tornar sua vida melhor. É disso que se trata a acessibilidade.

Agora, prepare uma xícara de chá ou café e vamos mergulhar nos detalhes.

O que significa acessibilidade de e-mail?

Há pessoas que sofrem de graves distúrbios visuais ou até cegueira completa. Eles estão usando software de leitura de tela para vocalizar e-mails da caixa de entrada – VoiceOver, Microsoft Narrator e outras ferramentas semelhantes. Portanto, nosso dever é ajustar nosso conteúdo a esses assistentes.

Quando se trata de daltonismo, da protanopia (quando as pessoas não conseguem distinguir certas cores) à monocromia – não há ferramentas que ajudem as pessoas com essas condições. Portanto, nós mesmos temos que otimizar as imagens de e-mail.

Outros sofrem de deficiência auditiva, dislexia, etc. Consequentemente, existem conjuntos de regras de acessibilidade para cada tipo de distúrbio. Assim chegamos à resposta a uma pergunta no título.

Em poucas palavras, significa seguir os padrões que tornam os e-mails legíveis para pessoas com todos os tipos de requisitos especiais. Felizmente, os modernos construtores de templates de email HTML e outros softwares de marketing nos fornecem ferramentas avançadas para implementar esses padrões com bastante facilidade e sem nenhuma habilidade especial.

Vou compartilhar esses padrões abaixo, bem como algumas práticas que serão úteis para criar e-mails acessíveis.

Padrões de acessibilidade

Então, queridos amigos, é hora de explorar um por um esses conjuntos de recomendações que precisamos seguir para enviar e-mails “universais” que serão fáceis de ler para destinatários com todos os tipos de defeitos visuais, auditivos e de percepção.

1. Daltonismo

Há uma lista de tipos de daltonismo. Aqui estão eles:

Protanopia significa percepção extinta da cor vermelha. Leitores com protanopia, também conhecidos como cegos para vermelho, tendem a confundir a cor preta com todos os tons de vermelho. Eles também não conseguem distinguir o marrom escuro do verde escuro e não veem diferença entre a cor azul e o diapasão médio do vermelho. Dê uma olhada neste e-mail da Uber:

E é assim que os destinatários com protanopia veem:

Deuteranopia é uma percepção reduzida do verde. Essas pessoas também tendem a confundir diapasão vermelho/verde médio, verde brilhante/amarelo e azul claro/lilás. Novamente, dê uma olhada no mesmo e-mail: original à esquerda e versão deuteranopia à direita.

Tritanopia significa cegueira para a cor azul e seus tons. É por isso que aqueles que sofrem dessa deficiência geralmente confundem azul claro/cinza e roxo escuro/preto. A mesma amostra de e-mail, mas você pode ver a percepção da tritanopia à direita:

Monocromacia é para daltonismo total. Essas pessoas podem ver a realidade pintada apenas em preto, branco e vários tons de cinza. Sem outras cores. Imagine o mundo na tela de um aparelho de TV muito antigo. É assim que a monocromacia se parece. Sério, me dá arrepios.

O que deveríamos fazer?

• Escolha o tamanho da fonte para cópia de e-mail não inferior a 14 px. No entanto, recomendo 16px para fornecer aos destinatários um design de e-mail acessível;
• Evite soluções de contraste baseadas em cores que os clientes daltônicos podem não distinguir. Por exemplo, não escreva sua cópia com texto verde ou azul sobre um fundo vermelho ou lilás. Observe a mensagem abaixo. Tudo bem para pessoas com diapasão completo de percepção de cores… mas é tão bom no caso de protanopia ou visão monocromática? Eu não acho…

(mensagem original)

(é assim que os clientes com protanopia vão ver)

(a forma como os monocromáticos veem esta mensagem)

Como eles devem entender se seu time favorito ganhou ou perdeu a partida?

• Esqueça a ideia de adicionar botões verdes sobre fotos vermelhas, ou vice-versa. O mesmo vale para todas as combinações de cores “arriscadas” mencionadas acima. A ideia é muito ruim - pessoas com problemas de percepção de cores podem não notar o botão;
• Sempre especifique a cor do produto entre colchetes — os clientes podem não distinguir, por exemplo, a cor vermelha, mas sabem que camisas ou vestidos vermelhos combinam perfeitamente com sua imagem;
• Deixe os links em seus e-mails em negrito.

Sim, a cor azul normal para o texto dos links não é suficiente. E não apenas por causa dos destinatários daltônicos. Você já leu e-mails na rua quando o sol brilha impiedosamente na tela do smartphone? Então você sabe o que quero dizer – é difícil distinguir cores. Portanto, faça links em negrito e não os sublinhe. Por quê? Porque sublinhar pode distrair as pessoas com dislexia. Falaremos sobre a dislexia em detalhes um pouco mais tarde.

Neste e-mail, os itens do menu também estão em negrito. Essa ideia simples otimiza a navegação dos clientes na newsletter — eles encontrarão facilmente a categoria de apartamentos desejada.

Observe o link “Ver detalhes” com uma seta. Ele diz que você pode ver mais detalhes clicando nele;

Se você adicionar elementos de interatividade ou realizar testes em sua campanha, escolha as cores verde/vermelho profundo/azul claro para destacar as respostas corretas. E vermelho/preto/cinza respectivamente para errado respectivamente. Certifique-se de duplicar as respostas sim/não com texto.

É realmente essencial verificar se o e-mail atende aos requisitos das pessoas que sofrem de deficiência de cor. Para sua conveniência, gostaria de adicionar esta tabela ao nosso post. Salve-o para encontrar as cores correspondentes e evitar confusão:

Há também uma ferramenta gratuita de simulador de daltonismo que mostra suas fotos da maneira como os destinatários daltônicos as perceberão.

Como podemos ver, o teste de cores não é muito complexo - apenas não o ignore. Mostre seu cuidado para todos os assinantes. Seja bom.

2. Cegueira e deficiências visuais graves

O próximo capítulo é dedicado às normas de acessibilidade para cegos e deficientes visuais. Essas regras também são sobre distúrbios visuais, mas os princípios e soluções aqui são totalmente diferentes. Nenhum esquema de cores ou combinação de contraste pode ajudar neste caso. Esse aspecto da ciência da acessibilidade é baseado no uso de software de leitura de tela.

Consequentemente, nossa missão é ajustar nossos e-mails a essas ferramentas. Em outros termos, temos que tornar os e-mails legíveis para essas ferramentas.

O que deve receber atenção especial aqui?

Assunto do email

Normalmente, os leitores de tela começam a ler um e-mail pelo assunto.

Portanto, a regra comumente aceita é simples, mas eficaz: faça sua linha de assunto breve e descritiva. Um bom assunto deve explicar a essência da mensagem.

Configurações de linguagem

É muito importante definir as configurações de idioma na cópia do e-mail. Esta tarefa requer algum esforço e trabalho com cópia de e-mail, mas vale a pena. A questão é que o texto de e-mail vocalizado por leitores de tela pode parecer aterrorizante se você ignorar essas configurações. Algo como conversas de orcs do Senhor dos Anéis

Para evitar isso, especifique o respectivo idioma no código de e-mail (se disponível).

Ordem lógica

Os leitores de tela têm uma ordem estrita sobre como vocalizar e-mails. Eles lêem contêineres e blocos da esquerda para a direita e depois prosseguem para a próxima linha.

Para fornecer acessibilidade, especifique tags de cabeçalho como <h1> , <h2> , <p> , etc. no código HTML. Essas tags adicionarão prioridade sobre o texto normal, de modo que esses elementos sejam vocalizados primeiro.

Além disso, o tamanho da fonte não importa quando as tags são especificadas. No exemplo acima, o tamanho da fonte do título 2 é 24px e a fonte normal da cópia é maior — 27px. Mas os leitores de tela vocalizarão primeiro o título 2.

texto alternativo

As tecnologias de IA estão se desenvolvendo de forma constante hoje. Mas as ferramentas de leitura de tela ainda não são inteligentes o suficiente para “olhar” as fotos no e-mail e descrevê-las. Talvez em um futuro próximo… Hoje em dia, esses utilitários só podem ler texto alternativo também conhecido como texto Alt que adicionamos às imagens.

Como ajustar o texto alternativo aos padrões de acessibilidade? Você acertou, é bem óbvio: faça este texto conciso, descritivo e informativo. Uma observação útil: evite a palavra “imagem” neste texto. A tag da imagem já especifica isso, então vai ser meio estranho ouvir a duplicata “imagem imagem…”

Links, itens de CTA, ícones sociais

Os links devem ser o mais concisos e informativos possível. Adicione texto claro a eles e lembre-se de que os leitores de tela transformarão esse texto em voz! Deixe os destinatários saberem o que você oferece a eles e para onde eles irão com um clique.

Basta olhar nestes links:

O primeiro link... uh... sério, eu tenho medo de imaginar o quão assustador isso vai soar. Enquanto o segundo especifica claramente o site, a data de publicação e o título do post.

O mesmo vale para botões de CTA e ícones de mídia social. Na verdade, esses itens também são hiperlinks, apenas envoltos em uma forma visual esteticamente atraente. Todo profissional de marketing por e-mail habilidoso presta a maior atenção a eles, trabalha no design e nos efeitos, escolhe soluções de cores perfeitas para gerar cliques…

Mas quando se trata de leitores de tela e acessibilidade para pessoas cegas, a única coisa importante aqui é o texto. Torne-o atraente o suficiente para completar sua missão – obrigue os assinantes a clicar no botão.

É assim que vemos o botão CTA no e-mail:

Mas as ferramentas de leitura de tela não dão a mínima para todos os nossos truques de designer e maravilhosos efeitos de foco. Tudo o que o software vê é o texto simples. Nada mais. Portanto, certifique-se de que seu texto funcione por conta própria.

Em relação aos ícones de mídia social, alguns assinantes que “ouvem” e-mails da caixa de entrada podem não entender as abreviações que aplicamos a esses ícones. Portanto, escreva um texto alternativo descritivo para esses itens.

Isso é tudo sobre cegueira. Apenas mais uma observação importante: os leitores de tela são amplamente utilizados hoje não apenas por pessoas com distúrbios visuais graves. Milhões de destinatários estão ouvindo seus e-mails de caixa de entrada quando estão ocupados, na rua, no carro, etc. Portanto, esse aspecto da acessibilidade é ainda mais vital do que se poderia imaginar.

3. Dislexia

Pessoas que sofrem de dislexia tendem a confundir a ordem das letras no texto, apesar do nível normal de QI.

Aqui estão as práticas de acessibilidade para destinatários disléxicos com base no post publicado por a Associação Britânica de Dislexia.

• Evite sublinhar links. Como já mencionei um pouco acima, coloque seus links em negrito ao invés de sublinhá-los;
• Não comece uma nova frase no final de uma linha. A nova frase deve ser uma nova linha respectivamente;
• Sem CAPS LOCK se você precisar destacar/enfatizar uma certa ideia - use a fonte maior;
• Esqueça o alinhamento central — apenas pelo lado esquerdo da tela;
• O fundo branco pode distrair os disléxicos, as cores creme são mais suaves e não dificultam;
• Termine todas as frases com um ponto (.), você também deve usar ponto e vírgula quando houver marcadores na cópia do email.

4. Surdez e audição parcial

Para pessoas com deficiência auditiva, há um único padrão. Todos os vídeos incorporados em seus e-mails devem estar equipados com legendas ou descrições de texto.

Só não confie nas legendas automatizadas fornecidas pelo Youtube e outras hospedagens de vídeo. Eles são muitas vezes, eh eh… para dizer o mínimo, longe do ideal. E em algumas ocasiões estão mesmo à beira da esquizofasia.

Principais dicas de acessibilidade de e-mail

Termino com nossa análise das melhores práticas de acessibilidade de hoje. Como podemos ver, esse aspecto do trabalho dos profissionais de marketing por e-mail é realmente essencial. Consequentemente, nunca pule o teste de acessibilidade antes de clicar no botão “Enviar”! Verifique suas campanhas com o simulador de daltonismo mencionado acima, envie o e-mail de teste para todos os dispositivos disponíveis e ouça-os com diferentes leitores de tela.

Agora vamos recapitular brevemente os pontos-chave deste post. Como proporcionar acessibilidade?

• Escolha cores diferentes para criar um esquema de contraste para evitar confusão;
• Escreva linhas de assunto claras e descritivas;
• Nunca se esqueça do texto alternativo, adicione-o a todas as imagens;
• Se a animação GIF tiver um papel educativo, forneça aos leitores uma descrição detalhada;
• Não use idiomas diferentes em um e-mail porque os leitores de tela podem trabalhar apenas com um idioma por vez;
• Verifique o significado de seus links;
• Alinhar o texto pelo lado esquerdo;
• Crie suas newsletters e e-mails acionados com amor verdadeiro. Preocupe-se com todos os seus assinantes.

Desejo-lhe sinceramente tudo de bom. Espalhe carinho e gentileza por todos os lados!