O guia definitivo para descrição de imagens e ícones em sites, aplicativos e redes sociais
O texto alternativo é uma palavra ou frase para explicar o conteúdo da imagem, sem ele, cerca de 7 milhões de pessoas cegas no Brasil têm o acesso à informação negado, seja nas redes sociais, sites, aplicativos ou até mesmo em grupos do WhatsApp.
Uma mesma imagem pode ter várias descrições diferentes. Isso acontece porque a descrição não é uma ciência exata, ela depende do contexto e da mensagem que queremos transmitir. Por isso, as inteligências artificiais ainda não são capazes de realizar descrições coerentes.
Nesse artigo vou tentar resumir as principais informações que você precisa saber para mandar bem nas descrições.
Como descrever uma imagem
Os 4 principais elementos da descrição são o Formato, Sujeito, Paisagem e Ação.
Vamos analisar uma foto que está no Instagram da Pequena Lô.
A descrição dessa imagem poderia ser:
Foto de Pequena Lô, ela está no estúdio do programa Encontro, sentada na sua motinha elétrica. Ela está com sorriso largo, usando um macacão em tons de vermelho e sapato branco.
Caso essa mesma foto estivesse no e-commerce que vende a motinha, valeria a pena dar mais detalhes sobre a moto. Como o material, a cor, o formato do assento e a posição da cestinha.
Mas se ela estivesse no e-commerce que vende o sapato, os detalhes da motinha não são relevantes e poderíamos dar uma ênfase maior aos detalhes do sapato, se fecha com cadarço ou velcro, qual é o material, formato da sola, detalhes da costura e assim por diante.
Não descreva emoções
As aparências podem enganar, nunca diga que a pessoa está feliz, triste, com raiva, tédio, medo e demais emoções subjetivas. Apenas descreva as características, como está sorrindo, boca entreaberta, posição da mão, cabeça inclinada para cima, para o lado ou para baixo, e etc. Também evite fazer analogias como olhar matador, olhar sedutor e outras comparações.
Não use adjetivos
Não podemos influenciar na opinião da pessoa usuária, cada pessoa tem seus próprios gostos e conceitos de beleza. Por exemplo, não diga que está linda, deslumbrante, magnifica, esplendida, mas se você quer passar essa impressão você pode descrever a roupa, acessórios, maquiagem, cor do esmalte e outros elementos que construam esse conceito.
Recomendações para sites e aplicativos
Evite usar textos em imagens
Isso prejudica a experiência de pessoas com baixa visão, dislexia e outras deficiências visuais e cognitivas. Pois não é possível customizar a cor, o estilo ou tamanho da fonte.
Caso não seja possível colocar os textos diretamente no HTML, pelo menos garanta que todo o conteúdo textual estará escrito no alt que é a tag do texto alternativo.
Vamos analisar uma imagem de uma campanha de Marketing que está no site da Magazine Luiza.
A descrição dessa imagem poderia ser simplesmente:
Chance única, milhares de produtos eletrônicos como máquina de lavar e televisão de 50 polegadas, estão com 70% de desconto + frete grátis. Verifique a disponibilidade do frete simulando na página de produto.
Algumas pessoas colocariam cada detalhe da imagem, como “Chance única na esquerda em branco e amarelo”, “no centro a foto de 3 eletrodomésticos, sendo eles uma máquina de lavar branca, uma televisão da samsumg de 50 polegadas e uma JBL preta”, “na direita lemos o texto com até 70% off + frete grátis em milhares de produtos, escrito em branco e amarelo”, “em baixo com letra menor lemos: * Verifique a disponibilidade do frete simulando na página de produto”. “o fundo azul com a frase chance única em outline formando marca d’água”
Esse tipo de descrição é cansativa, prolixa e confusa. Não existe necessidade de colocar tantos detalhes! Isso torna a navegação estressante e gera sobrecarga cognitiva.
Nesse exemplo da campanha promocional o objetivo da imagem é informar que existe uma promoção, qual é a categoria dos produtos que estão na promoção, qual é o percentual de desconto e se houver um cupom, qual é o código do cupom para receber o desconto.
Se essa mesma imagem estivesse no site que ensina Designers a criar uma arte, aí sim deveríamos escrever os detalhes com precisão.
Para descrever uma imagem, sempre tenha em mente qual o objetivo dela para aquele contexto.
Escreva o rótulo de botões e links
Os botões que possuem apenas ícones precisam de um rótulo acessível. Como por exemplo esses botões com o ícone de coração e sacola.
Em fase de prototipação, a pessoa responsável pelo Writing da aplicação, seja UX Writing ou Product Designer UI/UX, precisa escrever o rótulo desses botões e se necessário uma dica.
Como implementar um rótulo acessível em sites e aplicativos
Para escrever um texto para botões que será lido apenas pelo leitor de telas e ficará invisível na tela. Faça o seguinte:
Esse código funciona para qualquer framework JavaScript, como ReactJS, VueJS, Angular 8, até no InfernoJS. Pois todos eles são baseados em HTML.
Para aplicativos mobile também é possível colocar o rótulo acessível, verifique a documentação de acessibilidade da linguagem ou do framework que você usa. A seguir, alguns exemplos para Kotlin, Swift, React Native e Flutter:
Como implementar as dicas
Em alguns casos, podemos colocar uma dica para melhorar a compreensão do elemento em algum contexto. Nem sempre é necessário colocar dicas, faça uma analise de cada caso para evitar poluição auditiva.
Por exemplo, em um botão desabilitado podemos informar o que deve ser feito para que ele fique habilitado. Ou no caso do botão de notificações podemos informar se há ou não novas notificações e quantas são.
A dica será lida após a função do elemento, conforme imagem a seguir:
Nas documentações de linguagens e frameworks, procure por hint ou accessibilityHint. A seguir alguns exemplos de como colocar dicas no HTML, Kotlin, Swift, React Native e Flutter:
Não descreva imagens ou ícones meramente ilustrativos
Não repita o texto visível na imagem, porque a leitura ficará duplicada. Nunca oculte uma imagem importante para a compreensão ou navegação. Nunca escreva a URL na imagem no lugar do texto alternativo.
Imagens meramente ilustrativas, podemos ocultar do leitor de telas. Como por exemplo esses ícones de destaques da Magazine Luiza.
Apenas se não houvesse o texto visível, seria necessário colocar o rótulo invisível, como fizemos no tópico anterior.
Nesse caso, podemos usar svg que não possui semântica, colocar a imagem como background através do CSS ou usar a tag img sem descrição e aria-hidden="true" conforme trecho de código a seguir:
Se uma imagem desperta sentimentos emocionais, você pode colocar um texto alternativo para oferecer uma experiência agradável para todas as pessoas, mesmo que seja possível viver sem ela.
Como analisar o texto alternativo das imagens
Após a implementação, você pode usar o leitor de telas para escutar o texto alternativo das imagens e verificar se está tudo funcionando conforme o planejado. Essa é melhor forma de testar!
Outra opção é usar o plugin do Google Chrome, Alt Text Tester. Após instalar, clique no ícone do plugin para ativar e passe o mouse em cima das imagens para ler o texto alternativo. Faça uma analise e verifique se a descrição da imagem está coerente com a mensagem que a imagem está transmitindo.
Emojis
Emojis contém descrição nativa, podem ser usados, porém cada sistema operacional lê de uma forma diferente. Use com moderação.
Para saber como usa-los de forma acessível, recomendo a leitura do artigo Emojis e acessibilidade: como usá-los adequadamente que foi publicado pelo UX Collective.
Redes sociais
Sempre descreva as imagens nas redes sociais, seja no perfil pessoal ou profissional. As principais redes sociais como Instagram, Facebook, LinkedIn, Twitter e até o Medium, oferecem suporte para colocar o texto alternativo nas imagens.
Para colocar o texto alternativo no Instagram, na última tela clique a opção Configurações avançadas, depois em Escrever texto alternativo, escreva o texto alternativo para cada imagem e clique em Concluir. Conforme imagem a seguir:
No Twitter, em cada imagem, clique no botão +ALT e escreva o texto alternativo:
No facebook, clique no botão de Mais, aquele com os 3 pontinhos, depois em Editar texto alternativo e escreva a descrição da imagem:
No LinkedIn Mobile ou Web, ao adicionar a imagem, clique no botão Adicionar texto alternativo.
No Instagram Web na última tela clique em Acessibilidade.
No Facebook Web clique, clique no botão Editar que fica sobre a imagem, em seguida clique em Texto alternativo e selecione a opção Texto alternativo personalizado e escreva o texto.
E o TikTok não é acessível.
Regras da WCAG
Conheça algumas regras da WCAG que estão relacionadas ao conteúdo apresentado nesse artigo:
Relatos de uma pessoa cega
Para entender o que a falta de texto alternativo nas imagens representa na vida de uma pessoa cega ou com baixa visão, recomendo a leitura do artigo Migração de carreira: o impacto da acessibilidade na minha profissão, escrito por Ana Gouvêa.
Outras fontes
Se quiser buscar outras fontes, recomendo os Artigos do Movimento Web Para Todos sobre Descrição de Imagens.
Para quem prefere assistir vídeos, confira o resumão desse artigo no YouTube:
Obrigada por ler. Esperamos que isso seja útil para você. Agradecimento especial a Ana Gouvêa por revisar esse conteúdo ❤
