Acessibilidade, modo escuro e renderização de e-mails HTML nos diversos clientes: um guia prático

Uma boa acessibilidade em e-mail HTML e um bom trabalho de renderização são a mesma tarefa vista de dois lados: garantir que cada assinante, seja qual for o cliente, dispositivo, tema ou tecnologia assistiva que use, consiga ler a sua mensagem e agir a partir dela. Um modelo que parece perfeito no seu editor ainda pode exibir uma parede de caixas vazias com as imagens bloqueadas, ficar desbotado no modo escuro, quebrar no Outlook para Windows ou ser cortado pelo Gmail. Este guia nos dá uma maneira prática de construir e testar tudo isso, com regras simples que podemos aplicar ao próximo modelo que lançarmos.

Por que acessibilidade e renderização andam juntas

A maioria das falhas de renderização também são falhas de acessibilidade. Se uma mensagem depende de uma única imagem para transmitir a oferta, quem está com as imagens bloqueadas, quem usa um leitor de tela e quem está em uma conexão lenta perdem a oferta. Se o texto cinza sobre um fundo claro é difícil de ler em um ambiente iluminado, ele também é uma barreira para quem tem baixa visão. Corrigir a causa uma vez ajuda todo mundo.

O e-mail também é diferente da web. Não existe um único mecanismo de navegador. Cada cliente remove, reescreve ou ignora partes do seu código à sua maneira, e alguns deles, como o Outlook para Windows, ainda usam um mecanismo muito defasado em relação aos padrões web atuais. Por isso construímos de forma conservadora e testamos abertamente, em vez de presumir que os padrões vão nos sustentar.

Problema	Quem é afetado	Causa raiz comum
Conteúdo apenas dentro de imagens	Usuários de leitores de tela, pessoas com imagens bloqueadas, conexões lentas	Texto da oferta embutido em um banner, sem texto real nem alt
Texto fraco ou pequeno	Baixa visão, leitores mais velhos, qualquer pessoa ao ar livre	Cinza claro sobre branco, texto de corpo com 11px ou 12px
Links vagos	Usuários de leitores de tela que listam links, usuários de teclado	Vários links que dizem apenas clique aqui
Ilegível no modo escuro	Pessoas que usam temas escuros, geralmente à noite	Logotipos e ícones que pressupõem fundo branco
Layout quebrado no Outlook	Usuários do Outlook para Windows, muitas vezes em ambiente corporativo	Dependência de CSS que o mecanismo do Word ignora
Mensagem cortada	Usuários do Gmail em mensagens longas	HTML pesado, repetitivo ou inchado

Uma estrutura semântica dentro de layouts com tabelas

As tabelas continuam sendo o método de layout mais seguro para e-mail, mas a tecnologia assistiva lê uma tabela como dados, a menos que digamos o contrário. Alguns pequenos hábitos mantêm um layout em tabelas compreensível.

• Doctype, idioma e título. Comece com um doctype completo, coloque um atributo lang no elemento html e adicione um elemento title descritivo. Os leitores de tela usam o idioma para escolher as regras de pronúncia, e o título ajuda em algumas pré-visualizações.
• Role presentation nas tabelas de layout. Adicione role="presentation" às tabelas que apenas organizam o conteúdo, para que não sejam anunciadas como grades de dados. Use marcação de tabela real somente para dados tabulares de verdade, como uma fatura ou uma lista de preços.
• A ordem de leitura é igual à ordem visual. Os leitores de tela seguem o código, não a imagem. Se um layout de duas colunas se empilha no celular, verifique se a ordem empilhada continua fazendo sentido quando lida de cima para baixo.
• Títulos e parágrafos reais. Use elementos h1 a h3 e p para o conteúdo, com estilos inline para controlar tamanho e espaçamento. Não simule um título com texto em negrito dentro de uma célula de tabela.
• Aninhamento raso. Cada nível extra de tabela adiciona ruído para a tecnologia assistiva e peso ao arquivo. Mescle células e use espaçamento interno em vez de tabelas espaçadoras.
• Sem imagens de layout. GIFs espaçadores e imagens fatiadas aumentam a poluição e falham feio quando as imagens estão desativadas.

