Adicionar texto alternativo a imagens

Adicione uma descrição detalhada a imagens e gráficos para melhorar a compreensão

Imagens podem ser uma ótima maneira de envolver os alunos, além de ajudar a comunicar ideias complexas.

As descrições de imagens são chamadas frequentemente de “descrições alternativas”, “texto alternativo” e “texto alt”. As descrições de imagem fornecem uma alternativa baseada em texto descritivo para a imagem.Para alunos com deficiência visual, descrições de imagens que explicam o conteúdo de uma imagem são fundamentais para seu aprendizado. Para todos os alunos, as descrições podem proporcionar um contexto mais profundo e auxiliar na compreensão.

O Ally verifica se há descrições de imagens em todos os lugares em que há uma imagem. O Ally verifica imagens em uma página da web ou em um arquivo anexado.

O Ally classifica os problemas como grave, importante e pequeno.

  • Grave. Estes problemas são o maior risco à acessibilidade e precisam de mais atenção.
  • Grande. Estes problemas afetam a acessibilidade e, embora não sejam graves, precisam de atenção.
  • Pequeno. Estes problemas devem ser levados em consideração para uma melhor pontuação de acessibilidade.

Imagens sem texto alternativo é um problema importante.

Use o Ally para encontrar imagens sem descrições

Use o relatório de acessibilidade do Ally para descobrir e corrigir os problemas de acessibilidade no seu site. Use o link fornecido para o relatório e faça login. Abra o relatório e veja a lista de problemas na tabela Problemas de acessibilidade.

A tabela Problemas de acessibilidade está nas guias Visão geral e Domínio. Comece na guia Domínio para ver os problemas específicos de um domínio. 

É um problema importante ter imagens sem texto alternativo ou descrições. Use a guia Importante na tabela Problemas de acessibilidade para visualizar a lista com os principais problemas. Selecione os problemas em que as imagens não possuem descrições.

Se você começar pela guia Visão geral, selecione o problema e, em seguida, o domínio com o problema.

Os problemas de descrição da imagem podem começar com imagem, documento ou HTML na lista.

Na lista de problemas de descrição de imagem no domínio, selecione o indicador de pontuação ao lado de um item com o problema. O painel de comentários do editor de conteúdo é aberto.

Visualizar as imagens sem descrições

O painel de comentários do Ally mostra uma visualização do conteúdo, bem como comentários detalhados e suporte para ajudar você a corrigir seus problemas de acessibilidade. Use a visualização para ver as imagens sem descrições.

A visualização destaca em qual lugar do documento os problemas específicos de acessibilidade podem ser encontrados. Os destaques exibem todas as ocorrências de um tipo de problema por vez. Por exemplo, se nas suas imagens estão faltando descrições alternativas, os destaques indicam cada lugar em que esse problema específico ocorre.

Ferramentas de visualização

Use as ferramentas acima da visualização para explorar os problemas de seu documento.

  • Navegue pela visualização do documento página por página.
  • Veja quantas vezes um problema específico aparece no documento.
  • Alterne entre os destaques do problema.
  • Oculte ou exiba os destaques.
  • Aumente ou diminua o zoom do conteúdo da visualização.
  • Se o problema estiver em um documento anexado, faça o download do arquivo original.

Siga as etapas guiadas do Ally para adicionar descrições de imagem

O Ally pressupõe que você tenha conhecimento básico de HTML e de como usar o sistema de gerenciamento de conteúdo (CMS). Para seguir as etapas guiadas, você precisa saber como editar uma página da web em HTML ou código-fonte no seu CMS.

Junto com a visualização, o Ally oferece uma orientação passo a passo sobre como corrigir o problema.  O Ally organiza esses comentários em uma árvore de decisão. Tudo o que você precisa fazer é ler as orientações e responder às solicitações. Descubra o que é o problema, por que ele é importante e como corrigi-lo adequadamente.

Selecione Como adicionar descrições para seguir as etapas guiadas.

Texto alternativo em imagens

Escrevendo boas descrições

