Diretrizes de acessibilidade de e-mail ou torne seus e-mails amigáveis ​​para todos

Publicados: 2019-10-16

A 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
  1. Por que a acessibilidade é importante
  2. Como criar um e-mail acessível
    1. Estrutura
    2. Código
    3. Fontes
    4. Cores
    5. 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:

  1. 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.
  2. Além disso, o mercado de deficientes representa US $ 1,2 trilhão em renda disponível anual.
  3. 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.

accessible email example
Um e-mail do Collaborative Fund com uma ordem lógica de conteúdo

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:

Verificar a legibilidade de um trecho de texto com Readable

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”.

Como limpar seu código de e-mail com Dirty Markup

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.

accessibility email example
Texto alternativo para imagens em um e-mail de Messy Nessy Chic

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.

accessible email example
Hiperlinks em um e-mail do InsightTimer

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.

accessible email example
Formatação de texto no e-mail do BrainPickings

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.

Verificando a taxa de contraste na ferramenta Are My Colors Accessible

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.

accessible email example
Ampliando um e-mail do The Futur

Contudo

Ao criar um e-mail acessível, tente manter estes pontos em mente:

  1. Mantenha uma estrutura de leitura lógica de seu e-mail.
  2. Use um código limpo com as tags apropriadas exigidas pelos dispositivos auxiliares.
  3. Inclua texto alt informativo para cada imagem em seu e-mail, incluindo botões de mídia social e seu logotipo.
  4. Certifique-se de que todos os seus links e botões são utilizáveis ​​ou fáceis de interagir.
  5. Mantenha suas fontes com um mínimo de 14 px, use a formatação apropriada e alinhe o texto à esquerda.
  6. Mantenha um bom contraste entre as cores de fundo e de primeiro plano.
  7. 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.