O guia definitivo para e-mails acessíveis

Como profissionais de marketing por e-mail, nós nos esforçamos para oferecer a experiência de e-mail perfeita aos nossos assinantes. Garantimos que nossos e-mails sejam enviados no momento certo com base em nossas análises e que sejam entregues na caixa de entrada monitorando nossa capacidade de entrega e executando testes de spam. Personalizamos nosso conteúdo para ser mais relevante e mexer com nosso design para garantir que nossos e-mails sejam reproduzidos perfeitamente em incontáveis ​​dispositivos e em todos os clientes de e-mail.

Todas essas são etapas recomendadas para garantir que seus e-mails levem a uma conversão. No entanto, seus e-mails podem passar despercebidos por uma parcela significativa de seus assinantes - pessoas com deficiências visuais, físicas ou cognitivas e neurológicas.

São necessários apenas alguns pequenos passos para tornar seus e-mails mais acessíveis para todos os seus assinantes. Nesta postagem, discutiremos quais são essas etapas e como elas podem tornar o e-mail melhor para todos.

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 →

O que é acessibilidade?

A acessibilidade é um dos pilares fundamentais da experiência do usuário e do design. Para e-mail, significa certificar-se de que todos possam receber e entender sua mensagem, independentemente de quaisquer deficiências ou dispositivos de assistência que possam estar usando.

Você pode pensar na acessibilidade em e-mail como uma extensão de lidar com clientes de e-mail com suporte insuficiente. Incluir soluções alternativas e alternativas garante que cada assinante receba uma experiência positiva.

Como desenvolvedores de e-mail, passamos horas recebendo um e-mail que pareça perfeito em um cliente com menos de 1% de participação de mercado, mas poucos de nós gastarão alguns minutos tornando o e-mail acessível.
- Mark Robbins, Rebelmail

Acessibilidade no design de e-mail

Vamos começar examinando os aspectos visuais do seu e-mail que podem afetar a acessibilidade e onde podem ser feitas melhorias.

Use cores de forma inteligente

Os assinantes com daltonismo podem não ser capazes de diferenciar algumas cores em seu e-mail, portanto, certifique-se de que a cor não é a única forma de transmitir as informações.

O contraste de cores também pode representar problemas para assinantes com dificuldades visuais. Use um alto contraste de cores entre os diferentes elementos do seu e-mail, especialmente entre as cores de cópia e de fundo. Uma maneira de fazer isso é usar o Verificador de contraste de cores do WebAim para verificar a taxa de contraste das cores em seu e-mail.

Seus e-mails estão acessíveis? Veja como são os seus e-mails para usuários com deficiência visual usando o filtro de daltonismo nas Visualizações de e-mail Litmus. Experimente Litmus grátis →

Não crie conteúdo prejudicial

O conteúdo que pisca em certas taxas ou padrões, como GIFs animados, pode causar ataques fotossensíveis em alguns indivíduos. Evite exibir conteúdo ou incluir links para vídeos que possam ter conteúdo semelhante.

Equilibre texto e imagens

Enquanto os usuários com visão podem escanear visualmente ou pular conteúdo não relevante, os usuários cegos devem ouvir todo o conteúdo do e-mail, um e-mail de cada vez. Personalize o conteúdo escrito em seu e-mail para entregar a mensagem principal. Além disso, considere o quão compatível seu design é com leitores de tela populares, como JAWS ou Window-Eyes.

Melhore a legibilidade do seu e-mail

Use tamanhos de fonte maiores

Qualquer coisa menor que 14 pixels em uma tela de desktop ou laptop requer algum esforço para ler. Os usuários podem aumentar o nível de zoom em seus dispositivos para ajudá-los a ler suas telas, mas isso pode ter um impacto negativo em seu e-mail, que pode parecer quebrado ou cortado.

O texto pode parecer menor em dispositivos móveis, forçando os usuários a trabalhar mais para ler seu e-mail. Use consultas de mídia para aumentar o tamanho mínimo da fonte de 14 para 16 pixels em dispositivos menores para ajudar os usuários a ler seu e-mail:

 @media screen and (max-width: 600px) { p.mobile {font-size: 16px;}}

Dê à sua cópia espaço para respirar

Para alguns, pode ser difícil ler parágrafos e blocos de texto em que as linhas de cópia estejam bem próximas umas das outras. Defina uma altura de linha apropriada no texto para facilitar a leitura para todos. Recomendamos escolher uma altura de linha 4 pixels a mais do que o tamanho da fonte.

 <p style=”font-size:14px; line-height:18px;>Paragraph with font-size and line-height set</p>

Dica: Ao aumentar o tamanho da fonte para dispositivos móveis, não se esqueça de aumentar também a altura da linha.

Os parágrafos da cópia também precisam de espaço para respirar para facilitar a leitura. Ao digitalizar um e-mail, deve ser fácil identificar os parágrafos e manter o seu lugar. Crie espaço em branco suficiente acima e abaixo dos parágrafos.

Mais uma etapa para tornar o texto mais fácil de ler é afastá-lo das bordas de seus e-mails. Adicionar preenchimento a uma célula de tabela ou tag de parágrafo ajudará você a conseguir isso.

