Acessibilidade em marketing por e-mail: 7 truques simples para tornar seu código mais acessível

Publicados: 2019-04-16

A acessibilidade está rapidamente se tornando um pilar do marketing por e-mail, assim como na experiência do usuário e no design. Cada vez mais marcas estão se certificando de que suas campanhas de e-mail possam ser aproveitadas por todos os assinantes, sejam eles portadores de deficiências físicas, visuais ou cognitivas - ou mesmo que simplesmente não possam visualizar imagens em seus e-mails devido ao ambiente corporativo.

Como profissionais de marketing por e-mail, todos nós nos esforçamos para entregar ótimos e-mails nas caixas de entrada de nossos assinantes. Executamos testes de spam e testes de e-mail para garantir que nosso design funcione perfeitamente em todos os dispositivos e clientes de e-mail. Mas, às vezes, esquecemos de definir tags ALT para nossas imagens, usar uma combinação de cores que é difícil de ler ou deixar de otimizar nossos e-mails para leitores de tela - e isso afasta alguns de nossos assinantes.

Se você está apenas começando a tornar seu código de e-mail mais acessível, as coisas podem ser opressivas. Mas existem alguns truques simples que você pode implementar facilmente - e têm um grande impacto na acessibilidade do e-mail.

Veja como verificar se seu e-mail está acessível a todos os seus assinantes, seção por seção.

Seu e-mail está acessível?

As verificações de acessibilidade no Litmus Checklist tornam mais fácil testar seu e-mail em relação às práticas recomendadas de acessibilidade, identificar áreas para melhoria e tornar seus e-mails mais acessíveis a todos os seus assinantes.

Saiba mais →

Sua lista de verificação de acessibilidade

1. Adicione um código de idioma ao seu <HTML>

Nem todos os seus assinantes lerão seu e-mail em seus laptops ou telefones - alguns usarão leitores de tela para acessar seu e-mail. Como o conteúdo do seu e-mail será lido em voz alta, ele deve estar no idioma certo para que as pronúncias estejam corretas - você não gostaria que seu e-mail escrito em francês fosse pronunciado em inglês americano, não é?

Para evitar que isso aconteça, você terá que informar aos leitores de tela em que idioma seu e-mail está escrito. Se não houver um código de idioma especificado em seus e-mails, os leitores de tela não conseguirão pronunciar a cópia corretamente - e seu e-mail eloquente pode sair soando completamente errado.

É por isso que é importante verificar seu <HTML> para obter um código de idioma - um trecho de código simples que especifica o idioma do seu e-mail. Se ainda não estiver em seu código, adicione lang = “xx” - substitua xx pelo código de idioma apropriado para seu e-mail. Uma lista de todos os códigos de idioma e localidades possíveis - o que permite considerar diferentes sotaques, como uma diferenciação entre inglês britânico e americano - pode ser encontrada aqui .

 Existem alguns casos especiais a serem considerados:

  • Se estiver usando qualquer XML em sua tag <HTML>, você também precisará adicionar xml: lang = “xx” .
  • Se você estiver incluindo a correção de 120 dpi do Outlook em seu código de e-mail, precisará desta solução para especificar um idioma. Esta é a aparência do nosso código com esta correção:
     <html xmlns_v="urn:schemas-microsoft-com:vml" xmlns_o="urn:schemas-microsoft-com:office:office" lang="en" xml_lang="en">

Dica profissional: é possível preencher o código do idioma dinamicamente se você tiver a localização configurada em seu ESP.

2. Sempre inclua tags ALT para suas imagens

É importante ter em mente que as imagens em seus e-mails nem sempre estão visíveis para seus assinantes. Talvez eles tenham suas imagens desativadas, ou tenham uma conexão ruim, ou estejam usando um leitor de tela - e se você incluir muitas informações importantes em suas imagens, essas mensagens serão perdidas. É aí que entra o texto ALT. Você pode definir o texto que é visível para seus assinantes (ou lido por seu leitor de tela) para que eles ainda recebam as mesmas mensagens que as pessoas que podem ver suas imagens.

