Como fazer e-mail para todos em 3 etapas fáceis: Gravação de webinar + perguntas e respostas

A acessibilidade de e-mail foi eleita uma das tendências de design de e-mail mais quentes de 2019 e agora é uma prioridade para a maioria das marcas. Mas também é verdade que muitos profissionais de marketing não sabem como começar a tornar seus e-mails mais inclusivos.

Implementar as práticas recomendadas de acessibilidade é mais fácil do que você pensa. Neste webinar, os especialistas em acessibilidade do Litmus, Jason Rodriguez e Alice Li, percorrem as estatísticas e pesquisas que provam que vale a pena investir em acessibilidade e compartilham as 3 etapas que você deve seguir para criar um e-mail melhor para todos.

Não teve a chance de assistir ao webinar ao vivo? Não se preocupe. Você pode acessar a gravação completa a qualquer momento e ler as perguntas e respostas abaixo.

Q&A

Um grande obrigado a todos que colaboraram durante o webinar com uma pergunta! Aqui está uma recapitulação de nossas respostas às perguntas mais populares, junto com nossa opinião sobre algumas das perguntas que não respondemos durante o webinar ao vivo. Tem mais perguntas? Por favor, deixe-os nos comentários.

Como você explica as limitações cognitivas?

Bettina : Existem muitos tipos diferentes de deficiências cognitivas, desde dificuldade em memorizar coisas ou prestar atenção à dislexia ou ao autismo. Cada uma dessas condições é única, mas seguir as dicas na seção de redação e design deste webinar ajudará muito a tornar seus e-mails mais acessíveis para pessoas com limitações cognitivas. Por exemplo, mantenha seu e-mail claro e conciso e evite o uso de palavras difíceis ou jargões. Mantenha seus layouts simples e desenvolva uma hierarquia visual clara que torna mais fácil para seus assinantes verificarem seu e-mail - e entenderem rapidamente o que é importante (e o que não é).

Qual é o leitor de tela mais usado? Como você testa isso?

Alice: Os dois leitores de tela mais populares são NVDA e JAWS . O NVDA é uma ferramenta gratuita de código aberto desenvolvida pela NV Access - eles são uma organização incrível que dedica seu trabalho a tornar a tecnologia mais acessível para pessoas com deficiência visual. JAWS é uma ferramenta popular de leitura de tela baseada em assinatura.

Se você não quiser instalar um software para entender como seu e-mail soaria em um leitor de tela, você pode usar o Litmus para isso! Recentemente, integramos o NVDA ao Litmus, então agora você pode ouvir uma amostra de áudio do seu e-mail diretamente na Lista de Verificação do Litmus. Aprenda mais .

Além disso, todos os sistemas operacionais modernos também oferecem algum tipo de suporte nativo para leitura de tela. No Mac, por exemplo, é o VoiceOver .

Quais são algumas marcas que otimizam seus e-mails para acessibilidade? Eu adoraria alguma inspiração!

Jason : Um dos meus favoritos é o deque . Eles fazem muitos treinamentos de acessibilidade, têm um blog incrível - e ótimos e-mails! Seus e-mails não apenas seguem as práticas recomendadas de acessibilidade, mas também apresentam um ótimo conteúdo que ajuda você a aprender sobre o assunto. Você deve se inscrever para receber seu boletim informativo !

Correndo o risco de soar presunçoso, estou muito impressionado com o trabalho que Alice e a equipe de e-mail fizeram no boletim informativo Litmus . Além de ter um design bonito, eles trabalharam muito para torná-lo acessível com base nas práticas recomendadas discutidas no Guia definitivo para acessibilidade de e-mail.

Alguma ideia de como ferramentas como “Alexa” ou “Siri” diferem de outros leitores de tela? Ou o recurso “ler em voz alta” do Outlook?

Jason : Em um episódio recente do podcast Entregando , mergulhei fundo nos assistentes de voz. Descobri que Alexa é a única que realmente lê seu e-mail - mas ela só lê o texto HTML, ignorando quaisquer atributos alt, tabelas ou quaisquer outros elementos HTML. É diferente de como um leitor de tela lidaria com e-mail. Assistentes de voz são voltados para conveniência, não necessariamente para acessibilidade, então eles não funcionam da mesma maneira que um leitor de tela completo como o NVDA, por exemplo. Em muitos casos, você ainda precisa do seu telefone ou laptop para navegar pelo conteúdo, o assistente de voz apenas oferece suporte a você. Para uma descrição completa de como Alexa, Google Home, Siri e Cortana lidam com e-mail, sintonize este episódio de podcast.  

Que tal GIFs animados? Usar ou não? Eles causam problemas para os leitores?

Alice : Você pode usá-los, mas tome cuidado como. As animações podem desencadear ataques epilépticos fotossensíveis, então você nunca vai querer incluir um GIF muito chocante ou piscando. Você também não deseja incluir informações cruciais, como cópia, em seus GIFs. A cópia oculta em seu GIF não está acessível para leitores de tela - e não será exibida em clientes de e-mail onde as imagens estão desabilitadas - então você corre o risco de perder partes cruciais de suas mensagens.

