Diretrizes de acessibilidade de e-mail ou torne seus e-mails amigáveis para todos
Publicados: 2019-10-16A acessibilidade de e-mail torna seus e-mails amigáveis para todos, incluindo pessoas com deficiência, pois permite que eles percebam seus e-mails e interajam com eles facilmente.
Existem alguns ajustes de design e cópia que você pode fazer para tornar seus e-mails mais acessíveis. Neste artigo, explicaremos como o emprego da acessibilidade afetará suas campanhas de e-mail, por que isso é importante e como colocá-lo em prática.
Conteúdo
- Por que a acessibilidade é importante
- Como criar um e-mail acessível
- Estrutura
- Código
- Fontes
- Cores
- Aumentar e diminuir o zoom
Por que a acessibilidade é importante
Então, por que você deveria se preocupar com a acessibilidade e quais benefícios ela pode trazer para você e sua empresa? Vamos dar uma olhada em alguns fatos:
- Em geral, 15% da população mundial, ou 1 bilhão de pessoas, tem algum tipo de deficiência. De acordo com a Organização Mundial da Saúde, aproximadamente 1,3 bilhão de pessoas em todo o mundo vivem com alguma forma de deficiência visual: 36 milhões de pessoas não conseguem enxergar e 217 milhões têm deficiência visual de moderada a severa. Como você pode ver, um número muito grande de pessoas pode ter problemas com diferentes coisas do dia a dia, incluindo interação com dispositivos e leitura de e-mails.
- Além disso, o mercado de deficientes representa US $ 1,2 trilhão em renda disponível anual.
- De acordo com uma pesquisa recente da Cone Communications, 78% dos americanos querem que as empresas tratem de questões sociais e 87% comprariam um produto de uma empresa que apoiasse a questão com a qual eles se preocupam pessoalmente.
Assim, ao utilizar a acessibilidade ao e-mail, você não apenas amplia seu público e abre novas oportunidades de lucro, mas também mostra seu respeito e cuidado por cada um, o que aumenta sua credibilidade aos olhos de usuários socialmente responsáveis e pessoas com deficiência.
Como criar um e-mail acessível
Nesta seção, daremos uma olhada em sete elementos que podem ajudá-lo a tornar seus e-mails mais acessíveis a todos:
- estrutura;
- código;
- Texto Alternativo;
- links e botões;
- fontes;
- cores;
- aumentar e diminuir o zoom.
Além desses elementos, recomendamos examinar as diretrizes de acessibilidade da lista de critérios do The World Wide Web Consortium, que o ajudará a garantir que seu conteúdo da web seja acessível a pessoas com deficiência.
Estrutura
Primeiro, certifique-se de colocar o conteúdo do seu e-mail em uma ordem lógica, à medida que os leitores de tela o compreendem, da esquerda para a direita e de cima para baixo. Leia seus e-mails em voz alta para ver se é fácil entender a própria cópia sem olhar para as imagens.
Por exemplo, o Collaborative Fund mantém uma boa estrutura lógica em seus emails, então é muito fácil segui-los com os olhos e com um leitor de tela.

Para pessoas com dislexia e deficiências cognitivas, pode ser difícil compreender textos grandes e complexos. É por isso que recomendamos que você vá direto ao ponto em sua cópia, encurtando as frases e evitando palavras longas ou jargões. Organize um pensamento em uma única frase e um tópico em um único parágrafo.
Para testar a legibilidade do seu texto, use serviços como Readable. Você pode colar seu texto lá, e a ferramenta irá destacar automaticamente frases longas ou palavras complexas e sugerir alternativas e sinônimos mais fáceis. Dê uma olhada em Legível em ação:
Código
Então, dê uma olhada em seu código. Deve haver elementos de título como h1 , h2 e tag de parágrafo p , e assim por diante. Isso permitirá que os leitores de tela naveguem pelo seu e-mail. Uma tag HTML de idioma lang=”” permitirá que qualquer tecnologia assistiva entenda qual perfil de idioma usar para o conteúdo. Vá para uma lista de todas as tags de idioma HTML para encontrar o código do idioma que você precisa.
Para limpar seu código e certificar-se de que não há tags não fechadas e outros problemas, você pode usar diferentes ferramentas de teste de e-mail.
Por exemplo, para evitar problemas com a exibição correta de seu conteúdo no formato visual ou de áudio, você pode experimentar Dirty Markup. Basta colar seu código e clicar em “Limpar”.
Texto Alternativo
Sempre inclua um texto alternativo detalhado, ou texto alternativo, para imagens - você deve transmitir a finalidade ou o significado da imagem para que os assinantes que usam tecnologia assistiva ou tenham as imagens desligadas entendam o contexto geral.
No exemplo de Messy Nessy Chic, você pode ver que cada imagem tem um texto alternativo, incluindo botões de mídia social no rodapé do e-mail.