Um exemplo compacto

Este pequeno esqueleto mostra os hábitos juntos. Ele é propositalmente curto, então adapte-o ao seu próprio modelo e teste-o na sua matriz.

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="color-scheme" content="light dark">
  <meta name="supported-color-schemes" content="light dark">
  <title>Your order has shipped</title>
</head>
<body style="margin:0;padding:0;background-color:#f4f4f4;">
  <div style="display:none;max-height:0;overflow:hidden;">Your parcel is on its way.</div>
  <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
    <tr><td align="center" style="padding:16px;">
      <table role="presentation" width="600" cellpadding="0" cellspacing="0" border="0" style="max-width:600px;background-color:#ffffff;">
        <tr><td style="padding:24px;font-family:Arial,Helvetica,sans-serif;font-size:16px;line-height:24px;color:#222222;">
          <img src="https://example.com/logo.png" width="140" alt="Example Company" style="display:block;border:0;">
          <h1 style="font-size:24px;line-height:30px;margin:24px 0 8px;">Your order has shipped</h1>
          <p style="margin:0 0 16px;">Order 1042 left our warehouse today.</p>
          <a href="https://example.com/track/1042" style="color:#0b57d0;text-decoration:underline;">Track order 1042</a>
        </td></tr>
      </table>
    </td></tr>
  </table>
</body>
</html>

Texto alternativo, texto de link e atributo de idioma

Texto alternativo que cumpre o seu papel

O texto alternativo é o substituto da imagem quando ela não pode ser vista. É também o que as pessoas veem primeiro quando um cliente bloqueia imagens por padrão. Escreva-o pensando na função que a imagem exerce.

Tipo de imagem	Abordagem do texto alternativo	Exemplo
Logotipo	Nome da organização	alt="Example Company"
Foto informativa	Uma descrição curta e específica do que importa	alt="Blue running shoe with white sole"
Imagem que é um botão	A ação, correspondendo ao link	alt="Track order 1042"
Divisor ou enfeite decorativo	Alt vazio para ser ignorado	alt=""
Banner com texto	O mesmo texto, mais texto real por perto	alt="Autumn sale ends Sunday"

Não comece com a expressão imagem de, não encha de palavras-chave e não omita o atributo por completo, pois alguns clientes passam a ler o nome do arquivo. Estilize também o texto alternativo: definir fonte, cor e tamanho no elemento img faz com que o texto substituto continue legível nos clientes que o exibem no lugar da imagem.

Links que fazem sentido fora de contexto

Usuários de leitores de tela costumam abrir uma lista com todos os links de uma mensagem. Uma lista de seis itens que dizem todos clique aqui ou leia mais é inútil. Faça cada link descrever o seu destino, como Acompanhar o pedido 1042 ou Ler a política de entrega. Estilize os links com sublinhado e uma cor que passe no contraste, porque a cor sozinha é um sinal fraco. As WCAG tratam disso no critério de finalidade do link, e o princípio é simples: as palavras devem continuar funcionando sozinhas.

Mantenha os botões reais também. Um botão à prova de falhas feito de um link estilizado dentro de uma célula de tabela, com bastante espaçamento interno, é mais fácil de tocar e funciona com leitor de tela. Um botão que é apenas uma imagem achatada falha tanto quando as imagens estão bloqueadas quanto quando alguém dá zoom.

Defina o idioma

O atributo lang no elemento html informa à tecnologia assistiva em que idioma a mensagem está. Se uma seção estiver em outro idioma, marque-a com o seu próprio atributo lang. Não custa nada e elimina palavras mal pronunciadas para usuários de leitores de tela. Use códigos corretos, como en, en-GB, hi ou fr.

