Como fazer descrição de imagens?

Reunimos uma série de dicas para você colocar em prática


Arte com fundo rosa degradê e a mão de uma pessoa com área branca retangular com a palavra "Dicas" na cor rosa. Na parte superior, há o logo do WPT e a marca da campanha #ImagensQuefalam.
Reunimos todas as dicas em uma única nota para facilitar sua vida na hora de descrever imagens. Arte: Movimento Web para Todos.

Você começou a descrever as imagens das suas redes sociais ou do seu site, mas está com dúvidas, travou e não sabe como continuar? Para facilitar esse processo, reunimos diversas dicas para você. 

E para quem já descreve imagens, mas tem dúvidas pontuais, este material será bastante útil também. Descrição de gráficos, GIFs, o que precisa de descrição ou não, expressão “fim da descrição”, tudo isso e muito mais está neste conteúdo que preparamos. 

Essa iniciativa faz parte da nossa campanha #ImagensQueFalam, que busca incentivar a prática da descrição de imagens na web. É um critério de acessibilidade digital que é relativamente simples e rápido de ser resolvido e que impacta diretamente a vida de cerca de sete milhões de brasileiros com cegueira ou baixa visão que dependem do leitor de telas para navegação. 

Dica 1 | Aprenda a fórmula simplificada 

Quer começar a descrever imagens e não sabe por onde começar? A gente te dá aquele empurrãozinho inicial! Trouxemos aqui uma fórmula simplificada (com quatro passos) para ajudar você nessa tarefa: Formato + Sujeito + Paisagem + Ação.

1) Formato: conte se é uma foto, ilustração, arte, GIF, álbum de fotos ou algum outro específico;

2️) Sujeito: quem é o “personagem” principal da imagem? É uma pessoa adulta, uma criança, um cachorro ou um objeto?;

3) Paisagem: contextualize a cena da imagem. Ela acontece onde? É o interior de um lugar ou uma área externa? É em uma rua, num jardim, no escritório? Quais cores são evidenciadas e em qual posição?

4) Ação: descreva qual é a ação. Faz o quê? Está como? Lembre-se de usar verbo no presente.

Separamos também algumas sugestões para situações específicas. Confira: 

Como fica a descrição da imagem quando o texto da legenda é grande?

Um dos caminhos é você reduzir o texto para incluir a descrição aberta. Outra possibilidade é, sempre que possível, incluir a informação da imagem ao longo do próprio texto do post e deixar o detalhamento para o ALT. É bom lembrar que cada rede conta com um limite específico de caracteres, o que pode limitar o detalhamento das descrições (sejam elas abertas ou inseridas no ALT).  

Como fica a descrição da imagem quando é um post no formato carrossel de imagens? 

O carrossel conta com as artes com a mesma identidade visual e o que muda é o conteúdo do texto? Uma sugestão é fazer a descrição aberta na legenda do post com as informações mais gerais e no ALT você detalha os textos que existem em cada uma das artes. Assim você compartilha o conteúdo para todas as pessoas e deixa de forma mais detalhada no texto alternativo. Outro caminho é incluir, quando possível, as informações das artes no próprio texto do post, fazer uma descrição curta e detalhar as informações de cada arte no seu respectivo ALT. 

Dica 2 | Faça formulários acessíveis 

Mais da metade (55%) dos 14,65 milhões de sites ativos no Brasil apresenta problemas em formulários, segundo nosso último estudo de acessibilidade.

Esse tipo de barreira dificulta muito o acesso de pessoas cegas, com baixa visão e também de pessoas com mobilidade reduzida que não conseguem navegar com o auxílio do mouse.

Você, que trabalha no desenvolvimento da página, bora aprender a eliminar essa barreira tão comum?

  • Garanta que o texto que vem ao lado do campo, conhecido como rótulo, esteja relacionado com seu respectivo campo.
  • Lembre-se de relacionar os rótulos com os campos também em “radiobox” e “checkbox”. Esses são aqueles elementos pequenos para acionar opções em lista.
  • Se os formulários forem grandes, utilize elementos para agrupá-los.

