Como escrever textos alternativos de gráficos
Você provavelmente não escreverá um texto alternativo que represente todo o significado de um gráfico. Mas isso não quer dizer que você não deva tentar.
Traduzido/adaptado do original por Vinícius Barqueiro a partir do texto original “Writing Alt Text for Data Visualization”, escrito por Amy Cesal e publicado no blog Nightingale.
O que é Texto Alternativo
Textos alternativos são textos atribuídos a imagens para descrever seu significado visual. Bons textos alternativos ajudam mais pessoas a entender o conteúdo. Tecnologias assistivas como leitores de tela leem o texto alternativo em voz alta, de modo que os usuários possam ouvir e entender o conteúdo visual. Pessoas que usam leitores de tela frequentemente possuem algum grau de deficiência visual. Isso inclui pessoas que são totalmente cegas, mas também pessoas com baixa visão.
Quando não há textos alternativos em imagens, pessoas perdem acesso a conteúdos, simplesmente por eles serem visuais. Ou seja, conteúdos visuais sem textos alternativos não são acessíveis.
Definiçaõ de texto alternativo de Webaim:
É lido por leitores de tela em lugar das imagens, permitindo que o conteúdo e a função da imagem seja acessível para todos.
Aparece em lugar das imagens no navegador, se o arquivo da imagem não for carregado, ou quando o usuário escolheu não ver imagens
Provê significado semântico e descrição para imagens, o que pode ser lido por mecanismos de pesquisa, ou ser usado posteriormente para determinar o conteúdo de uma imagem fora do contexto da página.
Há muitos materiais que explicam como escrever textos alternativos de modo geral (listei mais no final do texto), mas poucos que oferecem orientações espefícicas para de como escrever textos alternativos de gráficos.
Como escrever textos alternativos de gráficos
Você pode escrever algo curto que aborde todo o significado de um gráfico? Provavelmente você não pode. Isso não quer dizer que você não deva tentar.
- Adicionar textos alternativos é melhor do que não fazer nada se existe informação significativa na imagem.
- Adicione uma descrição longa no HTML quando possível, para cobrir o significado.
- Complemente com um link para a base original, de modo que leitores mais interessados possam acessar os dados em seu programa de preferência.
- Muitos leitores de tela cortam textos alternativos em 125 caracteres, então mantenha seu texto alternativo curto.
O World Wide Web Consortium (W3C), uma comunidade internacional que define padrões Web, oferece orientações para textos alternativos de imagens complexas, mas pode ser difícil entender como aplicá-las a gráficos. A seguir, eu proponho como aplicar tais orientações para gráficos. Não deixe de conferir também as orientações da W3C.
Eis uma fórmula simples para escrecer textos alternativos para visualizações de dados:
Tipo de gráfico
É útil que pessoas com visão parcial saibam qual o tipo de gráfico. Isso dá contexto para que entenda o restante do visual.
Exemplo: Gráfico de Linha
Tipo de dado
Qual tipo de dado é apresentado no gráfico? As legendas dos eixos x e y podem ajudar você a descrever isso.
Exemplo: número de bananas vendidas por dia no último ano
Propósito do gráfico
Pense por que você está incluindo esse elemento visual. O que ele mostra de significativo. Isso deveria ser um ponto para cada elemento visual e você deveria dizer às pessoas o que procurar.
Exemplo: os meses de inverno apresentam mais vendas de bananas
Link para os dados na íntegra
Não inclua link no texto alternativo. Você pode incluir isso em algum lugar no texto. Pessoas deveriam poder clicar em um link para ver os dados e se aprofundar neles. Isso provê transparência sobre seu recurso e permite às pessoas explorar os dados.
Example: Dados de USDA
Exemplo de texto alternativo de gráfico simples
Se eu estivesse postando este gráfico do artigo do New York Times “Como reduzir tiros” em uma rede social, eu incluiria um link para o artigo e escreveria o seguinte texto alternativo:
Exemplo de texto alternativo de gráfico complexo
Se eu estivesse postando um gráfico menos comum, como essas linhas de calor de Ed Hawkins, eu incluiria um link para o recurso e focaria no significado usando o seguinte texto alternativo:
Como adicionar texto alternativo
Em código HTML
Adicione texto alternativo (alt text) alt="" a qualquer imagem significativa dentro da tag <img>. Adicione uma descrição longa (longdesc) longdesc="" quando possível.
No Twitter
Quando adicionar uma imagem, use o botão “+ALT” ou o botão “adicionar descrição”. O Twitter tem informações completas.
No Instagram
O Instagram esconde o recurso de texto alternativo, mas tem orientações de como adicionar texto alternativo.
- Escolha um filtro e edite a imagem, então escolha Próximo.
- Toque Configurações avançadas no final da tela.
- Toque Escrever texto alternativo.
Em produtos do Microsoft Office
No Microsoft Office há vários caminhos para você adicionar texto alternativo, dependendo do programa e da versão que você usa. De todo modo, eles possuem uma extensa documentação de como adicionar texto alternativo.
No Medium
Clique na imagem da postagem. Use a opção “Alt text” para escrever seu texto
Ao escrever textos alternativos eficazes e incluí-los junto aos seus gráficos, você permite que as pessoas que não enxergam a imagem entendam o conteúdo, de modo que não percam informações importantes. Textos alternativos são necessários para garantir que os conteúdos visuais sejam acessíveis.
Outras leituras (em inglês)
Textos alternativos
- Web Accessibility Tutorials: Complex images| W3C
- Alt Text & Accessibility | Web Aim
- How to Write Great Image Alt Text | Catherine McNally
- The Right Way to Write Alt Text | Natalie Gotko
Acessibilidade para Visualização de Dados
- Data Visualization Accessibility: Where Are We Now, and What’s Next? | Melanie Mazanec
- Why Accessibility Is at the Heart of Data Visualization | Doug Schepers
- An intro to designing accessible data visualizations | Sarah L. Fossheim
- 5 easy ways to make your data visualization more accessible | Amy Cesal
Agradeço a Doug Schepers e Zander Furnas pela revisão
Amy Cesal é designer especializada em visualziação de dados. Ela é co-fundadora e membro do conselho da Data Visualization Society. Amy tem paixão por construir guias de estilo para visualizações de dados (tentando deixar tudo, incluindo gráficos, acessíveis); criar visualizações de dados customizadas e explorar as fronteiras entre dados e arte. Ela é mestre em Visualização de Informações pelo MICA.