Contraste de cores, tamanhos de fonte e áreas de toque

O nível AA das WCAG 2.2 pede uma taxa de contraste de pelo menos 4,5 para 1 em texto normal, 3 para 1 em texto grande e 3 para 1 em componentes de interface significativos, como as bordas de um botão. Use um verificador de contraste nos pares de cores reais do seu modelo, incluindo o texto dos botões, os links do rodapé e as letras miúdas. É nos rodapés que o contraste costuma falhar.

• Texto do corpo. Cerca de 16px com altura de linha de 1,4 a 1,5 é confortável. Evite ficar abaixo de 14px em qualquer coisa que importe. Alguns clientes móveis ampliam sozinhos o texto pequeno, o que pode desorganizar o layout, então teste isso.
• Títulos e chamadas para ação. Use degraus de tamanho claros. Mantenha a ação principal visível sem rolar a tela no celular, se puder.
• Áreas de toque. Dê aos botões um espaçamento interno generoso. A orientação comum é uma área de pelo menos cerca de 44 por 44 pixels, com espaço entre links vizinhos.
• Comprimento da linha. Uma única coluna de cerca de 600px ainda é uma largura segura e se lê bem em telas pequenas.
• Não dependa só da cor. Um preço em vermelho e outro em verde também devem se diferenciar por palavras, rótulos ou ícones com texto alternativo.
• Fontes da web. Trate-as como um aprimoramento. Liste sempre uma pilha de fontes alternativas seguras para a web, pois muitos clientes ignoram fontes personalizadas.

O contraste não é uma questão só do modo claro. Se você adicionar estilos para o modo escuro, verifique também os novos pares de cores.

Modo escuro: o que os clientes realmente fazem

O modo escuro se comporta de maneira diferente em cada cliente, e o mesmo cliente pode se comportar de modo diferente nas versões desktop, web e móvel. De forma geral, há três comportamentos, e um bom modelo sobrevive a todos eles.

Comportamento	O que o cliente faz	O que fazemos a respeito
Sem alteração	Mostra o seu e-mail exatamente como projetado, sobre as cores claras dele	Nada de especial, mas garanta que o design se sustente sobre o próprio fundo
Inversão parcial	Altera apenas as cores que detecta como fundos claros e texto escuro	Defina cores explícitas de fundo e de texto para que a troca seja previsível
Inversão total	Recolore a maioria dos fundos e textos, às vezes de forma irregular	Evite branco e preto puros, teste logotipos e ícones, mantenha o contraste seguro nos dois casos

Logotipos e ícones em PNG transparente

Os logotipos costumam ser a principal vítima. Um logotipo escuro sobre fundo transparente some em uma superfície escura. Um logotipo salvo com fundo branco sólido aparece como um retângulo claro. Opções que costumam funcionar:

• Use um PNG transparente e escolha cores com contraste suficiente em fundos claros e escuros, como uma cor de marca em tom médio.
• Adicione um contorno ou brilho claro e fino às partes escuras da arte, para que a forma se mantenha em fundos escuros.
• Quando o cliente oferecer suporte a prefers-color-scheme, troque por uma versão clara do logotipo no modo escuro usando CSS.
• Evite colocar texto importante em imagens. Texto real é recolorido corretamente, texto achatado não.
• Verifique ícones que são glifos pretos sobre fundo transparente, pois eles podem desaparecer por completo.

Aderindo com prefers-color-scheme

Alguns clientes oferecem suporte à media query prefers-color-scheme, e você pode escrever regras para o modo escuro dentro dela. O suporte é irregular, então trate essas regras como um extra e faça sempre o design padrão funcionar sem elas. As meta tags de color-scheme no exemplo acima informam aos clientes compatíveis que a mensagem está pronta para os dois modos.

