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.

Alternative Text on Images

Writing good descriptions

Follow these best practices to write good alternative text descriptions for your images:

  • Describe the image based on the page context. Convey the full meaning of the image.
  • Avoid saying "image of" or "picture of". Screen readers automatically announce images as images.
  • Be concise.
  • Write narratives for complex images like infographics. Put this narrative on the page immediately following the infographic. Include an anchor link at the top of the page to view the text alternative. See an example of an infographic with a text alternative.
  • Avoid images of text. If you can't avoid it, copy the text into the alternative description.
  • Say something new. Don't repeat alternative descriptions on the same page. Don't repeat what is already said on the page.
  • Identify images that don't represent relevant content as decorative.

What is a decorative image?

An image is decorative when it doesn't add to the information on the page. For example, art work used to separate topics or a photo of someone on the phone when discussing communication skills.

They are valuable in their visual appeal but may not need to be read by screen readers.

More on decorative images on the web accessibility initiative website

Why are alternative image descriptions important?

There are many reasons to use alternative descriptions with your images.

  • Alternative descriptions, or text, are in the WCAG 2.2 guidelines
  • Students can search for an image
  • Students with visual impairments have difficulty perceiving images
  • Student with a poor network connection may have difficulty perceiving images
  • Screen readers can't read images
  • Some students learn better from descriptions than images
  • Text scales better than most images when the screen or page is enlarged

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.