Se o seu e-mail contiver imagens decorativas - aquelas usadas para design visual e não atribuindo um significado específico - você deve adicionar um atributo vazio alt=”” a ele. Isso fará com que os leitores de tela ignorem a imagem.
Links e botões
Quando se trata de cópia, evite textos como “Clique aqui” e coloque um hiperlink no contexto de uma frase. Isso tornará mais fácil para os usuários entenderem para onde o link os redirecionará. E lembre-se, seus links devem ser distinguíveis do texto ao redor.
Dê uma olhada no exemplo do InsightTimer; eles usam um texto de hiperlink limpo, que seria fácil de entender mesmo para aqueles que não podem ler o e-mail.

Quanto aos botões de call to action, mantenha-os grandes o suficiente para serem tocados por qualquer polegar em qualquer dispositivo. Cerque seus botões com espaço em branco suficiente para que não haja toques acidentais.
Fontes
O tamanho da fonte em um e-mail acessível não deve ser inferior a 14 px. Além disso, você deve usar fontes seguras para a web, que serão exibidas corretamente na maioria dos dispositivos e sistemas operacionais. Essas fontes são Arial, Comic Sans, Courier New, Georgia, Impact, Palatino, Tahoma, Trebuchet MS, Times New Roman e Verdana. Saiba mais sobre como escolher uma fonte perfeita para seus e-mails em nosso blog.
Além disso, recomendamos que você aplique o alinhamento à esquerda para o texto. Durante a leitura, o início de cada nova linha serve de âncora para os nossos olhos. Quando o alinhamento está centralizado, cada linha começa em um ponto diferente, fazendo o usuário pular de uma linha para outra. Já no alinhamento justificado, o espaçamento entre as palavras é sempre diferente. É por isso que manter essa âncora visual no mesmo lugar, ou usar um alinhamento do lado esquerdo, é sua melhor escolha para fins de legibilidade.
Também é recomendável dividir seu texto por títulos, citações e outros tipos de formatação.
Brain Pickings oferece e-mails muito longos e com muito conteúdo, que consistem principalmente em texto, mas é fácil “digeri-los” por causa de suas opções de formatação.

Cores
Em primeiro lugar, você deve verificar se as cores em seu e-mail são contrastantes o suficiente para ser acessível a pessoas com problemas de visão. Por exemplo, recomenda-se que a proporção para o texto normal seja de pelo menos 4,5: 1 e 3: 1 para o texto ampliado, que costuma ser usado em cabeçalhos.
Para verificar um bom contraste em termos de acessibilidade de e-mail, você pode usar ferramentas como Tanaguru ou WebAIM. Eles permitem que você veja a taxa de contraste do primeiro plano e do plano de fundo. O Are My Colors Accessible é outra ótima opção para verificar se é fácil compreender o seu e-mail.
Por exemplo, se verificarmos a combinação padrão de texto preto e fundo branco, podemos ver que a relação de contraste é muito alta: 21: 1. No entanto, quando mudamos a cor de fundo para laranja, a proporção cai para 10,63: 1.
Aumentar e diminuir o zoom
Para usuários com deficiência visual, as configurações de zoom costumam ser usadas para aumentar o tamanho do texto e outros elementos visuais em uma tela. Portanto, verifique se é possível ampliar seu e-mail para pelo menos 200% sem perder a qualidade do conteúdo.
Abaixo você pode ver um fragmento do e-mail do The Futur que aumentamos para 200% - todo o conteúdo do e-mail permaneceu visível e pode ser lido claramente.

Contudo
Ao criar um e-mail acessível, tente manter estes pontos em mente:
- Mantenha uma estrutura de leitura lógica de seu e-mail.
- Use um código limpo com as tags apropriadas exigidas pelos dispositivos auxiliares.
- Inclua texto alt informativo para cada imagem em seu e-mail, incluindo botões de mídia social e seu logotipo.
- Certifique-se de que todos os seus links e botões são utilizáveis ou fáceis de interagir.
- Mantenha suas fontes com um mínimo de 14 px, use a formatação apropriada e alinhe o texto à esquerda.
- Mantenha um bom contraste entre as cores de fundo e de primeiro plano.
- Certifique-se de que seu conteúdo pode ser ampliado para pelo menos 200% sem perda de conteúdo.
Implementar a acessibilidade de e-mail sem experiência anterior pode ser assustador. No entanto, quando você analisa seu impacto potencial, fica claro que vale a pena fazer esse trabalho. Experimente SendPulse para construir modelos de e-mail limpos e acessíveis e enviá-los a todos os seus assinantes.
