Descrição de imagens no Guia de Usabilidade da TOTVS
A importância da descrição de imagens e como foi o processo e desafios do uso do Alt Text e a #Descrição.
Por que descrever imagens?
Utilizamos cada vez mais os recursos visuais para apoiar e passar informações, mas nem todas as pessoas conseguem utilizá-los, de acordo o Movimento Web para Todos, menos de 1% dos 14,65 milhões de sites ativos do país está preparado para a navegação de pessoas com deficiência (pesquisa realizada Maio/2020). Um dado preocupante, pois segundo o censo demográfico de 2010 realizado pelo IBGE — Instituto Brasileiro de Geografia e Estatística, 18,6% da população possui algum tipo de deficiência visual.
A descrição das imagens é um meio de garantir que todos os ambientes sejam acessíveis para as pessoas com deficiência visual, além da maior compreensão e imersão nos conteúdos/assuntos.
Contexto TOTVS — O que está rolando?
Durante as últimas sprints, nosso time tem se dividido em algumas demandas estratégias para auxiliar no dia a dia das pessoas designers da empresa e uma das nossas tarefas foi o Guia de Usabilidade que foi uma forma de padronizar e garantir a qualidade em todos os produtos da companhia.
A coleta de informações, criação de exemplos e preparação de todo material para o guia, ficou por conta do nosso time de usabilidade e antes que esse material fosse disponibilizado para as pessoas da empresa, precisávamos garantir que esse guia fosse acessível. Além de pensar no formato, no local que ele seria disponibilizado e na linguagem, precisávamos garantir que o guia fosse acessível para pessoas com qualquer tipo de deficiência visual e que utilizam leitores de tela e é aqui que o time de pesquisa começa atuar.
O processo de descrever imagens
A primeira etapa do processo de descrição das imagens foi entender o nosso contexto atual e as imagens que iríamos descrever. Em um Guia de Usabilidade, não existem muitas imagens decorativas, mas sim imagens complexas, que apoiam e auxiliam a compreensão do conteúdo textual, como fluxogramas, telas demonstrando campos/componentes ou uma tela de aplicativo de compra. Essas imagens de apoio podem conter elementos decorativos, mas de forma geral, apresentam informações essências para o entendimento.
Como boa prática o texto alternativo/descrição de imagens precisa ser feita de forma objetiva, garantindo uma boa experiência para as pessoas que utilizam leitores de tela. No nosso cenário, entendemos que nem todas as imagens eram simples de descrever e precisávamos focar no contexto da mesma e o que era essencial para melhor compreensão do assunto.
Uma descrição que apoiou nesse momento foi o infográfico que o Centro Tecnológico de Acessibilidade (CTA) disponibilizou como exemplo. A imagem apresenta diversas ilustrações decorativas, como desenho de pessoas, gotas formando o mapa do Brasil, baldes de água para informar os dados referente ao uso diário de água, entre outros elementos ilustrativos.
Exemplo de descrição textual do infográfico acima: Infográfico de Curiosidades sobre a Água, trazendo textos e imagens decorativas relacionadas à água. 768 milhões de pessoas não têm acesso a nenhuma fonte de água potável no mundo. O Brasil é um dos países que mais desperdiça água potável no mundo, sendo que 37% de toda a água tratada no Brasil em 2013 foi desperdiçada. A quantidade de água recomendada pela OMS para uma pessoa é de 110 litros por dia, mas cada brasileiro consome em média 200 litros de água por dia. Um desumidificador retira 480 litros de água a cada 24 horas.
Para a descrição de imagens complexas ou telas com muitas itens decorativos, optamos por eliminar as informações decorativas e seguir o exemplo do infográfico:
1 — Identificar o que é a imagem (exemplo: infográfico de curiosidades sobre a água);
2 — Apresentar o contexto/informações da imagem (exemplo: descrever as informações sobre a água)
Para imagens complexas utilizamos a descrição em dois momentos, no Alt Text de forma mais simplificada, indicando o que era a imagem e o formato (Identificar o que é a imagem + Apresentar o contexto) em uma descrição abaixo da imagem acompanhada com #Descrição.
Um exemplo real do nosso Guia de Usabilidade foi a imagem utilizada para dar apoio ao texto referente os tipos de navegação: Estrutural, Associativo e Utilitário, realizamos a seguinte descrição:
Exemplo de descrição: Três grupos com retângulos. Dois retângulos estão um abaixo do outro e conectados por uma linha, exemplificam a navegação estrutural. Outros dois retângulos lado a lado e não possuem linha conectando, mas possuem conexão com um retângulo acima, exemplificam a navegação associativa. Já os quadrados que não estão conectados de nenhuma forma, apenas estão lado a lado, são exemplificações da navegação utilitária.
“Na minha opinião, essas descrições literais são bastante inúteis para páginas da Web, a menos que o usuário seja um crítico de arte. Prefiro descrições utilitárias que verbalizem o significado ou o papel da imagem no diálogo: o que a imagem pretende comunicar e o que acontecerá se for clicada?” — Jakob Nielsen
Aprendizados e boas praticas mapeadas
Como boa prática, o tamanho do Alt Text deve ter no máximo 125 caracteres, isso garante um melhor desempenho dos leitores de tela e que apenas o essencial será descrito e a informação apresentada faça sentido para a pessoa usuária.
- Por conta do limite indicado no Alt Text, as descrições de imagens complexas (fluxogramas, gráficos, organogramas, tabelas, etc) podem ser separadas em duas partes. A primeira indicando o que é a imagem, o que está sendo apresentado (um gráfico, fluxo, etc) — deve ser inclusa no Alt Text. E a segunda parte — que pode ser inclusa abaixo da imagens e que no nosso caso utilizamos #Descrição explicando o contexto e explorando as informações essenciais. Isso garante compreensão da imagem e que o conteúdo continue sendo apresentado mesmo com o limite indicado para o uso do Alt Text ultrapassado.
- Não é necessário incluir frases como “imagem de …” ou “gráfico de …”, antes da descrição, o leitor de tela já faz esse papel de informar o está sendo apresentado (seja imagem ou gráfico por exemplo), sendo assim, essa informação acaba ficando redundante.
- É importante se atentar com a escrita e pontuação, pois o uso correto permite que os leitores entreguem uma melhor experiência para as pessoas usuárias.
- Pense no conteúdo que a imagem está tentando passar e não foque nos elementos decorativos. Seguindo esse modelo, conseguimos descrever o que era necessário para que as pessoas usuárias entendessem o contexto, eliminando a confusão de explicar conteúdos que são apenas decorativos e que não trazem compreensão sobre assunto.
Próximos passos
Essa tarefa não acaba nessa sprint, precisamos garantir que tudo que criamos seja acessível para as pessoas e que não cause confusão. Estamos no caminho de validar e iterar o que for necessário.
Esse texto foi um meio de discutir sobre esse assunto e compartilhar um pouco de como foi nosso processo. Se você tem alguma experiencia relacionada a descrição de imagens (principalmente em um guia de usabilidade) me chama para tomar um café e conversamos sobre esse desafio :)