Se quiser conhecer mais detalhes sobre como fazer formulários acessíveis, é só acessar o nosso site na matéria Aprenda a fazer um site acessível desde o começo – Parte 3

Dica 3 | Use leitor de telas e teste a acessibilidade dos sites 

Que tal experimentar, na prática, como se dá a navegação das pessoas cegas e com baixa visão nos sites e aplicativos?

Sugerimos que você instale um leitor de tela no seu computador ou acione o sistema de leitura nativo do seu celular (Voice Over, nos aparelhos IOS; e Talkback, nos celulares Android).

Você terá uma percepção muito melhor dos tipos de barreiras que elas encontram na web. Durante a navegação, preste bastante atenção na descrição de cada imagem e botões do site.

Perceba como foi sua experiência, se conseguiu compreender as fotos e ilustrações, e, por exemplo, se conseguiria comprar um produto só ouvindo a narração.

Conheça os tipos de leitores de telas e escolha um no nosso site para baixar

Dica 4 | Descreva as cores das imagens 

Devo mencionar cores para descrever imagens? A resposta é sim! Isso porque as pessoas com deficiência visual – de nascença ou não – têm suas próprias referências cromáticas. Só porque muitos não interpretam as cores do mesmo jeito que os videntes, não quer dizer que não as imaginem.

E não é só por isso… muitas pessoas que não enxergam hoje possuem referências anteriores a uma eventual perda da visão.

Pense também em quem tem baixa visão e daltonismo – elas enxergam as cores, mas de maneira diferente. Então, por que privá-las dessa informação?

Descreva as cores e elimine de uma só vez duas barreiras recorrentes de acessibilidade: a comunicacional e a atitudinal.

Dica 5 | Quando devo ou não descrever uma imagem?

Essa é uma dúvida bastante comum.

O raciocínio é simples: se ela transmite alguma informação, é preciso descrevê-la. Dessa forma, pessoas cegas ou com baixa visão que navegam pelo leitor de tela poderão compreender o conteúdo que ela traz!

Fotos, gráficos, mapas, organogramas, ícones que substituem botões ou links, e ilustrações são alguns exemplos de imagens de conteúdo informativo – e que, por isso, precisam ser descritas.

Quando não é preciso descrever? Se a imagem é meramente decorativa e não traz nenhum conteúdo relevante para o contexto. Neste caso, ela será ignorada pelo leitor de tela, tornando a experiência de navegação mais fluida e focada no conteúdo relevante.

Bora praticar? Aprenda mais sobre descrição de imagens no nosso site

Dica 6 | Lembre-se de descrever GIFs e figurinhas 

Cada vez mais as animações em GIF e as famosas figurinhas do WhatsApp, também chamadas de stickers, fazem parte da nossa comunicação online. E aí vem a dúvida: como descrevê-los?

Não há mistério, pessoal! As regras são basicamente as mesmas, a começar pela descrição do elemento central da imagem/animação: o que é, o que faz, de que forma. Daí é só partir para a descrição de eventuais elementos secundários (geralmente logotipos, objetos de fundo e até mesmo textos de apoio à mensagem principal).

Ah, aqui fica uma dica importante: para GIFs com muito conteúdo em texto, vale fazer a descrição por frame. É o caso de animações promocionais e posts informativos sobre inscrições e datas de eventos, divulgação de produtos etc.

Mas se a animação tiver muito texto e for usada para fins recreativos, vale apenas contextualizar o conteúdo de uma maneira sucinta.

Dica 7 | Aprenda como descrever gráficos 

Chega de passar sufoco na hora de descrever gráficos!

Vinícius Barqueiro, do Centro de Desenvolvimento de Ensino e Aprendizagem do Insper, traduziu e adaptou um artigo da designer americana Amy Cesal que ensina 4 passos para ajudar nesse “desafio”. São eles:

1. Informe qual é o tipo de gráfico;

2. Descreva o tipo de dado que é apresentado;

3. Reflita sobre o propósito do gráfico no contexto geral de onde está inserido;

