Guia Rápido: E-mail Marketing Acessível (E Com Melhor UX)
Eu uso óculos de grau. O Rodrigo é daltônico e não vê as cores como todo mundo. A Camila foi perdendo a visão aos poucos e hoje não enxerga mais. O Henrique é disléxico e sempre vê o texto se distorcendo enquanto lê.
Nós 4 temos dificuldade para ler na internet. Outras dezenas de milhares de pessoas também, precisando até usar tecnologias assistivas para isso — como leitores e ampliadores de tela.
Falta de acessibilidade na web não é um problema de sites, mas e-mails promocionais e transacionais também. Aliás, você sabia que no Brasil existem mais de 45 milhões de pessoas sendo ignoradas?
Se você é arquiteto da informação, designer de interface, redator, desenvolvedor, do marketing ou tem qualquer participação no processo de réguas de e-mail, essa realidade tem tudo a ver com você.
Algumas coisas a serem feitas a respeito:
1. Assunto / Subject
O assunto deve ser breve e descritivo para informar do que se trata o e-mail. A maioria de nós já supõe que o conteúdo não é relevante, e quando o título é vago, a sensação vira 100% de certeza.
Cenário: e-commerce Pet Online oferecendo cupom de desconto para usuários cadastrados na newsletter.
Exemplo ruim: “É só clicar e ganhar!”
Exemplo bom: “Pegue aqui seu cupom de R$ 100”
2. Atributo lang
Muita gente esquece de definir o idioma na hora de codificar o e-mail. Sem a declaração do atributo lang no código, o leitor de tela fica sem referência para saber qual perfil de idioma ativar para a pronúncia correta do conteúdo.
3. Title
O e-mail precisa ter um título especificado na tag <title>. Isso faz toda a diferença para usuários de leitor de tela em casos onde o e-mail é aberto no browser, como uma página web comum.
O <title> não pode ser genérico porque sua função é informar ao usuário de onde é aquela página e o que contem lá.
Cenário: e-mail de ofertas semanais do e-commerce Pet Online.
Exemplo ruim: <title>Pet Online</title>
Exemplo bom:<title>Pet Online | Ofertas semanais do e-mail</title>
4. Semântica
É texto comum?
Use <p>.
É um título?
Use os cabeçalhos <h1> ao <h6> para definir a hierarquia das informações.
É uma lista?
Use <li> com <ul> ou <ol>.
É um botão?
Use <button>.
Não é só estilizar com CSS e achar que isso dá conta do recado. É primordial declarar os elementos no HTML.
5. Legibilidade
Tamanho de fonte
É uma questão que… depende. Não existe um tamanho ideal, pois sempre será pequeno demais para uns e grande demais para outros.
Fato pouco conhecido: algumas pessoas — quem precisa da fonte bem grande — costumam configurar o browser para adequar os tamanhos automaticamente, de acordo com a necessidade pessoal.
Alinhamento
Alinhar o texto a esquerda, pois textos centralizados dificultam muito a leitura para disléxicos.
Espaçamento
Espaçar as linhas para deixar a leitura mais leve. O line-spacing deve equivaler a pelo menos 1,5 vezes a altura das letras.
6. Cores
Os texto e o fundo devem possuir contraste suficiente, pois dependendo da combinação, o texto ficará ilegível para muita gente. Faça o teste de contraste de cores no WebAIM (em inglês).
7. Textos embutidos em imagens
Nenhum texto deve ser embutido em imagens, somente no HTML.
Quando os textos fazem parte das imagens, o e-mail se torna incompreensível para usuários de leitor de tela e também para aqueles que a aplicação de e-mail bloqueia a visualização das mesmas. As imagens devem complementar o texto, não ser o texto.
8. Imagens
Toda imagem precisa ter o alt declarado, pois as imagens complementam o sentido do texto.
A descrição do alt deve ser rica o suficiente para detalhar o conteúdo da imagem. Se pergunte: o que está acontecendo na imagem? O que ela está transmitindo?
Cenário: descrição da foto abaixo
Exemplo ruim: “Rato”
Exemplo bom: “Rato branco com marcas cinzas, numa “cabana” de cobertor. Ele está metade dentro e metade fora, olhando para a câmera, de frente, dando uma piscadela”
9. Links e botões
Imagine que você não está vendo a tela e alguém está ditando os textos para você. Você pede para ela ir direto para os links, e a pessoa dita o seguinte: “Clique aqui”. Não faz sentido nenhum, né? Afinal, com esse fragmento de informação nomeado de “Clique aqui” não dá para saber onde você vai e nem o que vai encontrar se clicar lá.
Surpresa! É isso que acontece com quem usa leitor de tela.
Cenário: botão leva para página com cachorros precisando de um lar.
Exemplo ruim: “Saiba mais”
Exemplo bom: “Adote um cão”
10. Estrutura feita com tabela
A maioria dos e-mails são estruturados com tabela, pois é um jeito fácil de garantir que o layout funcione bem em qualquer dispositivo e cliente de e-mail. O problema é que a função das tabelas é exibir dados tabulares, não estruturar conteúdos por motivos estéticos.
Para que o leitor de tela não interprete o e-mail como um conjunto de dados tabulares, temos que “neutralizar” a tabela com o atributo ARIA role="presentation". Esse atributo removerá o significado semântico da tag <table>.
11. Validação do código
Depois de feito, é hora de conferir.
Você pode usar o validador online Accessible-Email.org, a extensão Accessibility Developer Tools para Google Chrome ou até o checklist do W3C (em inglês).
Conhece outras práticas de acessibilidade para e-mails? Fala aí pra gente :)
Este trabalho está licenciado com uma Licença Creative Commons — Atribuição 4.0 Internacional. O uso é livre, galera ❤️