Siga essas práticas recomendadas para escrever boas descrições alternativas de texto para suas imagens:

  • Descreva a imagem com base no contexto da página. Transmita todo o sentido da imagem.
  • Evite dizer “imagem de” ou “foto de”. Leitores de tela anunciam automaticamente as imagens como imagens.
  • Seja conciso.
  • Escreva narrativas para imagens complexas, como infográficos. Coloque essa narrativa na página imediatamente após o infográfico. Inclua um link de âncora na parte superior da página para visualizar o texto alternativo. Veja um exemplo de um infográfico com um texto alternativo.
  • Evite imagens com texto. Se não puder evitar, copie o texto na descrição alternativa.
  • Diga algo novo. Não repita descrições alternativas na mesma página. Não repita o que já foi dito na página.
  • Identifique as imagens que não representam conteúdos relevantes como decorativas.

O que é uma imagem decorativa?

Uma imagem é decorativa quando ela não adiciona informações na página. Por exemplo, obras de arte usadas para separar tópicos ou uma foto de alguém ao telefone durante uma discussão sobre habilidades de comunicação.

Elas são valiosas por seu apelo visual, mas não precisam ser lidas por leitores de tela.

Saiba mais sobre imagens decorativas no site de iniciativa de acessibilidade da Web


Por que as descrições alternativas de imagens são importantes?

Existem muitos motivos para utilizar descrições alternativas em suas imagens.

  • Descrições alternativas, ou texto, estão nas diretrizes WCAG 2.2
  • Os alunos podem pesquisar uma imagem
  • Alunos com deficiência visual têm dificuldade para perceber imagens
  • Alunos com conexões de rede fracas podem ter dificuldade para perceber imagens
  • Leitores de tela não conseguem ler imagens
  • Alguns alunos aprendem melhor com descrições do que com imagens
  • O texto fica mais bem dimensionado do que a maioria das imagens quando a tela ou a página é ampliada

Maneiras de adicionar descrições de imagem em páginas da web

Há mais de uma maneira de adicionar ou editar descrições de imagem em suas páginas da web.

  • HTML: As etapas guiadas do Ally orientam como encontrar e editar descrições de imagem em HTML. Basicamente, encontre a página da web com a imagem. Edite a página. Atualize o código HTML da imagem para incluir um atributo de texto alt. Salve a página.
  • Configurações de imagem: A maioria dos CMS oferece uma maneira de editar o texto alternativo nas configurações da imagem. Encontre a imagem na página da web ou no repositório de arquivos CMS. Use as ferramentas do CMS para editar a imagem. Adicione a descrição da imagem no campo texto alternativo ou texto alt. Salve a imagem.

Visite w3schools para saber mais sobre HTML e CSS

Por que não vejo "img src" em meu HTML?

A maneira mais comum de adicionar imagens a uma página da Web é com o atributo HTML img src. Img src é um atributo HTML que usa a URL do arquivo de imagem para colocá-la na página da Web. Mas cada CMS é diferente. Seu site pode usar códigos ou atributos diferentes. 

Por exemplo, no Drupal, você pode ver algo deste tipo:

<drupal-entity data-embed-button="media_browser" data-entity-embed-display="view_mode:media.embedded" data-entity-type="media" data-entity-uuid="2961e3a2-8fbe-4e3f-baeb-953d69f70750"></drupal-entity>

Adicione o texto "alt" ao início do atributo. Por exemplo,

<drupal-entity alt="add image description here" data-embed-button="media_browser" data-entity-embed-display="view_mode:media.embedded" data-entity-embed-display-settings="" data-entity-type="media" data-entity-uuid="2961e3a2-8fbe-4e3f-baeb-953d69f70750"></drupal-entity>

Se você não vir img src no HTML, tente usar as ferramentas do CMS para editar as configurações da imagem. Encontre a imagem na página da web ou no repositório de arquivos CMS. Use as ferramentas do CMS para abrir as configurações da imagem. Adicione a descrição da imagem no campo texto alternativo ou texto alt. Salve a imagem.

Se você ainda não souber como continuar, entre em contato com o administrador ou desenvolvedor do site da web. Peça-lhe para mostrar como as imagens são adicionadas às suas páginas da web e como adicionar texto alternativo.