4. Pense na possibilidade de incluir um link para uma tabela onde a pessoa possa explorar melhor os dados brutos, se desejar.

Acesse o artigo completo e aprenda com os exemplos que o Vinícius selecionou

Dica 8 | Usar ou não “fim da descrição”?

Você já deve ter visto em alguns perfis nas redes sociais a frase “fim da descrição” no final das legendas. Sabia que ela é desnecessária? A pessoa cega que estiver navegando com leitor de telas consegue saber quando terminou a descrição da imagem do post.

Para ir à parte dos comentários ou simplesmente curtir seu post, por exemplo, ela terá obrigatoriamente que dar novos comandos no software de leitura. Assim, ela sabe que o conteúdo da legenda já foi todo lido.

Para isso, é importante que você sempre posicione a descrição da imagem corretamente no final da legenda (texto da publicação), tá?

Dica 9 | Reveja as dicas e acesse os materiais do nosso site sempre que precisar

Você começou a descrever as imagens das suas redes sociais ou do seu site, mas está com dúvidas, travou e não sabe como continuar?

Para facilitar esse processo, temos, além da da nossa campanha #ImagensQueFalam, diversos conteúdos do site que abordam esse tema. Basta pesquisar na lupa pelo termo Descrição de imagem.

Dica 10 | Evite o uso de adjetivos nas descrições

Importante lembrete para você aplicar na hora em que estiver descrevendo uma imagem: evite usar adjetivos que possam conduzir a opinião do usuário, como bonito, feio, bom, mau etc.

Algo que é atrativo para você pode não ser para quem está lendo a sua descrição. Então, que tal deixar a pessoa decidir sobre isso?

DICA 11 | Inclua audiodescrição nos seus projetos

Você já tentou assistir a um comercial de TV de olhos fechados? Se ainda não fez, experimente agora!

Provavelmente, você não conseguiu captar todo conteúdo que foi exibido por meio das imagens, textos e outros elementos que possam ter aparecido visualmente na peça. Sabe por quê? Pela falta de um recurso de acessibilidade chamado audiodescrição.

Na prática, significa traduzir, em palavras, tudo que está acontecendo naquela determinada cena ou situação e que não é falado, ou narrado. Agora imagine o dia a dia de quem não enxerga. Anúncios de TV, passeios pelos museus para apreciar obras de arte, tudo que acontece no gramado durante as partidas de futebol, o cenário e expressões dos atores nas peças de teatro, aulas a distância, palestras…

Em todas essas e inúmeras outras situações do nosso cotidiano, para que as pessoas cegas e de baixa visão possam compreender o conteúdo que não é falado, é essencial que haja audiodescrição.

Agora que você já sabe disso, que tal conhecer um pouco mais sobre esse recurso e conferir outras dicas para incluir essa grande parcela da população na sua comunicação?

Dica 12 | Conheça e use os termos corretos

Portador de deficiência, pessoa com necessidades especiais, deficiente… Elimine essas e muitas outras expressões inadequadas do seu vocabulário inclusivo! Conhecer a história e entender os termos corretos relacionados ao universo da inclusão é um dos primeiros passos para a produção de um conteúdo verdadeiramente acessível.

Esse conhecimento vai fazer com que você acerte mais em textos, na descrição de imagens, na produção de artes, GIFs, vídeos etc.

Escolhemos este artigo do Rodrigo Mendes que explica, de uma maneira muito simples, quais termos são adequados para nos referirmos a quem tem algum tipo de deficiência.

Ele é fundador do Instituto Rodrigo Mendes, que é focado em educação inclusiva, e um dos nossos parceiros institucionais.

Dica 13 | Usar ALT ou hashtags inclusivas para descrever imagens?

Essa questão tem gerado muitas dúvidas. Pensando nisso, compartilhamos algumas dicas  para você entender o que diferencia esses dois recursos de acessibilidade.