Onde posso encontrar exemplos de modelos de e-mail acessíveis?

Jason : Existem tantos modelos gratuitos por aí, mas poucos deles são otimizados com a acessibilidade em mente! É por isso que criamos recentemente quatro novos modelos que seguem as melhores práticas de acessibilidade - e eles estão disponíveis para você gratuitamente na Comunidade Litmus . Confira nossos modelos se você deseja construir ...

• Boletins informativos acessíveis
• Notas pessoais acessíveis
• Emails transacionais acessíveis
• Anúncios de produtos acessíveis

Como o uso de emojis afeta a acessibilidade?

Jason: Embora a maioria dos leitores de tela entenda emojis e possa lê-los, pode não ser a experiência ideal para os usuários. Vamos ouvir o NVDA lendo este exemplo de linha de assunto com um emoji:

A maior venda do ano

Você pode ouvir como um emoji soa desconexo ao lado do texto. Embora os emojis sejam comuns agora e os usuários de tecnologia assistiva provavelmente estejam acostumados a ouvi-los, dependendo do emoji, ele ainda pode soar estranho. Como qualquer outro elemento ou cópia em um e-mail, a melhor maneira de ver se funciona ou não é testá-lo e ouvir seu e-mail usando uma ferramenta como o NVDA ou o Verificador de Acessibilidade Litmus.

Eu preciso aplicar “role = presentation” para DIVs também?

Alice : Não! role = ”apresentação” destina-se apenas a dizer aos leitores de tela para ignorar o significado semântico das tags, portanto, as tabelas precisam delas porque os dados tabulares, como os gráficos, requerem todas as informações de coluna e linha para que as pessoas possam navegar e entendê-los adequadamente. No e-mail, os desenvolvedores geralmente contam com tabelas para apresentação em vez de dados tabulares, e é por isso que as tabelas exigem isso. Os DIVs, por outro lado, não têm um significado semântico que precisaria ser substituído pelos leitores de tela.

Para clientes que insistem em usar e-mails baseados em imagens, existem práticas recomendadas que devemos seguir?

Bettina : Essa é difícil! Existem inúmeras razões pelas quais enviar e-mails só com imagens é uma ideia horrível. Portanto, como primeiro passo, faça o que puder para convencer seu cliente de que essa abordagem traz uma experiência horrível para o assinante. Nossa postagem no blog sobre Por que você não deve enviar e-mails apenas com imagens contém muitos insights e dicas para ajudá-lo a defender seu ponto de vista.

Se não houver maneira de colocar seu cliente no caminho certo, tudo o que você pode fazer é otimizar a visualização da imagem com texto ALT ( você pode até estilizar esse texto ALT ) e usar botões à prova de balas para que pelo menos seus CTAs ainda funcionam quando as imagens são desativadas.

O uso de fontes da web afeta a acessibilidade?

Alice : Do ponto de vista do código, não deveria. Do ponto de vista do design, isso significa que você deve sempre se certificar de que a fonte da Web e seu fallback seguro para a Web atendam aos padrões de taxa de contraste para serem legíveis. Por exemplo, se sua fonte da web for mais espessa do que o substituto, apenas certifique-se de que o substituto também passe as pontuações da taxa de contraste, já que o substituto é o que os usuários, digamos, do Gmail, podem ver em vez disso.

A única mudança que não fizemos em nosso modelo de código é usar o elemento semântico para títulos ou parágrafos. Atualmente, estilizamos a célula da tabela para o texto. Que problemas isso pode apresentar para acessibilidade?

Alice : Estou presumindo que a tabela que envolve o texto já tem sua função definida como “apresentação” ou “nenhum” para conter qualquer ruído desnecessário do leitor de tela. Além desse problema, não usar as tags corretas de título / parágrafo apresentaria um problema de navegação para dispositivos assistivos, já que algumas tecnologias permitem que os usuários pule de um título para outro (e seus parágrafos relacionados) como se fosse um índice.

Os caracteres especiais, como apóstrofos curvos, aspas, e comercial etc., podem ser lidos por leitores de tela?

Alice : Depende. O e comercial costuma ser lido como "e". As aspas e apóstrofos curvos são ignorados, assim como alguém pode não pronunciá-los ao ler algo em voz alta. Outros caracteres especiais são considerados caso a caso, como os marcadores são lidos como “marcadores”. Em geral, eu recomendaria sempre testar para ter certeza.

Alguma sugestão de formatação de texto apenas para acessibilidade? Eu uso várias quebras “=” ou “-” entre as seções. Como isso é tratado?

Alice : Traços e sublinhados não costumam ser lidos, então não tem problema. No entanto, os leitores de tela lerão o sinal de “igual”, portanto, recomendo evitá-lo.