Você sabia que no Brasil há cerca de 7 milhões de pessoas cegas ou com baixa visão que precisam de descrição nas imagens para compreenderem o conteúdo e navegarem bem pelas redes sociais e sites?

Para que pessoas com deficiência visual severa – cegueira total ou parcial – tenham acesso ao conteúdo de um site, é necessário que todas as imagens e conteúdos não-textuais tenham uma descrição. Esse conteúdo em texto deve seguir algumas diretrizes pré-estabelecidas para que estejam de maneira apropriada à navegação por leitores de tela.

Uma imagem pode ou não transmitir uma informação. Desta forma, podemos dividir as imagens inseridas em uma página de duas formas: com conteúdo e decorativa. Deixa eu tentar explicar sobre cada uma delas.

IMAGENS COM CONTEÚDO

São elas: fotos, gráficos, organogramas, ilustrações, imagens que substituem botões ou links, gráficos etc..

Todas as imagens que apresentam conteúdo devem conter uma descrição. A descrição da imagem pode ser informada no próprio texto ou por meio de um atributo específico do elemento img no HTML, também chamado de ALT. A descrição fornecida através deste atributo não aparece visualmente. Esse recurso só será reconhecido pelo leitor de tela quando o usuário, navegando pelo teclado, passar por ela. Desta forma, os usuários com deficiência visual sabem qual é o conteúdo da imagem por meio do texto de descrição.

IMAGENS DECORATIVAS

Agora vamos falar sobre as imagens decorativas. Utilizadas para decorar a página ou partes dela. Como exemplos, podemos citar marcadores de lista estilizados, cantos arredondados, ícones utilizados para decorar ou enfatizar um link, etc..

As imagens decorativas devem ser ignoradas pelos recursos de tecnologia assistiva. Ou seja, os leitores de tela não devem considerar a presença delas, pois não há conteúdo a ser transmitido.

Para que o código esteja preparado, a recomendação é a inserção de todas as imagens decorativas através das folhas de estilo (CSS). Se isso não for possível, adicione a imagem na tag <img /> e deixe o atributo alt vazio. Assim, os leitores de tela não reconhecerão esses conteúdos, facilitando a navegação assistiva.

Agora que já sabemos sobre as imagens decorativas e com conteúdo, vamos aprender como descrever da maneira correta as imagens que passam alguma informação.

DICAS PARA DESCREVER IMAGENS

Trouxe 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.

Separei também mais algumas dicas:

• Use palavras mais conhecidas e simples;

• Evite o uso de figuras de linguagem, jargões, termos técnicos e neologismos. Mas se tiver que usá-los, explique o que significa.

• Não use “X”, “@” ou “e” como forma de não marcar gênero em uma palavra, pois ela acaba se tornando impronunciável e inacessível para os leitores de tela. Além disso, elas confundem os avatares de Libras e são ruins para pessoas com dislexia, autistas, quem está aprendendo nosso idioma, entre outras;

• Identifique os elementos relevantes na imagem;

• Mencione as cores;

• Não use adjetivos;

• Coloque o nome da pessoa ou substantivo primeiro, depois use pronome pessoal.

• O ideal é que a descrição no alt seja de até 100 caracteres.

Mais outra dica bacana, identifique os elementos mais importantes da imagem. 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.

Vamos colocar em prática a fórmula que mencionei acima?!

Exemplo:

Objeto: pessoa
Ação: segura um cartaz
Contexto: em uma multidão

Uma boa descrição para essa imagem poderia ser:

Uma pessoa tatuada segura um cartaz que diz “Eduque bem suas crianças”, em uma multidão. No centro do cartaz, há uma ilustração do planeta Terra com dois punhos erguidos em cada lado, com fundo quadrado contendo um arco-íris, um círculo de orgulho trans, e faixas de tons marrons nos punhos.

Últimas dicas

Uma vez que imagens são simplesmente uma coleção de pixels (em sua maioria), leitores de tela não conseguem detectar textos nelas. Certifique-se de transcrever na descrição todos os textos presentes na imagem.

Ao seguir essas recomendações, facilitamos a compreensão por parte de todas as pessoas que estão acessando o nosso site.

Agradeço o feedback!

Escrevi este guia porque tive dificuldades em encontrar um guia de descrição de imagens coerente quando estava começando. Espero que esse guia ajude você, e qualquer coisa estou a disposição para ajudar também.

E vamos aprender sobre acessibilidade na web, para que consigamos dar aos usuários de nossa página uma ótima experiência, seja uma pessoa com deficiência ou não.