O ALT é a abreviação de “Alternative Text”, em inglês, ou “Texto Alternativo”, em português. Ele nada mais é do que a descrição da imagem inserida em um campo específico no código da página, que fica invisível para quem enxerga, mas que é lido pelo leitor de telas utilizado por pessoas cegas e com baixa visão para navegar.

Durante muito tempo, as redes sociais e vários sites não ofereciam esse campo (ALT) em seus formulários de publicação. E foi aí que surgiu a necessidade de incluir as descrições abertas nos próprios posts, com o uso de hashtags inclusivas, como as #PraCegoVer e #PraTodosVerem, #DescriçãoDaImagem ou simplesmente a expressão “Descrição da imagem” sem #. 

Dessa forma, as pessoas com deficiência passaram a ter acesso às descrições das imagens mesmo sem a existência do ALT. 

Mas atualmente muitas plataformas têm o campo ALT. O que fazer? 

Estamos em conversa constante com a nossa rede e, neste momento, sugerimos a utilização dos dois recursos na mesma postagem. O ALT com uma informação mais objetiva e a descrição aberta na legenda do post com mais detalhes da imagem.

Usar ou não hashtags inclusivas?

Atualmente, nós, do Web para Todos, decidimos não usá-las e escrevemos direto sem #, dessa forma bem simples: “descrição da imagem”. 

Fizemos essa atualização levando em conta a evolução de algumas terminologias e pedidos de representatividade. E também pelo fato de que essa descrição ajuda pessoas com diversos tipos de deficiência além da cegueira. 

Quer saber mais sobre como usar o ALT e as descrições abertas nas publicações para descrever as imagens? Confira a nota que produzimos.

Dica 14 | Identifique os elementos mais importantes da imagem

Tenho que descrever tudo o que vejo em uma imagem? Por onde começo a descrição? Na dica de hoje, você vai eliminar de vez essas dúvidas.

Não é preciso descrever tudo que há em uma imagem. Isso pode até prejudicar a experiência de navegação de quem navega por leitor de tela, deixando a descrição chata, além de desviar a atenção do que realmente importa no post.

Em primeiro lugar, identifique os elementos mais importantes. Qual é a principal mensagem a ser passada? É a data de um evento? Um produto em promoção? Uma foto do seu time de trabalho comemorando os resultados de um projeto?

Foque inicialmente na descrição desses elementos e dê algumas informações gerais sobre o cenário ou contexto, seguindo, preferencialmente, a ordem de cima para baixo e da esquerda para a direita. Assim, organizamos melhor a mensagem e facilitamos a compreensão das pessoas cegas e com baixa visão.

Dica 15 | Evite verbos no gerúndio

Todo mundo concorda que é muito chato (e inadequado) o uso excessivo de gerúndio, né?

“Estarei trabalhando neste fim de semana.”
“Seguiremos dançando até a madrugada.”

Na descrição de imagem, não é diferente. Devemos sempre evitar o “gerundismo”, para deixar a informação o mais limpa e objetiva possível. Um exemplo?

“Foto de uma mulher sentada em frente ao computador. Ela sorri (ao invés de ela está sorrindo) e aponta (ao invés de está apontando) para a tela com o dedo indicador.”

O leitor de tela e os ouvidos de quem navega por ele agradecem.

Dica 16 | Adote verbos no presente e na ordem direta nos textos

Ao seguir essas recomendações, facilitamos a compreensão por parte de todas as pessoas, independentemente de terem ou não alguma deficiência. Ah, essas regrinhas valem não só para descrever imagens, mas também para produzir conteúdos em geral.

A ordem direta se caracteriza pela sequência: sujeito + verbo + complemento. Além de proporcionar mais fluidez nos textos lidos pelo leitor de telas, ela melhora significativamente a qualidade da interpretação dos avatares de Libras.

Já o uso de verbos no presente faz parte das diretrizes básicas da audiodescrição. Além de deixar as frases mais curtas e objetivas, tornam a narração, feita pelos leitores, mais dinâmica e menos cansativa.

Bora colocar em prática? 😉

Matéria publicada no dia 13/8/2020 e atualizada em 25/10/2022.


Leia também:

Outras novidades