O uso correto do atributo HTML alt nas imagens

Muitas vezes quem trabalha com SEO (Search Engine Optimization) sabe que o atributo HTML alt é importante na tag “img”, de imagem. Além disso, ela também é importante para melhorar a usabilidade de um web site. Sabia que usá-lo de forma desordenada ou excessiva é prejudicial em se tratando da acessibilidade do site a cegos?

Para que serve o HTML ALT

ALT vem de “alternate” do inglês. Ou seja, é uma alternativa ao conteúdo que está sendo exibido na imagem.

Ele serve para:

1. Descrever em texto uma orientação sobre a imagem que não está sendo exibida;
2. Sistemas de busca entenderem do que ela se trata e isso auxiliar a indexar a página;
3. Leitores de tela em áudio especificarem do que ela se trata (isso inclui ferramentas que cegos usam para navegar na web — Caso queira saber mais sobre leitores de tela de computador, recomendo que veja este artigo “6 leitores de tela para seu computador”.)

Exemplo

Fiz uma assinatura de e-mail responsiva para um cliente, usando imagens + texto. Veja ela com as imagens aparecendo normalmente:

Agora, veja como ela aparece quando as imagens não são carregadas, por um problema no servidor, bloqueio de imagem, falta de conexão à internet etc:

Ei! Por acaso você quer aprender a atender online? Baixe o meu e-book Gratuito para saber como começar a fazer atendimentos, consultas, consultorias, aulas, vendas etc na internet: Clique/toque aqui!

Para que a informação do nome não fosse perdida na assinatura do e-mail, inseri o texto “Dr. Paulo Cezar Maldonado” no alt da imagem que exibe o nome dele. Assim, o nome dele como texto alternativo, é exibido na ausência da imagem e também pode ser interpretado por programas leitores de tela.

Embora o tamanho de algumas imagens seja pequena e não dê para ler o alt delas, programas leitores de tela em voz configurados para isso, leriam “Dr. Paulo Cezar Maldonado” com ou sem um problema de exibição da imagem .

Também, em um site, o Google indexaria a página para aparecer em buscas por “Dr. Paulo Cezar Maldonado”, o que auxiliaria no SEO.

Note que propositalmente não coloquei um alt no símbolo da marca à esquerda.
Por quê? Ele é desnecessário.

Você acharia relevante ouvir uma descrição dizendo “marca” ou mesmo indexar essa palavra em uma página na web?

Isso nos leva ao próximo tópico.

Como usar corretamente o ALT em imagens

Todas as imagens devem ter um atributo alt declarado. Isso é indicado semanticamente pelo HTML e para melhorar a usabilidade dos usuários dos leitores digitais em áudio. Mas IMPORTANTE: Declarar um atributo é diferente de preenchê-lo.

Exemplos de um HTML de imagem:

Exemplo 1 (Certo!): Com alt declarado e preenchido de vazio

<img src=”marca-nome-dr-paulo-cezar-maldonado.gif” alt=” “ />

Exemplo 2 (Certo!): Com alt declarado e preenchido

<img src=”marca-nome-dr-paulo-cezar-maldonado.gif” alt=”Dr. Paulo Cezar Maldonado” />

Exemplo 3 (ERRADO):  Com alt declarado, mas nulo

<img src=”marca-nome-dr-paulo-cezar-maldonado.gif” alt=”” />

Exemplo 4 (ERRADO): Sem alt declarado

<img src=”marca-nome-dr-paulo-cezar-maldonado.gif” />

Entenda por que declarar o alt preenchido de vazio

Leia esse trecho de uma palestra (2) sobre acessibilidade para cegos nas páginas web:

O atributo de imagem “ALT” tem de ser utilizado com bom senso e a partir da seguinte idéia: tudo que for escrito nele será ouvido a toda hora que o leitor de tela passar por ele. Dessa forma, imagens que não tenham função, que só sirvam de decoração na tela, como imagens de linhas horizontais, bolinhas e quadradinhos decorativos e coloridos, enquadramentos, deverão vir com o “ALT vazio”, ou seja, com um espaço entre as aspas. Isso é diferente do “ALT nulo”, que é um alt com “”, ou seja, sem espaço entre as aspas. Como o nome já diz, o “alt nulo” é como se não existisse alt e o “alt vazio” é um alt com conteúdo, porém vazio.

Essa pequena diferença altera a leitura que o leitor de tela faz. Com o “alt vazio ele não lê absolutamente nada, enquanto com ele nulo alguns leitores procuram ler o conteúdo do atributo src, ou seja, tentam ler o nome da imagem.

Fonte: Como Fazer Acessibilidade nas páginas da WEB., Marco Antonio de Queiroz – MAQ, 29/08/2002 http://www.bengalalegal.com/acesso

Quando preencher o atributo HTML alt de texto

Se todos os itens abaixo forem verdadeiros no seu caso, preencha o atributo alt da imagem com uma descrição curta e clara do que ela representa:

1. Não é um ornamento meramente estético
2. A ausência da imagem faz o conteúdo ficar menos compreensível e completo
3. A imagem contém um texto que está unicamente nela (neste caso, o ideal é você transcrever resumidamente o texto pra dentro do alt)

Caso não sejam os casos acima, lembre de sempre declarar o atributo HTML alt preenchido com um espaço vazio, assim:

alt=” “

Dica: Destaque todas as imagens sem o HTML alt!

Ricardo Sanches publicou um vídeo com código para automaticamente colocar bordas vermelhas nas imagens sem alt e você lembrar de declará-las no HTML! Veja:

Referências

1. “HTML <img> alt Attribute” (em inglês) https://www.w3schools.com/tags/att_img_alt.asp
2. “Como Fazer Acessibilidade nas páginas da WEB” http://www.bengalalegal.com/acesso
3. “Você nunca mais vai esquecer do ALT” https://www.portalgsti.com.br/2018/01/voce-nunca-mais-vai-esquecer-do-alt.html