<style>
  :root { color-scheme: light dark; supported-color-schemes: light dark; }
  @media (prefers-color-scheme: dark) {
    .bg-page { background-color: #121212 !important; }
    .bg-card { background-color: #1e1e1e !important; }
    .text-main { color: #eaeaea !important; }
    .logo-light { display: none !important; }
    .logo-dark { display: block !important; }
  }
</style>

Alguns clientes removem ou ignoram blocos de estilo, então os valores inline continuam sustentando o design base. Nunca teste o modo escuro apenas no único cliente que você usa todos os dias.

Outlook e o mecanismo de renderização do Word

Várias versões do Outlook para Windows renderizam o HTML com o mecanismo do Word, e não com um mecanismo de navegador. A Microsoft documenta quais recursos de HTML e CSS esse mecanismo suporta, e é um conjunto menor que o dos navegadores modernos. O resultado é o motivo mais comum de um modelo que funciona em todo lugar, menos em uma caixa de entrada, muitas vezes em um ambiente corporativo onde isso importa.

Particularidade	Sintoma típico	Resposta prática
Suporte limitado ao modelo de caixa	Espaçamento interno, margens ou larguras em elementos div e p são ignorados ou inconsistentes	Faça o layout com células de tabela e coloque o espaçamento interno nos elementos td
Sem imagens de fundo em muitos casos	O texto do hero fica sobre uma área em branco	Defina uma cor de fundo sólida como alternativa e use código condicional para imagens quando for indispensável
Cantos arredondados e sombras ignorados	Os botões ficam quadrados	Aceite os cantos quadrados como uma alternativa aceitável
Dimensionamento de imagens	As imagens esticam ou aparecem no tamanho errado	Defina atributos width e height em toda img, e não apenas por CSS
Esquisitices de altura de linha e espaçamento	Blocos de texto parecem mais altos ou mais baixos	Defina uma altura de linha explícita na célula e evite parágrafos espaçadores vazios
Recursos modernos de layout sem suporte	Flexbox ou grid colapsam	Use tabelas aninhadas e layouts híbridos com larguras fixas

Uma boa abordagem é projetar primeiro para o cliente mais limitado e aprimorar a partir daí. Use comentários condicionais apenas para o Outlook quando uma alternativa for realmente necessária, mantenha-os pequenos e registre o motivo de cada um. O mecanismo do Word também pode alterar o comportamento das cores em temas escuros, então inclua-o nas suas verificações de modo escuro.

Corte do Gmail perto de 102KB

Quando o HTML de uma mensagem é grande, o Gmail encurta a mensagem exibida e adiciona um link para ver o e-mail inteiro. O número que a maioria cita é de cerca de 102KB, e ele se aplica ao tamanho do HTML, não às imagens vinculadas a ele. Duas consequências práticas decorrem disso. Uma mensagem cortada pode esconder o rodapé e o link de cancelamento de inscrição, e pode esconder um elemento de rastreamento, de modo que qualquer conteúdo abaixo do corte pode passar despercebido. Como a regra exata pertence ao Google e pode mudar, trate o número como uma referência e deixe bastante folga.

• Remova CSS não utilizado, blocos comentados e código de modelo deixado para trás pelo seu editor.
• Evite repetir longas strings de estilo inline em cada célula quando uma classe curta pode atender a partir de um bloco de estilo, desde que o design base continue funcionando com estilos inline.
• Encurte URLs de rastreamento muito longas quando a sua plataforma permitir, pois cada link adiciona bytes.
• Não cole grandes quantidades de texto nem repita o mesmo conteúdo em vários blocos ocultos.
• Verifique o tamanho final depois que a sua plataforma adicionou rastreamento e personalização, e não apenas o tamanho do arquivo que você escreveu.
• Coloque o conteúdo mais importante e o link de cancelamento de inscrição na parte superior da mensagem.

O tamanho também afeta a entregabilidade. Mensagens muito pesadas são entregues mais devagar e têm mais chance de atrair filtragem, como explicamos em nosso guia sobre limites de tamanho de e-mail e MIME.

Bloqueio de imagens e a alternativa em texto simples

Alguns clientes bloqueiam imagens remotas até que o leitor permita, e alguns leitores desativam as imagens de vez. Projete de modo que uma mensagem sem nenhuma imagem continue funcionando.

• Mantenha texto real para o título, a oferta e a chamada para ação.
• Use texto alternativo estilizado e defina cores de fundo nas células, para que o texto branco sobre uma imagem escura ausente não fique branco sobre branco.
• Use botões à prova de falhas feitos de texto e cor de célula, não botões de imagem.
• Não use uma única imagem grande como a mensagem inteira. Isso é inacessível e também é um padrão que os filtros observam. Nossa visão geral sobre conteúdo e filtros de spam explica o motivo.
• Não dependa de um pixel de abertura para contar aberturas, pois imagens bloqueadas e recursos de privacidade tornam essa contagem pouco confiável.

Envie sempre uma parte em texto

Uma mensagem bem formada traz um multipart alternative, com uma parte em texto e uma parte em HTML. A parte em texto deve incluir o conteúdo real, parágrafos legíveis, os mesmos links principais escritos por extenso e as informações de cancelamento de inscrição. Ela ajuda leitores que preferem texto simples, é útil para a tecnologia assistiva e é um bom sinal de cuidado para os filtros. Não cole um modelo vazio nem a linha única veja este e-mail no seu navegador. Se a sua plataforma consegue gerar a parte em texto a partir do HTML, ainda assim leia o resultado e ajuste-o, pois a conversão automática costuma deixar URLs soltas e linhas em branco.

Uma matriz de testes e um fluxo de pré-visualização

Testar todos os clientes em todos os dispositivos não é realista. Uma matriz nos dá uma lista reduzida e repetível. Monte-a a partir dos seus próprios dados de abertura por cliente e dispositivo, e acrescente alguns difíceis de propósito.

Verificação	O que observar	Passa quando
Outlook para Windows (mecanismo do Word)	Layout, botões, larguras, fundos	Legível, com links e utilizável, mesmo que menos refinado
Gmail web e aplicativo móvel	Layout, modo escuro, tamanho da mensagem, corte	Sem corte, rodapé visível, cores seguras
Apple Mail no iPhone e no Mac	Modo escuro, tamanho da fonte, áreas de toque	Logotipo visível nos dois temas, áreas fáceis de tocar
Outlook na web e no celular	Recoloração do modo escuro, imagens	O contraste se mantém após a recoloração
Imagens desativadas	Texto alternativo, fundos, botões	A oferta e a ação continuam claras
Passagem com leitor de tela	Ordem de leitura, texto alternativo, lista de links, idioma	Faz sentido ao ser ouvido de cima para baixo
Teclado e zoom	Ordem de tabulação, ampliação até um tamanho grande	Nada se perde nem se sobrepõe
Visualização em texto simples	Conteúdo, links, cancelamento de inscrição	Completa e legível

Um fluxo que se encaixa em uma versão

1. Valide o HTML em um validador e execute uma verificação automatizada de acessibilidade no arquivo renderizado, para contraste, texto alternativo ausente e idioma.
2. Envie um teste para contas reais nos seus principais clientes, ou use uma ferramenta de pré-visualização que gere capturas de tela. As capturas são uma boa primeira checagem, mas não substituem uma caixa de entrada real.
3. Abra a mensagem com imagens desativadas, no modo escuro e em um celular.
4. Ouça-a com um leitor de tela por um minuto e anote tudo o que for confuso.
5. Verifique o tamanho final do HTML depois que a personalização e o rastreamento forem adicionados.
6. Corrija, reenvie e registre a data, os clientes e o resultado em um pequeno log.

Use um lugar seguro para experimentar. Envie testes para endereços de teste (seed) ou para um fluxo de homologação, não para uma lista real, e siga a abordagem de nosso guia sobre como testar e-mails com segurança. Nosso guia de métricas de entregabilidade mostra como acompanhar os resultados depois do envio, e vale a pena comparar o engajamento por cliente quando você muda um modelo.

Um exemplo prático: o modelo que falhou de três maneiras

Imagine um modelo promocional inventado, de 118KB, com um logotipo escuro sobre fundo transparente, texto de corpo cinza de 12px sobre branco, uma imagem hero com a oferta embutida e três links que dizem todos clique aqui. Nos testes, ele falha em quatro pontos.

Constatação	Antes	Depois
Corte no Gmail	HTML de 118KB, rodapé escondido atrás do link de corte	CSS não utilizado e comentários removidos, HTML reduzido para 74KB, rodapé visível
Logotipo no modo escuro	O logotipo escuro desaparece em uma superfície escura	Logotipo redesenhado com contorno claro, mais uma variante clara para as regras escuras
Contraste	Texto do corpo cinza a cerca de 2,8 para 1 sobre branco	Texto do corpo escurecido para passar em 4,5 para 1, tamanho aumentado de 12px para 16px
Links e texto alternativo	Três links dizendo clique aqui; alt do hero vazio	Links dizendo Compre a linha de outono, Leia os detalhes de entrega e Gerencie suas preferências; o alt do hero traz a oferta e a mesma oferta também aparece como texto real

Esses números são inventados para ilustração. O ponto é a sequência: medir, corrigir as causas por ordem de impacto, testar de novo na mesma matriz e registrar o resultado. Neste exemplo, o HTML caiu 44KB, ou seja, 37 por cento do original, antes de qualquer mudança de conteúdo. Em seguida, a equipe adiciona uma parte em texto simples e um role de presentation em cada tabela de layout, e a versão é aprovada com uma linha de log para a próxima pessoa.

Acessibilidade e entregabilidade se reforçam

Uma mensagem limpa e legível, com uma parte de texto real, links honestos e um cancelamento de inscrição visível, também é mais fácil para os filtros confiarem e para os leitores se engajarem. Garanta que os links do rodapé funcionem e sejam fáceis de encontrar, como explicado em nosso guia de cancelamento de inscrição com um clique. Nada disso substitui a autenticação, a qualidade da lista ou a reputação do remetente, mas elimina motivos evitáveis para um leitor ignorar ou denunciar uma mensagem.

Checklist antes do envio

1. Doctype, atributo lang e um título descritivo estão presentes.
2. As tabelas de layout têm role presentation, a ordem do código corresponde à ordem de leitura e o aninhamento é raso.
3. Toda imagem informativa tem texto alternativo específico; as imagens decorativas têm alt vazio.
4. Nenhum texto importante existe apenas dentro de uma imagem, e a mensagem funciona com as imagens desativadas.
5. O texto do corpo passa em 4,5 para 1 de contraste, tem cerca de 16px e os botões têm áreas de toque generosas.
6. O texto dos links descreve o destino e os links são sublinhados ou claramente marcados de outra forma.
7. Logotipos e ícones foram verificados nos temas claro e escuro, com um PNG transparente ou uma variante escura.
8. O Outlook para Windows foi verificado, com alternativas para fundos e botões arredondados.
9. O tamanho final do HTML, depois do rastreamento e da personalização, está bem abaixo da faixa de corte do Gmail.
10. Uma parte real em texto simples está incluída e o link de cancelamento de inscrição está no alto da mensagem.
11. Os resultados são registrados e a matriz é revisada com base nos dados de abertura atuais.

Leituras complementares e fontes

• W3C: Web Content Accessibility Guidelines (WCAG) 2.2
• W3C: Understanding Success Criterion 1.4.3, Contrast (Minimum)
• W3C: Understanding Success Criterion 3.1.1, Language of Page
• W3C: Understanding Success Criterion 2.4.4, Link Purpose (In Context)
• W3C WAI: Images tutorial and alt text decision tree
• MDN: prefers-color-scheme media feature
• Microsoft: Outlook HTML and CSS support (Word rendering engine)