Se o seu e-mail não estiver acessível, o seu e-mail está danificado.
A acessibilidade dos e-mails continua a ser um tópico crucial. Embora a acessibilidade aos e-mails tenha se tornado familiar há mais de uma década, 99,97% dos e-mails ainda enfrentam problemas críticos de acessibilidade.
Em nosso artigo "Por que a acessibilidade é importante", discutimos várias deficiências e como elas afetam as experiências dos usuários. Também destacamos pontos de partida para garantir a acessibilidade total ao e-mail. Neste artigo, compartilharemos orientações sobre como otimizar seus e-mails para garantir a acessibilidade.
Principais pontos a serem lembrados
- Apesar de ser uma necessidade reconhecida há mais de uma década, 99,97% dos e-mails em HTML ainda têm problemas significativos de acessibilidade, ressaltando uma enorme lacuna nas práticas de design de e-mail.
- Os ajustes de acessibilidade nos e-mails não são apenas uma gentileza, mas uma necessidade, com cerca de metade da população mundial potencialmente se beneficiando de designs de e-mail mais acessíveis devido a uma variedade de deficiências, incluindo deficiências visuais, auditivas, motoras e cognitivas.
- A acessibilidade eficaz ao e-mail vai além de simples correções técnicas e requer uma estratégia abrangente de cinco etapas: design (garantindo acessibilidade visual), cópia, trabalho com textos alternativos, tecnologia e vinculação estratégica. Somente essa abordagem holística garante acessibilidade completa em todos os aspectos da comunicação por e-mail.
Estatísticas de acessibilidade, ou o número de pessoas em todo o mundo que se beneficiariam da acessibilidade ao e-mail
Em nosso artigo anterior, apresentamos estatísticas detalhadas sobre a prevalência de várias deficiências e o estado atual da acessibilidade digital. Aqui está uma visão geral rápida:
- 2,5 bilhões de pessoas têm deficiência visual, incluindo 2,2 bilhões com problemas de visão e 300 milhões que são daltônicos;
- 430 milhões de pessoas têm perda auditiva incapacitante (surda) e 1,5 bilhão de pessoas têm perda auditiva;
- 968 milhões têm deficiência motora;
- 1,6 bilhão têm dificuldades cognitivas e de aprendizagem, incluindo 960 milhões com dislexia e 400 milhões com epilepsia fotossensível.
Este gráfico ilustra que cerca de metade da população global poderia se beneficiar de e-mails acessíveis, mas 99,97% dos e-mails em HTML têm problemas significativos de acessibilidade.
Lista de melhores práticas de acessibilidade de e-mail
Os padrões de acessibilidade de e-mail são um conjunto de regras e recomendações para criar e-mails fáceis de ler para pessoas com todos os tipos de deficiência.
- Torne o texto alternativo para imagens e GIFs significativo.
- Se um GIF ou uma imagem servir a um propósito educacional, certifique-se de adicionar uma descrição escrita e detalhada.
- Use títulos e subtítulos (em vez de apenas usar fontes maiores) para organizar seu conteúdo de forma significativa e torná-lo legível para os leitores de tela.
- Use apenas títulos formatados programaticamente, listas com marcadores e numeradas;
- Torne o texto do link significativo.
- Opte por fontes acessíveis, como OpenDyslexic, Comic Sans e opções sem serifa, como Arial, Verdana, Tahoma, Century Gothic, Trebuchet, Calibri e Open Sans.
- Defina o espaçamento entre linhas para cerca de 150%.
- Especifique os nomes das cores dos itens entre parênteses.
- Verifique o contraste de cores da sua cópia e imagens.
- Evite usar todas as letras maiúsculas para texto contínuo; em vez disso, use letras minúsculas maiores.
- Adicione pontuação no final dos marcadores e em cada frase, incluindo cabeçalhos.
- Use fundos de cor única e esbranquiçados.
- Alinhe sua cópia à esquerda, sem quebras de linha e sem justificativa.
- Evite negrito excessivo ou itálico — use negrito para dar ênfase.
- O sublinhado é permitido apenas para links.
- Coloque apenas uma imagem GIF animada em uma tela;
- Use GIFs com menos de três flashes por segundo.
- Defina o idioma do e-mail, as funções de apresentação e o atributo dir para os leitores de tela.
Isso resume todos os padrões de acessibilidade para e-mail. Abaixo, mostraremos como desenvolvemos essas regras específicas.
Passos para criar e-mails acessíveis
Em nosso artigo anterior, exploramos cinco tipos de deficiências e seus impactos exclusivos na experiência do usuário. Reconhecer que cada deficiência requer adaptações específicas é crucial. Por exemplo, focar apenas em soluções para daltonismo pode não atender às necessidades de indivíduos com dislexia ou que usam leitores de tela. Para criar e-mails verdadeiramente acessíveis, precisamos de uma abordagem holística que englobe design, código e cópia. Esse método abrangente garante que atendamos a todo o espectro de necessidades de acessibilidade, melhorando muito a experiência do usuário.
Veja como fazer:
Etapa 1. Escrever uma cópia de e-mail acessível
Deficiências que abrange: deficiências visuais e cognitivas/de aprendizagem/neurológicas.
As diretrizes de texto acessíveis incluem:
- seja breve: escreva uma cópia concisa para que os destinatários possam entender rapidamente seu ponto de vista sem precisar ler textos longos;
- mantenha as coisas simples: use uma linguagem simples que um aluno do 8º ano possa entender facilmente. Evite jargões complexos ou termos acadêmicos;
- defina o espaçamento entre linhas para cerca de 150%.
- use subtítulos: divida seu conteúdo em seções com subtítulos claros para facilitar a digitalização de seus e-mails;
- defina cabeçalhos em vez de apenas usar fontes maiores.
Etapa 2. Otimizando textos alternativos
Como as pessoas com deficiência visual não podem ver suas imagens, um texto alternativo claro e descritivo é essencial para uma comunicação eficaz.
Deficiências que abrange: não apenas deficiências visuais — o texto alternativo beneficia todos os destinatários. Ele ajuda aqueles com imagens bloqueadas devido à lentidão da Internet, configurações de segurança ou preferências pessoais e suporta usuários de leitores de tela, incluindo indivíduos com deficiências visuais, dislexia e outras dificuldades de leitura ou aprendizagem.
Especialista
Primeiro, vamos explicar a diferença entre atributo alt e texto alt:
- o atributo alt é o atributo HTML usado dentro do elemento imagem;
- alt text é o conteúdo colocado dentro do atributo alt.
Vamos mostrar o que acontece quando não há atributo alt:
- as pessoas que usam leitores de tela ouvirão o URL inteiro da imagem hospedada ou o nome do arquivo se a imagem estiver desvinculada, ou o URL da imagem se a imagem estiver vinculada;
- os destinatários não terão ideia do que se trata a imagem se a imagem está bloqueada.
(Fonte: Webinar com Sarah Gallardo)
Cada imagem em um e-mail DEVE TER um atributo alt.
As práticas recomendadas de texto alternativo incluem:
Especialista
- considere tanto o conteúdo quanto o contexto da imagem;
- certifique-se de que seu texto alternativo transmita o que a imagem retrata;
- lembre-se de que os leitores de tela normalmente param de ler o texto alternativo após 100-120 caracteres;
- pule frases como "esta imagem é sobre", pois os leitores de tela já indicam a presença de uma imagem;
- use frase ou título maiúsculo, evitando todas as letras maiúsculas;
- busque um texto alternativo descritivo, mas conciso;
- garanta um bom contraste entre o texto alternativo e o plano de fundo para maior clareza visual.
Etapa 3. Tornar os links acessíveis
Deficiências que abrange: Suporta usuários de leitores de tela e aqueles com deficiências motoras.
Especialista
As melhores práticas de links acessíveis incluem:
- siga uma estratégia de vinculação intencional: adicione apenas links a imagens essenciais e evite vincular imagens decorativas;
- use o texto descritivo do link para indicar claramente onde o link leva, evitando frases genéricas como "Saiba mais" ou "Clique aqui";
- garanta que o texto alternativo para imagens vinculadas descreva o destino do link;
- garanta que os links se destaquem usando métodos de formatação como sublinhado ou negrito, em vez de depender apenas da cor;
- sempre que possível, coloque links nos botões de call-to-action para ajudar as pessoas com baixa visão ou deficiências motoras a clicar neles.
Etapa 4. Otimizar o design do e-mail para acessibilidade
Devido à sua complexidade, esta etapa é dividida em vários grupos.
Grupo 1 Diretrizes de acessibilidade de formatação de texto
Deficiências que abrange: indivíduos com baixa visão, aqueles que usam leitores de tela e disléxicos.
- evite usar todas as letras maiúsculas, pois elas podem ser mal interpretadas por pessoas com dislexia e os leitores de tela podem lê-las como abreviações;
- inclua sinais de pontuação no final dos marcadores e cabeçalhos;
- minimize o uso de itálico e negrito para ênfase; evite totalmente o negrito itálico;
- sublinhe apenas o texto se for um hiperlink;
- opte por um tamanho de corpo de texto de 16 px para legibilidade;
- opte por fontes acessíveis, como OpenDyslexic, Comic Sans e opções sem serifa, como Arial, Verdana, Tahoma, Century Gothic, Trebuchet, Calibri e Open Sans.
- alinhe seu texto à esquerda sem justificar ou adicionar quebras de linha.
Embora o Critério de Sucesso 1.4.8 (conformidade AAA) o permita, as melhores práticas recomendam evitar texto justificado pelas razões mencionadas. Alinhe o texto apenas a um lado.
Grupo 2 Trabalhando com cores
Deficiências que abrange: Pessoas com daltonismo, baixa visão e dislexia.
Especialista
- garanta contraste de cor suficiente entre texto e imagens;
- use fundos de cor única — para textos abaixo de 18px em negrito e 24 normais, deve ser 4:5:1, enquanto para textos acima deve ser 3:1;
- escolha fontes cinza escuro em fundos esbranquiçados em vez de preto brilhante em branco brilhante;
- evite usar cores sozinhas para destacar informações importantes em e-mails;
- ao usar imagens para indicar respostas certas ou erradas (com vermelho e verde, respectivamente) ou tendências em números, complemente com descrições de texto ou sinais de "+" e "-" para maior clareza.
(Fonte: E-mail da HubSpot)
Grupo 3 Trabalhando em imagens
Deficiências que abrange: Pessoas com daltonismo, baixa visão, dislexia e epilepsia fotossensível.
Ao trabalhar com GIFs e imagens, lembre-se de:
- use GIFs com três ou menos flashes por segundo;
- use uma imagem animada (GIFs) por tela;
- mantenha o contraste de cores conforme descrito anteriormente;
- inclua texto alternativo significativo para imagens. Para GIFs que transmitem instruções ou informações significativas, forneça descrições adicionais abaixo do GIF.
Etapa 5. Atender aos requisitos de acessibilidade de um código de e-mail
Deficiências que abrange: Suporta aqueles que usam leitores de tela e outros tipos de tecnologia assistiva.
Para obter informações detalhadas sobre acessibilidade de e-mail e tecnologia assistiva, consulte nosso webinar com Sarah Gallardo e Dmytro Kudrenko.
Vamos nomear apenas os pontos críticos:
- defina o atributo lang no elemento <html> e nos filhos diretos do <body> elemento. Essa redundância é necessária , pois alguns clientes de e-mail podem removê-la do elemento <html>;
- envolva o conteúdo dentro do <body> com um atributo dir para direcionalidade;
- atribua role="presentation" ou role="none" aos elementos <table> do atributo role.
Se estiver usando o Stripo, você não precisa se preocupar em garantir que os e-mails HTML sejam otimizados para leitores de tela, pois todos os e-mails criados com o Stripo já estão totalmente otimizados.
Ferramentas para testar se seus e-mails estão em conformidade com todas as práticas recomendadas de acessibilidade de e-mail
Quando terminar suas campanhas de e-mail, verifique-as com ferramentas de teste de acessibilidade e/ou experimente-as com leitores de tela.
Você tem que comer sua própria comida de cachorro. O que significa que você precisa testar, sempre testar o resultado.
Aqui estão as ferramentas que ajudarão você a verificar seus e-mails:
- accessible-email.org por Jordie van Rijn e Maarten Lierop — esta ferramenta verifica se o seu código de e-mail é compatível com qualquer leitor de tela. Eles podem até ajudá-lo a otimizá-lo;
- Verificador de acessibilidade, uma ferramenta da Parcel que ajuda você a avaliar as práticas recomendadas e os problemas de acessibilidade do seu e-mail. Ele categoriza os problemas identificados por gravidade: crítico, grave, moderado e leve. Isso facilita a priorização de correções;
- Verificação prévia de acessibilidade da campanha por e-mail no Acid — verifica se o seu e-mail está otimizado para dispositivos de assistência;
- Cores acessíveis para verificar o contraste de cores do corpo do e-mail (cópia e outros elementos, excluindo imagens);
- WebAIM (acessibilidade da web em mente) — verificador de contraste de cores. Ele considera não apenas as cores, mas também os tamanhos de fonte para cada caso;
- Coblis, simulador de daltonismo — verifica se suas imagens são acessíveis para pessoas daltônicas.
- Rastreie o RERC (PEAT) para verificar se seus GIFs estão em conformidade com os limites recomendados de frequência de intermitência.
Especialistas e recursos para saber mais sobre acessibilidade digital e por e-mail
Neste artigo, compartilhamos práticas essenciais para a acessibilidade no e-mail e compilamos uma lista dos principais recursos e especialistas a serem seguidos para obter mais informações sobre o assunto.
- Sarah Gallardo, como desenvolvedora líder de e-mail na Oracle, Sarah Gallardo é uma especialista notável em acessibilidade de e-mail. Ela oferece diretrizes e padrões abrangentes de acessibilidade. Sua experiência ajuda as organizações a se alinharem com as melhores práticas de acessibilidade por meio de materiais educacionais detalhados.
- Mike Paciello, atuando como diretor de acessibilidade da AudioEye, educa ativamente as marcas sobre a importância da acessibilidade por meio das estatísticas e insights mais recentes. Seu trabalho é crucial para motivar as empresas a implementar e priorizar a acessibilidade.
- Thomas Logan fornece consultoria especializada em acessibilidade, ajudando as organizações a garantirem que seu conteúdo digital seja acessível a todos. Os seus serviços incluem formação, auditorias abrangentes e aconselhamento estratégico que cumprem rigorosos padrões de acessibilidade.
- Mark Robbins, um defensor da acessibilidade ao e-mail, compartilha sua profunda experiência fornecendo dicas práticas e soluções inovadoras para profissionais de marketing por e-mail. Seu foco em tornar as comunicações por e-mail acessíveis beneficia tanto os remetentes quanto os destinatários.
- Paul Airy, especializado em design e desenvolvimento de e-mail, aplica a ciência comportamental para melhorar a usabilidade e a acessibilidade do e-mail. Sua abordagem não apenas melhora a experiência do usuário, mas também garante que os e-mails sejam compreensíveis e navegáveis para todos.
- As WCAG definem os padrões internacionais de acessibilidade, fornecendo uma estrutura que detalha como o conteúdo digital pode ser disponibilizado a pessoas com deficiência. Essas regras e diretrizes de acessibilidade são essenciais para desenvolvedores e criadores de conteúdo em todo o mundo.
- O consórcio de marcação de e-mail da Parcel, liderado por especialistas em acessibilidade, incluindo Mark Robbins, fornece materiais essenciais para melhorar a acessibilidade do e-mail. Apresenta um relatório trimestral, um glossário detalhado e uma lista de erros comuns com soluções, todos destinados a elevar os padrões do setor.
- A11y.email, administrado por Sarah Gallardo, é um blog que oferece materiais detalhados sobre acessibilidade de e-mail, cobrindo tópicos como texto alternativo eficaz, links significativos, HTML semântico e contraste de cores. Ele também fornece ferramentas e técnicas para testar a acessibilidade em e-mails, tornando-o ideal para desenvolvedores de e-mail e profissionais de marketing.
- AudioEye, dirigido por Mike Paciello, oferece uma riqueza de informações sobre acessibilidade digital. Ele apresenta artigos sobre melhores práticas, diretrizes de conformidade e as últimas tendências de acessibilidade, ajudando as marcas a garantirem que seu conteúdo digital seja inclusivo e acessível a todos os usuários.
- O blog Equal Entry , liderado por Thomas Logan, fornece artigos detalhados sobre acessibilidade digital. Abrange as melhores práticas e tópicos inovadores como GenAI em acessibilidade de e-mail, web e videogames, com o objetivo de tornar o conteúdo digital inclusivo para todos.
- A associação britânica de dislexia aumenta a conscientização e apoia indivíduos com dislexia, fornecendo recursos, informações e diretrizes para criar e tornar o conteúdo digital acessível e amigável à dislexia.
- A Universidade de Yale oferece artigos e recursos sobre acessibilidade na web, incluindo as melhores práticas para criar links acessíveis e outros conteúdos digitais.
Resumindo
Criar e-mails acessíveis é uma parte essencial de estratégias de comunicação inclusivas que beneficiam não apenas indivíduos com deficiência, mas todos os destinatários de e-mail. A grande prevalência de problemas de acessibilidade nos designs de e-mail atuais destaca a necessidade urgente de conscientização e implementação das melhores práticas. Ao adotar as diretrizes abrangentes descritas neste artigo, profissionais de marketing e desenvolvedores podem melhorar significativamente a experiência do usuário para um público amplo, garantindo que os e-mails não sejam apenas legíveis, mas verdadeiramente acessíveis a todos. Essa abordagem não apenas aumenta o engajamento, mas também reflete um compromisso com a inclusão nas comunicações digitais.
0 comentários