A «tag alt» não existe como tal. Alt é um atributo da tag <img>: contém o texto alternativo da imagem, apresentado quando esta não carrega, lido em voz alta pelos leitores de ecrã e aproveitado pelos motores de pesquisa para perceber o que a imagem mostra. A sintaxe e as regras de redação valem para qualquer suporte. As newsletters acrescentam 2 dificuldades: imagens que alguns clientes de correio bloqueiam e botões em formato de imagem que desaparecem com elas.
Sintaxe do atributo alt
O atributo alt coloca-se dentro da tag <img>, ao lado de src, que indica o endereço do ficheiro:
<img src="logo-captain-verify.png" alt="Captain Verify" width="200" height="60">
Indique também width e height (aqui 200 x 60 px): estas dimensões reservam o espaço da imagem. Quando o cliente de correio bloqueia o ficheiro, o texto alternativo aparece nessa zona. O atributo title mostra uma dica ao passar o rato e nunca substitui o alt.
Escrever um texto alternativo útil
Descreva a função da imagem no seu contexto. A mesma fotografia de um telemóvel pede 2 alt diferentes consoante ilustre uma análise de produto ou conduza a uma ficha de compra. Faça esta pergunta: se a imagem desaparecesse, o que seria preciso ler no seu lugar?
Aposte numa frase curta. A Abondance dá como referência menos de 125 caracteres no seu guia sobre a tag alt (em francês). Esse limite vem da prática dos editores: as WCAG 2.2 não fixam nenhum. Para um botão, a Mailjet recomenda cerca de 25 caracteres numa largura de 200 px, nos seus conselhos sobre o alt text (em francês).
Elimine as fórmulas «imagem de» e «fotografia de»: os leitores de ecrã já anunciam que se trata de uma imagem. Para um logótipo, escreva o nome da marca. Para um botão «Transferir o guia», o alt «Transferir o guia» basta: «botão azul» não diz nada ao subscritor que não vê a imagem. Leia-o em voz alta.
Que alt para cada tipo de imagem?
Tudo depende do papel da imagem na mensagem: transmitir informação ou apenas decorar. A árvore de decisão do W3C distingue 5 casos, da imagem decorativa à imagem complexa. Numa newsletter, bastam 4 perguntas, por esta ordem:
- A imagem está dentro de uma ligação ou de um botão? O alt descreve o destino ou a ação.
- A imagem contém texto? O alt repete esse texto palavra por palavra, salvo se já figurar mesmo ao lado.
- A imagem transmite uma informação (oferta, produto, gráfico)? O alt dá o essencial. Os dados detalhados passam para texto no email.
- A imagem é puramente decorativa ou redundante face ao texto vizinho? O alt fica vazio.
| Tipo de imagem | Alt recomendado | Razão |
|---|---|---|
| Logótipo no cabeçalho | Captain Verify | O nome identifica o remetente |
| Botão em formato de imagem | Transferir o guia | O alt descreve a ação esperada |
| Faixa com texto | Oferta de regresso às aulas: portes grátis a partir de 50 € de compras | O texto da imagem é repetido na íntegra |
| Gráfico | Aberturas em alta de janeiro a junho, detalhe na tabela abaixo | A mensagem-chave no alt e os números em texto |
| Linha ou separador | alt=”” | Nenhuma informação a transmitir |
Alt vazio e imagens decorativas
Uma imagem decorativa recebe alt="": o atributo está presente mas sem texto, e as tecnologias de apoio ignoram-no. Omitir o atributo produz o efeito inverso: alguns leitores de ecrã anunciam então o nome do ficheiro, o que polui a leitura.
O W3C (WAI) admite o alt vazio quando a imagem é um simples efeito visual ou é redundante face ao texto vizinho. O W3C inclui os espaçadores entre as imagens decorativas. Num email, prefira um espaçamento em CSS (o padding de uma célula de tabela): assim não há nada a ignorar.
Normas: WCAG 1.1.1 e RGAA 1.1 e 1.2
O critério 1.1.1 «Conteúdo não textual» das WCAG 2.2 é de nível A, o mais básico: todo o conteúdo não textual tem uma alternativa textual que cumpre uma função equivalente. A pura decoração é uma exceção, desde que as tecnologias de apoio a possam ignorar. O RGAA 4.1.2 da DINUM (referencial francês, em francês) retoma este princípio em 2 critérios do tema Imagens: o 1.1 «Cada imagem que transmite informação tem uma alternativa textual?» e o 1.2 «Cada imagem decorativa é corretamente ignorada pelas tecnologias de apoio?». A versão 5 do referencial está anunciada para o final de 2026.
Para ir mais longe no email, consulte o nosso artigo sobre as técnicas de codificação de emails acessíveis e o dedicado à acessibilidade dos emails.
SEO e Google Imagens
A Abondance inclui a indexação das imagens entre as razões para escrever um alt cuidado e apoia-se no Google Search Central, na especificação WHATWG e na MDN. Nenhuma fonte consultada quantifica um ganho de posição atribuível ao atributo: encher de palavras-chave não traz nada e prejudica a leitura com leitor de ecrã. Numa newsletter, o efeito SEO é desprezável, já que a mensagem não é uma página indexada, salvo se a publicar em versão web. Num site, dê também ao ficheiro um nome de 2 a 4 palavras separadas por hífenes, por exemplo logo-captain-verify.png, como aconselha a Abondance.
Erros frequentes
- Omitir o atributo numa imagem decorativa em vez de escrever
alt="". - Começar por «imagem de» ou «fotografia de».
- Enfileirar palavras-chave (keyword stuffing) em vez de descrever a função da imagem.
- Copiar o mesmo alt para todas as imagens de um email.
- Deixar o texto importante apenas na imagem, sem equivalente em HTML.
- Escrever um alt mais longo do que a zona da imagem: em caso de bloqueio, pode ser cortado.
Texto alt em newsletters: imagens bloqueadas
Um site mostra quase sempre as suas imagens. Um email depende do cliente de correio de cada subscritor. É aqui que o alt se torna uma rede de segurança.
No seu guia sobre o bloqueio de imagens (publicado em 2017, atualizado a 17 de agosto de 2021), a Litmus aponta os clientes Outlook para computador como os principais bloqueadores. A maioria dos outros clientes mostra as imagens por predefinição, com a AOL como exceção. Os clientes móveis testados pela Litmus também as mostram: o subscritor tem de procurar nas definições para as desativar. O bloqueio diz respeito, portanto, sobretudo aos postos de trabalho com Outlook. A Microsoft configura o Outlook por predefinição para bloquear a transferência automática de imagens. O Gmail carrega-as automaticamente, segundo a ajuda da Google (opção Mostrar sempre imagens externas), exceto se a mensagem ou o remetente parecerem suspeitos ou se o utilizador tiver pedido uma confirmação prévia.
O peso destes subscritores depende do seu público. A Litmus cita o Email Client Market Share: o Outlook ocupa o 4.º lugar entre os clientes de correio, com 6 % das aberturas. A Litmus acrescenta que este valor pode estar subestimado, porque o Outlook bloqueia por predefinição o pixel de rastreio e essas aberturas não são contabilizadas. Uma base B2B tem boas hipóteses de incluir mais, segundo a Litmus.
A captura mostra a falha típica: à esquerda, só a imagem do cabeçalho apresenta um texto alternativo, minúsculo. As imagens dos blocos abaixo ficam vazias. A Litmus esclarece que, no Outlook para computador, o alt só aparece depois da faixa de aviso e apenas se as imagens estiverem desativadas. Uma imagem quebrada não mostra nada.
Alt com estilo: que clientes o mostram?
O Gmail, o Outlook.com e o Apple Mail apresentam o alt com estilo; o Outlook para computador 2007-2019 não. O Yahoo! Mail em webmail não mostra nenhum alt, segundo a tabela da Litmus (atualizada em 2021). O alt formata-se com um estilo inline na tag <img>, por exemplo a cor e o tamanho do texto.
<img src="botao.png" alt="Transferir o guia" width="200" height="50" style="color:#0b5cad; font-size:16px; font-family:Arial, sans-serif;">
| Cliente | Alt com estilo | A saber |
|---|---|---|
| Gmail | Sim | Imagens mostradas por predefinição (ajuda do Gmail) |
| Outlook.com | Sim | Webmail, distinto do Outlook para computador |
| Apple Mail | Sim | Testado pela Litmus |
| Outlook para Mac | Sim | Distinto do Outlook para Windows |
| Outlook para computador 2007-2019 | Não | Alt simples, apenas com as imagens desativadas |
| Yahoo! Mail (webmail) | Não | Nenhum alt apresentado, segundo a Litmus |
A Litmus esclarece que o bloqueio por predefinição do Outlook para computador vem dos seus testes com o Outlook 2016, sem nova verificação desde então. Volte a fazer um teste de renderização antes de construir um email com base nesta tabela.
Botão bulletproof em vez de CTA em imagem
Um botão bulletproof é um botão construído em HTML e CSS: uma célula de tabela colorida que contém uma ligação em texto verdadeiro. Continua visível e clicável com as imagens desativadas, ao contrário de um botão em imagem, que desaparece ou se reduz ao seu alt. O Outlook para computador renderiza o HTML com o motor do Word desde o Outlook 2007, como indica a documentação da Microsoft. Para essas versões, alguns modelos de botão acrescentam um fragmento VML (Vector Markup Language), não detalhado aqui.
<table role="presentation" cellspacing="0" cellpadding="0"><tr>
<td bgcolor="#0b5cad" style="border-radius:4px;">
<a href="https://exemplo.com/guia" style="display:inline-block; padding:12px 24px; color:#ffffff; font-family:Arial, sans-serif; text-decoration:none;">Transferir o guia</a>
</td></tr></table>O código acima dá um botão com 12 px de preenchimento vertical e 24 px horizontal, em #0b5cad com texto branco #ffffff. O mesmo princípio vale para qualquer texto importante (título, oferta, data, ligação de cancelamento da subscrição): em HTML, não numa imagem. Uma ligação de ação como o botão «adicionar ao calendário» tem de continuar legível sem imagem. Um email todo em imagem aparece quase vazio no Outlook para computador enquanto o subscritor não transferir nada. A Litmus recomenda manter o texto e os botões em HTML: o teste que conta continua a ser a legibilidade sem imagem.
Mantenha também uma versão em texto simples coerente e vigie o peso das imagens, que influencia a visualização dos subscritores com ligação lenta.
Testar com as imagens desativadas
No Gmail, abra Definições > Ver todas as definições, desça até à secção Imagens e selecione Perguntar antes de mostrar imagens externas. Clique em Guardar alterações no fundo da página e volte a abrir o seu envio. No Outlook para computador, o bloqueio está ativo por predefinição; caso contrário, abra Ficheiro > Opções > Centro de Fidedignidade > Definições do Centro de Fidedignidade e selecione «Não transferir automaticamente imagens em mensagens de e-mail HTML nem em itens RSS». Complete com uma ferramenta de pré-visualização de emails.
Verifique se o botão principal continua legível e se cada alt faz sentido sozinho. Um texto alternativo cuidado não salva um email que ressalta: passe também a lista por uma verificação de endereços antes do envio, para detetar os endereços inválidos.