Evite cópia justificada em seu e-mail

Cópia “justificada” significa que o espaçamento entre letras e palavras é ajustado para que o texto fique alinhado com as margens esquerda e direita. Embora seja comum na impressão, o espaçamento inconsistente entre palavras pode dificultar a leitura de uma cópia justificada. O texto alinhado à esquerda provou ser mais fácil de ler para todos.

Escolha a fonte certa

O uso de fontes da web aumentou o número de possíveis tipos de fontes que podem ser usados ​​em e-mail, mas antes de decidir usar o Lobster como sua fonte corporal, pense em como ele é acessível. Ao selecionar o tipo de letra do seu e-mail, escolha um que tenha espaçamento uniforme e não muito condensado. Essa é uma boa ideia não apenas para acessibilidade, mas também para usuários móveis.

Use elementos semânticos

A inclusão de elementos semânticos dá aos assinantes que usam leitores de tela a opção de “escanear” um e-mail pelo cabeçalho. Você pode fazer isso usando as tags <p> e <h>. Eles são suportados em todos os clientes, portanto, é um bom lugar para começar a tornar seu e-mail mais acessível.

Historicamente, estilizar as tags <p> e <h> não tem sido fácil, e é por isso que ainda é bastante incomum ver essas tags sendo usadas em e-mail. As margens em torno do texto contido em qualquer uma dessas tags era difícil de gerenciar, mas usando um código como este, você poderá controlar esse espaço em branco:

 <h1 style=”mso-line-height-rule:exactly; Margin:0; font-size:24px; line-height:28px;”>This is a title in an email</h1>

 <p style=”Margin:0; font-size:14px; line-height:18px;”>And this is the paragraph</p>

Dica: Usando mso-line-height-rule: exatamente; em suas tags <h> manterá a regra de altura de linha definida nos clientes de e-mail do Microsoft Outlook.

Assista a este clipe do Litmus Live 2017 enquanto o desenvolvedor de e-mail Paul Airy explica por que e como ele usa elementos HTML semânticos em seus e-mails para torná-los mais acessíveis:

Tweet este vídeo →

Aprenda com os especialistas do Litmus Live Torne-se um comerciante de email melhor com conselhos do mundo real, melhores práticas e lições práticas quando você se juntar a nós para a conferência Litmus Live. Saiba mais →

Gravar cópia legível

Criar um e-mail mais acessível e legível não se trata apenas de como o e-mail é codificado, mas também de como a cópia é escrita. Tornar a cópia do seu e-mail mais humana ajudará na legibilidade e ajudará a construir uma comunicação 1: 1 entre você e seus assinantes.

O teste mais popular, conhecido como teste Flesch-Kincaid Reading Ease, pode ser encontrado no Microsoft Word e calcula a facilidade de leitura do seu conteúdo em uma escala de 0-100. Que significa:

• Uma pontuação de 90-100 será facilmente compreendida por um aluno de 11 anos
• Uma pontuação de 60-70 será facilmente compreendida por alunos de 13 a 15 anos
• Uma pontuação de 30-50 será compreendida por estudantes universitários
• Uma pontuação de 0 a 30 será melhor compreendida por graduados universitários

Tornar algo mais “legível” não significa que você se esquive de tópicos complicados ou de peso. Em vez de emburrecer sua escrita, refere-se à acessibilidade do texto. Seu ponto ideal é algo entre 60 e 70 para capturar o público em geral. Obviamente, se o seu público for altamente educado, não tenha medo de usar uma linguagem mais complexa.

Você também pode aumentar a legibilidade editando sua cópia para ser direta e objetiva.

Crie conteúdo acessível

Tornar os links clicáveis ​​/ tocáveis

Garantir que o tamanho dos seus botões à prova de balas sejam grandes o suficiente para serem usados ​​pelos polegares e dedos em dispositivos móveis também ajudará na acessibilidade do seu e-mail. Um botão maior será benéfico para aqueles que não conseguem controlar um mouse com precisão.

Gosto de botões grandes e não posso mentir.
- Justine Jordan, Litmus

Embora as Diretrizes de interface humana do iPhone da Apple recomendem uma largura e altura mínimas de 44 pixels para os botões, esse número varia dependendo do fornecedor do dispositivo móvel. Uma regra alternativa seria usar uma largura e altura mínimas de 72 pixels, pois essa é a largura média de pixels de uma miniatura.

Banir a cópia do link “Clique aqui”

Evite usar “clique aqui” como cópia de seus links. Os usuários de leitores de tela costumam percorrer o conteúdo, pulando-o como forma de escanear um e-mail. Fornecer contexto aos seus links ajudará esses usuários a decidir se desejam clicar ou não.

Por exemplo, se você tiver um link que leva a uma lista de produtos de sapatos, o uso de uma cópia do link como “Ver mais sapatos” diminui a ambigüidade do link para usuários de leitores de tela. Reduzir a ambigüidade dos links é benéfico para todos os assinantes, pois não exige que eles leiam o contexto em torno do link - ideal para aqueles que verificam e-mails rotineiramente sem ler tudo.

