Alt text

O que é alt text?

Alt text pode ser definido como uma breve descrição em texto que funciona como substituto de conteúdo não textual ou parte incorporada de programação HTML que transmite o significado e o contexto de um item visual (imagem ou gráfico) no ambiente digital, como em sites, arquivos PDF ou aplicativos.

Originalmente, o atributo alt text foi desenvolvido para melhorar a experiência de navegação de deficientes visuais na Internet, possibilitando que os leitores de tela descrevessem a finalidade e a aparência de uma imagem ou gráfico. Essa ainda é a principal função do alt text.

Atualmente, esse atributo também possibilita o reconhecimento preciso das imagens de um site para que elas sejam exibidas como resultados de pesquisa apropriados pelos mecanismos de busca.

O atributo alt text é o texto que aparece quando o usuário passa o mouse sobre uma imagem ou ativo digital.

Alguns sinônimos para o termo alt text são:

• descrição alternativa
• atributo alt
• alt tag

Importância do alt text

Um alt text bem escrito e detalhado reduz drasticamente a ambiguidade e melhora a experiência do usuário. Alguns benefícios de incluir o atributo alt text em documentos digitais e sites são os seguintes:

1. Melhoria da acessibilidade digital:

a inclusão de um atributo alt text preciso e abrangente em conteúdos digitais (imagens, gráficos, entre outros) garante sua acessibilidade a todos os usuários, independentemente de suas limitações visuais.

O alt text também é exibido pelos navegadores no lugar das imagens se elas não forem carregadas corretamente ou se o usuário tiver bloqueado a exibição de mídias. No exemplo abaixo, um alt text descritivo é mostrado para substituir uma imagem que não foi carregada:

2. SEO aprimorado: embora a tecnologia dos mecanismos de busca tenha melhorado drasticamente ao longo dos anos, os chamados crawlers de pesquisa ainda não conseguem visualizar as imagens da mesma forma que os humanos. Adicionar uma frase contendo uma palavra-chave ao alt text:

Ajuda as imagens e os gráficos a atingirem classificações melhores nos resultados de pesquisa orgânica;

Ajuda os documentos digitais, como PDFs, a atingirem classificações melhores do que aqueles sem o atributo alt text.

Atingir melhores classificações de pesquisa e imagem pode ajudar a atrair mais tráfego vindo de mecanismos de busca, como Google e Bing.

3. Melhoria da experiência geral do usuário: para todas as organizações, é importante fornecer a melhor experiência aos usuários que visitam seus sites. A inclusão do atributo alt text em imagens, gráficos e documentos para detalhar o contexto visual assegura uma interação relevante com o usuário, melhorando assim sua experiência geral.

Como escrever um bom alt text

Escrever um bom alt text é uma verdadeira arte. Estes são os fatores necessários para dominar a arte de escrever um alt text com precisão:

1. Seja específico: o alt text foi criado, principalmente, para descrever, em formato de texto, as imagens que os usuários não conseguem visualizar. Portanto, é importante manter seu conteúdo relevante. Uma das melhores abordagens é pensar em como você descreveria a imagem em poucas palavras a alguém pelo telefone e, em seguida, criar o alt text baseado nessa descrição.
2. Seja conciso: o uso de algumas palavras costuma ser suficiente. No entanto, às vezes, é necessário usar frases completas. Lembre-se de que os leitores de tela mais populares limitam o alt text a cerca de 125 caracteres, portanto, o ideal é permanecer dentro dessa contagem.
3. Use palavras-chave: uma boa prática é incluir uma ou duas palavras-chave no alt text. Assim, você sinaliza aos mecanismos de busca que sua página é altamente relevante para uma determinada pesquisa.
4. Evite o excesso de palavras-chave: é recomendável evitar o excesso de palavras-chave, pois o Google pode reconhecer o uso exagerado e atribuir uma classificação mais baixa à imagem nos resultados de pesquisa.
5. Não use imagens como texto: uma sugestão geral de SEO para desenvolvimento web é evitar o uso de imagens no lugar de palavras. Se for realmente necessário usar uma imagem como texto, explique o que está escrito nela por meio do atributo alt text.
6. Evite usar “imagem de”, “foto de” etc.: o alt text sempre se refere a uma imagem, portanto, não há necessidade de especificar isso.
7. Inclua a tag longdesc=””: inclua a tag longdesc=”” nos casos de imagens mais complexas que exijam uma descrição mais longa.
8. Não ignore botões de formulário: se um formulário do site tiver botões com imagens, adicione um atributo alt que descreva as funções deles, como “pesquisar”, “candidatar-se agora”, “registrar-se”, entre outras.

Exemplos de alt text usado corretamente

Vamos analisar alguns exemplos da Moz de como usar corretamente o alt text:

Alt text adequado: <img src=”galo.png” alt=”Galo”>

Alt text melhorado: <img src=”galo.png” alt=”Galo cantando”>

Melhor alt text: <img src=”galo.png” alt=”Galo de crista vermelha cantando”>

Alt text adequado: <img src=”escada.jpg” alt=”Homem na escada rolante”>

Alt text melhorado: <img src=”escada.jpg” alt=”Homem andando na escada rolante”>

Melhor alt text: <img src=”escada.jpg” alt=”Homem com mochila nas costas descendo escada rolante”>

Quando usar alt text

É importante adicionar o atributo alt text aos seguintes ativos digitais:

• Imagens e fotos
• Diagramas, fluxogramas e gráficos
• Vídeos

Quando não usar alt text

Em alguns casos, não é necessário incluir o alt text. Por exemplo:

• Recursos visuais decorativos, como as bordas decorativas de um site

Como adicionar alt text a um documento da Microsoft

Aprenda aqui a adicionar o atributo alt text aos documentos da Microsoft, como Outlook, Word, Excel e PowerPoint.

Como adicionar alt text a objetos no WordPress

Siga estas instruções para adicionar alt text em um CMS como o WordPress.