Making It Descubra
Voltar

Compondo um texto alternativo para acessibilidade

Baixe nosso manual gratuito para criar o seu site com confiança.

O e-mail informado é inválido.

Obrigado por se cadastrar.

Texto alternativo é um texto curto e descritivo que explica aos usuários a finalidade de uma imagem, fotografia, ilustração, GIF ou outro conteúdo visual em uma página da web. Esse texto pode ser lido por aparelhos assistivos ou quando a imagem não carrega (devido à baixa largura de banda, por exemplo).

No site, o texto alternativo deixa vídeos, imagens, GIFs e ícones mais acessíveis a todos, sejam portadores de deficiência ou não.

São motivos para alguém precisar do texto alternativo:

  • Cegueira ou pouca visão

  • Iluminação brilhante

  • Deficiência auditiva

  • Ambiente barulhento

  • Internet lenta

Como compor um bom texto alternativo

A descrição das imagens deve ser de qualidade e de fácil compreensão pelo público. Ao compor um texto alternativo, confira as seguintes recomendações.

  1. Crie um texto bem escrito. Faça o possível para escrever frases completas; e siga as regras gramaticais. 

  2. Faça um texto curto. Recomendamos que ele tenha menos de 250 caracteres. Foque os detalhes contextuais mais importantes ao leitor, em vez de descrever a imagem em si.

  3. Seja descritivo. Dê as informações necessárias para entender a intenção da imagem. Ao incluir um link no texto, explique o motivo - "Confira nosso relatório" em vez de "Clique aqui".

  4. Considere as tecnologias alternativas. Pense em como a tecnologia assistiva funciona. Os aparelhos assistivos, por exemplo, já dizem “imagem de” antes de ler o texto alternativo. Portanto, os usuários do leitor de tela não precisam que você inclua esse termo. 

  5. Continue praticando. Crie o hábito de adicionar um texto alternativo as todas as imagens que você publicar. Quanto mais você praticar, mais rápido e melhor descreverá o conteúdo da imagem.

Por fim, evite usar IA para gerar um texto alternativo. Nesse ponto, os geradores de IA nem sempre identificam com precisão quais informações o leitor precisa saber sobre a imagem.

Conteúdo decorativo x conteúdo essencial

Você não precisa necessariamente escrever um texto alternativo para cada imagem no site. Para identificar quais imagens precisam de texto alternativo, veja quais imagens são decorativas e quais são essenciais.

O conteúdo decorativo é supérfluo para o entendimento ou o uso de uma página da web e, portanto, dispensa texto alternativo. Um divisor de seções, por exemplo, não precisa de texto alternativo. 

Conteúdo essencial é tudo necessário para entender ou usar uma página. Nesse caso, as imagens essenciais exigem um texto alternativo.

Um jeito fácil de diferenciar os dois tipos de imagem é perguntar: “Se eu retirar da página, o significado da página muda?” 

Nome do arquivo

No caso do nome dos arquivos, siga também as recomendações para o texto alternativo da imagem. Para ser acessível, o nome do arquivo deve descrever a imagem anexa. Ele não pode ser vago nem gerado automaticamente. Por exemplo: use “PessoaComendoUva.jpg” em vez de “IMG4729.jpg”.

Isso traz mais duas vantagens: os arquivos de imagem ficam mais fáceis de organizar e mais bem configurados para SEO. Outra ótima forma de direcionar o tráfego dos buscadores para o seu site é aparecer na procura de imagens.

Exemplos de texto alternativo de imagem

Atenção: este guia é um recurso introdutório, mas não deve ser interpretado nem considerado aconselhamento jurídico. O Squarespace não pode dar conselhos sobre o cumprimento de nenhuma lei, regulação ou padrão relativa à acessibilidade

Confira dois exemplos eficazes de texto alternativo para imagens. Note que o texto alternativo depende do contexto - na mesma foto, ele pode servir em uma situação e não necessariamente em outra.

Imagine que essa foto apareceu em um artigo sobre tipos básicos de câmera. Nesse contexto, um bom texto alternativo para a imagem pode ser: “Câmera DSLR e lente em um estojo aberto”.

No mesmo contexto, um exemplo de texto alternativo que precisa ser melhorado seria: “Imagem de uma câmera em fundo cinza”. 

Esse exemplo usa “imagem de”, mas os aparelhos assistivos já mencionam esse termo antes de lerem o texto alternativo. Além disso, não há detalhes importantes sobre a câmera nem outros objetos na imagem que seriam úteis para quem esteja lendo sobre os tipos de câmera.

Um bom exemplo de texto alternativo para essa imagem pode ser: “Conjunto de envelopes coloridos para carta”

Se essa imagem for usada para dividir visualmente a página, sem adicionar nenhuma informação necessária, você pode pular o texto alternativo para ela.

Confira outras orientações na nossa página de acessibilidade

Como deixar acessível uma imagem complexa

O texto alternativo é útil e necessário, mas às vezes é difícil encaixar todas as informações essenciais em até 250 caracteres. Esse é o caso específico de imagens mais complexas, como tabelas, gráficos, infográficos e vídeos longos, que podem precisar de uma descrição muito mais longa para transmitir as informações mais importantes.

Nesses casos:

  • Descreva detalhadamente o conteúdo no corpo do texto. Faça uma descrição mais longa da imagem, destacando os principais pontos, e coloque em contexto. No texto alternativo, você pode adicionar uma breve descrição e adicionar um parágrafo com uma descrição mais longa ao lado ou abaixo da imagem.

  • Use uma legenda na imagem. Adicione à imagem uma legenda visível, que explique os detalhes e o contexto da imagem.

O texto alternativo e a acessibilidade na web são essenciais - não são meros “acessórios” para o seu site. Quanto mais acessível for o site, mais visitantes poderão usá-lo, independentemente das circunstâncias. 

Confira nosso guia completo de acessibilidade na web

Artigos relacionados

  1. Descubra

    5 formas de deixar seu site mais acessível

    5 formas de deixar seu site mais acessível

  2. Descubra

    Um guia para acessibilidade de sites

    Um guia para acessibilidade de sites

Assine

Cadastre-se para receber as últimas publicações do blog MAKING IT, além de atualizações, promoções e parcerias do Squarespace.

O e-mail informado é inválido.

Obrigado por se cadastrar.