Sempre que houver uma tag <IMG> em seu código de e-mail, certifique-se de definir a tag ALT. Se você já preencheu as tags ALT, verifique se o texto corresponde ao texto da imagem. Se você tiver tags ALT vazias, certifique-se de que não haja nenhum texto na imagem que precise ser preenchido para que um leitor de tela veja. Se não houver tags ALT em suas imagens e nenhum texto na imagem em si - ou nenhum texto necessário para o significado do e-mail - certifique-se de adicionar uma tag ALT vazia: alt = “” . Se você não incluir isso, os leitores de tela lerão o URL da imagem - e ninguém quer que um URL longo seja lido para eles!

Depois de definir todas as tags ALT - vazias ou não - para as imagens em seu e-mail, adicione o estilo da fonte na tag <IMG> para o texto ALT estilizado . Este estilo permite que você adore seu texto ALT e permite alterar a aparência da fonte, cor, tamanho, estilo e peso.

3. Incluir atributo role = ”apresentação” em todos os elementos <TABLE>

A maioria dos profissionais de marketing por email confia em tabelas para estruturar seu layout de email, mas isso pode causar sérios problemas para os leitores de tela. Se um leitor de tela identificar uma tabela no código do seu e-mail, ele será lido em voz alta como uma. Pode dizer literalmente quantas linhas e colunas existem, informando a posição e o conteúdo de cada coluna, tornando impossível entender sua mensagem.

É por isso que é importante informar ao leitor de tela que você está usando a tabela apenas para fins de layout. Você pode fazer isso adicionando role = “apresentação” a cada tabela em seu e-mail. Essa função instrui os leitores de tela a remover qualquer significado semântico das tabelas - então, em vez de ler os números das linhas e colunas, ele se concentra no conteúdo.

Vejamos este cabeçalho de e-mail realmente simples de um de nossos próprios e-mails:

Antes de otimizarmos para acessibilidade, nosso código era assim:

 <table width="100%" cellpadding="0" cellspacing="0" border="0"><tr> <td align="center" bgcolor="#2f343c" valign="top"> <table class="w100p" width="600" cellpadding="0" cellspacing="0" border="0"><tr> <td class="w100p" width="600" align="center"> <table cellpadding="0" cellspacing="0" border="0"> <tr><td>&nbsp; </td></tr></table> <a href="https://litmus.com?utm_campaign=soeanalytics2019rt&utm_source=email&utm_medium=marketing&utm_content=%%dynamic_content_1456%%"> <img src="https://pages.litmus.com/l/31032/2016-08-16/954sb7/31032/95886/litmus_logo_white.png" width="134" height="50" /> </a> <table cellpadding="0" cellspacing="0" border="0"> <tr><td>&nbsp; </td></tr></table> </td></tr></table> </td></tr></table>

Você notou que estão faltando atributos ALT e as tabelas não estão definidas para role = ”apresentação” ?

Esses pequenos descuidos têm um grande impacto na acessibilidade. Veja como um leitor de tela interpreta o código acima:

Leitor de tela: cabeçalho de e-mail não acessível

E aqui está o mesmo código que foi refatorado adicionando o atributo ALT = ”” e a função = ”apresentação” às tags <TABLE> para facilitar o leitor de tela:

 <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr> <td align="center" bgcolor="#2f343c" valign="top"> <table role="presentation" class="w100p" width="600" cellpadding="0" cellspacing="0" border="0"><tr> <td class="w100p" width="600" align="center"> <table role="presentation" cellpadding="0" cellspacing="0" border="0"> <tr><td>&nbsp; </td></tr></table> <a href="https://litmus.com?utm_campaign=soeanalytics2019rt&utm_source=email&utm_medium=marketing&utm_content=%%dynamic_content_1456%%"> <img src="https://pages.litmus.com/l/31032/2016-08-16/954sb7/31032/95886/litmus_logo_white.png" width="134" height="50" alt="Litmus" /> </a> <table role="presentation" cellpadding="0" cellspacing="0" border="0"> <tr><td>&nbsp; </td></tr></table> </td></tr></table> </td></tr></table>

