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 expliquem o conteúdo de uma imagem são cruciais para seu aprendizagem. 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. Essas questões representam o maior risco para a acessibilidade e exigem mais atenção.
Grande. Estes problemas afetam a acessibilidade e, embora não sejam graves, requerem 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 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.
Dica
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 aba Importante na tabela Questões de Acessibilidade para visualizar a lista de questões principais. Selecione os problemas em que as imagens não têm descrições.
Dica
Se você começar pela guia Visão geral, clique no problema e em seguida no domínio com o problema.
Dica
Os problemas de descrição da imagem podem começar com imagem, documento ou HTML na lista.
Na lista de edições de descrições de imagem no domínio, clique no indicador de pontuação ao lado de um item com o problema. O painel de comentários do editor de conteúdo se abre.
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 que pontos 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 do seu documento.
Navegue pela visualização do documento página por página.
Veja quantas vezes um problema específico é exibido 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, baixe o arquivo original.
Siga as etapas orientadas do Ally para adicionar descrições de imagem
Importante
O Ally pressupõe que você tenha conhecimento básico de HTML e de como utilizar o sistema de gerenciamento de conteúdo (CMS). Para seguir as etapas orientadas, você precisa saber como editar uma página 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.
Clique em Como adicionar descrições para seguir as etapas orientadas.
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.
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 utilizadas 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.
Por que as descrições alternativas de imagens são importantes?
Existem muitos motivos para utilizar descrições alternativas nas suas imagens.
Descrições alternativas ou texto podem ser encontradas 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 leem 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 a suas páginas da web.
HTML: Os passos orientados do Ally guiam o usuário sobre como encontrar e editar descrições de imagens 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 forma de editar texto alternativo nas configurações de 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.
Dica
Visite w3schools para saber mais sobre HTML e CSS
Por que não vejo "img src" em meu HTML?
A forma mais comum de adicionar imagens a uma página web é com o atributo HTML img src. Img src é um atributo HTML que utiliza a URL do arquivo de imagem para posicionar a imagem na página web. Mas cada CMS é diferente. Seu site pode utilizar 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 utilizar as ferramentas 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 de CMS para abrir as configurações de 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.