Não é apenas para acessibilidade, banir links “clique aqui” irá mover seu conteúdo de e-mail para ser mais independente do dispositivo. Embora “clique aqui” possa fazer sentido para um assinante que usa um laptop ou desktop, mas não para alguém que usa um dispositivo móvel ou tablet, onde tocar é a ação necessária.

Use o atributo ALT corretamente

O atributo ALT tem sido uma prática recomendada de email desde o início dos emails em HTML, devido aos clientes de email bloqueando imagens por padrão. O texto usado em um atributo ALT anexado a uma imagem é exibido quando a imagem não carrega. Isso ajuda o assinante a “ver” o e-mail se ele tiver imagens desativadas por padrão em seu cliente de e-mail ou se estiver usando um leitor de tela para ler o e-mail.

Para usar corretamente o atributo ALT, o contexto da imagem deve ser totalmente compreendido em relação ao conteúdo que a cerca. Primeiro, você precisa decidir se a imagem é funcional, ilustrativa ou decorativa.

Todas as imagens requerem atributos ALT, portanto, um atributo ALT nulo deve ser usado para imagens que não precisam ser lidas por leitores de tela ou representam algo vital para o assinante.

Visualize seu e-mail com todas as imagens desativadas para ajudá-lo a decidir quais imagens requerem o atributo ALT e quais podem ter um atributo nulo.

Para um mergulho mais profundo no entendimento de como o contexto informa o uso do atributo ALT para suas imagens, visite a página do WebAim no atributo ALT.

Use role = ”apresentação” em todas as suas tabelas de apresentação

No design de email, as tabelas são usadas para conter o conteúdo, bem como estruturar o design do email. As tabelas nunca foram destinadas a serem usadas para design; entretanto, devido a restrições em clientes de email, como Outlook, os designers de email foram forçados a usar o elemento <table> como um elemento de design.

Para ajudar os leitores de tela a entender a diferença entre os elementos <table> que contêm conteúdo e aqueles que são puramente para design, use add role = ”apresentação” em cada tabela que contém o conteúdo que o assinante precisa ler. Você só precisa adicioná-lo a cada elemento <table>, não a cada <td>. Isso evita forçar um leitor de tela a ler cada célula de suas tabelas, uma de cada vez, e ajuda o assinante a ir direto ao conteúdo importante.

Além de role = ”apresentação”, aria-hidden = ”true” é outro atributo HTML que pode ser adicionado a elementos em seu HTML que são para conteúdo visual e devem ser ocultados dos leitores de tela:

 <table role="presentation" aria-hidden="true" cellpadding="0" cellspacing="0" border="0"> <tr> <td></td> </tr> </table>

role = ”apresentação” também pode ser usado em imagens. O desenvolvedor de e-mail Remi Parmienter descobriu alguns comportamentos incomuns no Chrome para usuários do VoiceOver - um aplicativo leitor de tela para MacOS. O VoiceOver começou a ler nomes de arquivos para imagens, mesmo se o atributo ALT estiver presente, mas vazio. Recomenda-se usar o atributo HTML role = ”apresentação” em qualquer imagem com um atributo ALT vazio para evitar o nome da imagem que está sendo lida.

Emails acessíveis em ação

Podemos implementar um nível de acessibilidade se olharmos para além dos desafios. Concentre-se no que você pode fazer, não no que você não pode fazer.
- Paul Airy, Além do envelope

Os membros da Comunidade Litmus participaram de um Concurso da Comunidade para criar um e-mail acessível. Os envios ilustraram os pequenos passos que podem ser dados para abrir o e-mail a um novo público.

Os assinantes deste e-mail poderão aumentar o tamanho do texto por meio do navegador em até 200% sem quebrar o design do e-mail. E apresenta um GIF animado que pára após três ciclos (em cinco segundos) para aqueles que sofrem de convulsões fotossensíveis.

Eyal Bitton criou um e-mail que usa cópia para links que fazem sentido fora do contexto, e Eyal sinaliza o fim do e-mail para assinantes cegos usando algum texto oculto.

O boletim informativo do Tipo E usa um aprimoramento progressivo interativo para permitir que o assinante escolha entre o tamanho de texto padrão ou grande. O desenvolvedor de e-mail Paul Airy também incluiu uma opção - impulsionada por um opt-in - em que o assinante pode escolher exibir o e-mail com fundos coloridos se sofrer de certas deficiências.

Esses e-mails ilustram que são necessários apenas alguns pequenos passos para que os e-mails sejam mais acessíveis e, potencialmente, alcancem um público mais amplo. Muitas dessas etapas não apenas ajudam na acessibilidade, mas também ajudam a melhorar seus e-mails para todos.

VISUALIZE SEUS E-MAILS COM IMAGENS ATIVADAS E DESATIVADAS

Quer ver a aparência de seus e-mails em mais de 60 clientes de desktop, celular e webmail, incluindo visualizações de imagens desligadas? Experimente Litmus, grátis!

Comece a testar agora →

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 →