Leitor de tela: cabeçalho de e-mail acessível

Como você pode ouvir, há uma grande diferença!

4. Use elementos semânticos para estruturar seu conteúdo

Os elementos semânticos facilitam o destaque da hierarquia de conteúdo, mostrando aos assinantes (e leitores de tela) o que é um título e o que é uma cópia do parágrafo. A inclusão de elementos semânticos dá aos assinantes que usam leitores de tela a opção de “escanear” um e-mail com mais facilidade.

Ao verificar sua cópia, certifique-se de que qualquer cópia digna de título esteja dentro de uma tag <H> : <H1> , <H2> , <H3> e assim por diante. Da mesma forma, certifique-se de que qualquer cópia do corpo esteja armazenada em uma tag <P> . Ao ler seu e-mail, os leitores de tela colocam ênfase em cabeçalhos específicos e a configuração dessas tags <H> e <P> tornará seu e-mail mais fácil de navegar.

5. Alinhe sua cópia à esquerda, se possível

Quando se trata do texto do corpo, pode ser tentador alinhá-lo ao centro. No entanto, quando se trata de acessibilidade, este é um grande não !

Quando você centraliza seu texto, a borda inicial muda para cada linha, o que força seus assinantes a trabalharem mais para encontrar o início de cada linha - e isso é um desafio para pessoas com dislexia e outras dificuldades de leitura. Se você tiver qualquer cópia com mais de duas linhas, alinhe-a à esquerda. Isso é especialmente importante para dispositivos móveis, pois a largura estreita geralmente produz mais linhas de texto do que você pode imaginar. Pode ser necessário alinhar à esquerda seu texto responsivamente no celular.

6. Verifique o contraste da sua cópia

Verifique a taxa de contraste das cores do texto em relação às cores do fundo do seu e-mail. Você pode ter assinantes com déficit de cores e, se as cores não fornecerem contraste suficiente para eles, talvez eles não consigam ler seu e-mail. Existem duas maneiras de verificar a taxa de contraste:

  • Se você pode hospedar seu HTML e produzir um URL para usar, esta é minha maneira favorita de verificar minhas cores: http://www.checkmycolours.com/
  • Se você precisar inserir manualmente seus códigos de cores, verifique https://contrast-ratio.com/

7. Adicione efeitos de foco para CTAs, links e imagens

No Litmus, usamos efeitos de foco em nossos CTAs, links e imagens para indicar a capacidade de clicar. Os efeitos de foco são um elemento interativo simples que pode tornar seus e-mails mais envolventes e melhorar a experiência de seus assinantes. Embora os efeitos de foco sejam compatíveis apenas com AOL, Apple Mail, Gmail e Yahoo! Mail, eles são um efeito popular e vale a pena implementar em seu código de e-mail. Você pode esmaecer uma imagem, alterar a cor do botão de CTA, adicionar uma guia pop-up e muito mais.
Os efeitos de foco podem ajudar a tornar seu e-mail mais acessível, como neste exemplo, onde o botão muda de cor ao passar o mouse.

Veja o e-mail completo em Litmus Builder →

Quer mais dicas por e-mail?

Guia definitivo para acessibilidade de e-mail

Este guia contém os insights e conselhos passo a passo de que você precisa para escrever, projetar e codificar e-mails que podem ser acessados ​​por qualquer pessoa - independentemente de sua capacidade.

Baixe o e-book →


Receba o melhor email marketing e dicas de design, estatísticas e recursos diretamente em sua caixa de entrada e fique na vanguarda da inovação em email ao se inscrever no Litmus News.

Fique por dentro →