Audiodescrição de imagens e o papel dos UX writers

Como melhorar a experiência de usuários ao garantir acesso a informações detalhadas de imagens.

Eu iniciei minha carreira na área de educação, mais especificamente do ensino de línguas, e eu acredito que a linguagem tem o poder de aproximar, acolher e transformar a sociedade.

E tenho me dedicado muito à promoção de linguagens inclusivas. Fato que me fez aprofundar meus conhecimentos em audiodescrição de imagens estáticas, ou seja, imagens que não são vídeos.

Mas o que é audiodescrição?

É uma atividade de mediação linguística, uma modalidade de tradução intersemiótica, que transforma o visual em verbal, abrindo possibilidades maiores de acesso à cultura e à informação, contribuindo para a inclusão cultural, social e escolar. (MOTTA & ROMEU FILHO, 2010, p.11).

Ou seja, audiodescrição (AD) é um recurso que traduz imagens em palavras, permitindo que pessoas cegas, com baixa visão, com deficiência intelectual, idosos e disléxicos consigam compreender conteúdos audiovisuais ou imagens estáticas.

Veja um exemplo de AD retirada do projeto Charges Acessíveis, idealizado por uma grande amiga e profissional, professora Doutora Deise Medina, do Instituto Federal da Bahia.

AD: Charge em preto e branco. Todos os elementos são brancos com contornos pretos. Título: BOLSONARO EM NOVA YORK. Autor: Gomez

No centro, o Presidente Jair Bolsonaro, de perfil esquerdo, sentado em uma poltrona de avião, voltado para a pequena janela à esquerda. A poltrona é estreita, com recosto alto e um pequeno pano branco no topo do recosto. Bolsonaro tem cabelo curto, liso, repartido à direita e sobrancelhas pretas, grossas. Do lado de fora da janela, a estátua da liberdade, vista da cintura para cima, entre nuvens. Figura feminina que usa uma coroa rodeada de triângulos pontiagudos e uma veste de manga curta. Ela segura um livro na mão esquerda, próximo ao ombro e uma tocha de fogo elevada acima da cabeça na mão direita. Com o antebraço apoiado na poltrona, Bolsonaro olha para a estátua e diz: OLHA, TEM UMA HAVAN AQUI!

Mas onde entra o trabalho dos UX writers?

A importância das audiodescrições recai no fato de que precisamos pensar que os deficientes visuais (e outros usuários) devem ter acesso às mesmas informações que os videntes e que hoje muitas pessoas acessam a internet por meio de leitores de tela. É aí que entra nosso trabalho como UX Writers.

Nosso trabalho é estar atentos ao texto, mas precisamos estar atentos às imagens também! A técnica de audiodescrição não é simples, demanda estudo, muita prática e feedback de consultores cegos e usuários de leitores de tela (claro), mas se aprofundar nesse tema te permitirá desenhar experiências muito melhores.

Convido você a refletir:

• Se os videntes veem uma imagem com todos seus detalhes e cores, por que então privar um grupo de pessoas de ter acesso a essa informação também?
• Os videntes têm a escolha de selecionar para onde dedicar atenção a todo momento. Por exemplo, eles podem ignorar imagens se quiserem, mas também podem voltar e observá-las. Questão de escolha. Mas e os deficientes visuais? Não podem ter essa escolha?

Quem melhor que um UX Writer para promover essa acessibilidade?

Eu defendo a ideia de que TODOS precisam ter acesso à informação de forma mais detalhada possível. Para isso se tornar real, não podemos ignorar os textos alternativos (ALT) das soluções que criamos.

Não basta pedirmos aos devs para colocarem no campo ALT a palavra LOGO ou ILUSTRAÇÃO, precisamos descrever essas imagens com o máximo de detalhes possível, sem sermos cansativos, para que todos possam receber a mesma informação.

Trago abaixo exemplos reais de audiodescrições que criei para o projeto FCalendar do qual fiz parte como UX Designer.

Audiodescrição de logos

Audiodescrição: Logo FCalendar. No canto esquerdo, a letra F, em branco, no centro de uma gota na cor laranja, com a ponta para cima, à direita. Sobre fundo branco, à direita da gota, a palavra Calendar, na cor laranja.

Adicionamos a audiodescrição detalhada do logo do sistema para que leitores de tela pudessem interpretar os dados e para que todos tivessem acesso à cor, às formas e palavras utilizadas.

Decidimos que usaríamos essa descrição completa apenas na sua primeira aparição para não deixar a experiência dos usuários cansativa ao repetir informações.

Ilustrações

Telas iniciais do FCalendar

Nesse projeto, utilizamos ilustrações nas telas de onboarding e, se prestarmos atenção, essas ilustrações são complexas e possuem muitos detalhes, como plantas, objetos com tamanhos irreais, cores, um fundo colorido com formas fluidas que se interconectam.

Tarefa: Feche seus olhos e imagine alguém descrevendo uma dessas telas para você. O que você esperaria? Seria suficiente para você apenas a descrição ”Ilustração”?

O processo de escrita para chegar às audiodescrições finais dessas ilustrações foi um desafio (muito prazeroso) que envolveu vários passos:

1. Escrevi os textos (falarei sobre técnicas em um próximo texto);
2. Enviei a uma especialista em audiodescrição (que fez o papel de consultora);
3. Recebi feedback com alterações importantes;
4. Fiz as alterações;
5. Enviei a uma usuária de leitor de tela para que testasse a leitura (é muito comum que esses usuários escutem as descrições em uma velocidade rápida, então é importante saber se as palavras que escolhemos são compreensíveis nessa velocidade).
6. Recebi mais feedback;
7. Fiz as últimas alterações.

Vejam os resultados:

Ilustração em fundo branco com forma arredondada à direita na cor laranja claro. No centro, uma mulher voltada para a direita, toca na tela de um grande celular com bordas e teclas em tons de azul, que está na sua frente. A mulher é branca, com cabelos longos, lisos e azuis. Ela usa blusa de manga longa verde clara, calça e sapatilhas azuis escuras. Na sua esquerda ao fundo, um grande relógio azul claro com ponteiros verdes em cima de uma mesa azul. No chão, na frente da mesa, um vaso de plantas retangular, verde claro, baixo e comprido com diferentes tipos de folhas verdes. À direita do celular, em primeiro plano, um vaso de plantas alto com três folhas grandes verdes.

Ilustração sobre fundo laranja claro na parte superior e branco na inferior. No centro, um grande notebook com bordas e teclado azuis e a página de um site em tons de azul na tela azul claro. Ao redor da tela do notebook, três homens e uma mulher trabalham. À esquerda, um homem em pé, voltado para a direita. Ele tem barba e cabelos marrons, amarrado em um coque, usa casaco verde, calça e tênis roxos e segura um livro verde. Sentado na borda superior, um homem de pele clara, cabelo curto, marrom, usa casaco azul, calça amarela e sapatos azuis claros. Ele tecla em um notebook vermelho apoiado no colo. No centro, uma mulher sentada no teclado de pernas cruzadas olha para a direita. Ela tem pele clara, cabelos longos, lisos e roxos, usa uma blusa de manga longa verde, calça verde clara e sapatos roxos. Ele tecla em um notebook roxo apoiado no colo. À direita, um homem sentado em dois grandes livros, voltado à esquerda. Ele é negro, com cabelos curtos, ondulados e marrons, usa camiseta rosa e calças e sapatos roxos. Ele tecla em um notebook bege apoiado no colo.

Ilustração sobre fundo laranja claro na parte superior e branco na inferior. Duas mulheres com máscara de proteção, uma de frente para a outra, conversam sentadas em cadeiras giratórias azuis com rodinhas, nas extremidades de uma mesa bege retangular. As mulheres apoiam seus antebraços na mesa. A da esquerda tem pele morena, cabelos lisos e marrons até a nuca, usa blusa amarela sem manga, saia verde acima dos joelhos e sapatilhas marrons. A da direita tem pele clara, cabelos ondulados e marrons na altura da nuca, usa camisa de manga longa azul clara, calça marrom clara e sapatos marrons escuros.

É isso. Quis trazer aqui uma reflexão sobre inclusão e acessibilidade. Para a Linguística, texto não é somente texto escrito, imagens e vídeos também são textos.

Por isso, é importante que nós, como UX writers (e UX designers) tomemos decisões conscientes a respeito das imagens que utilizamos e que, principalmente, criemos oportunidades para que todos tenham acesso à informação mais detalhada (e não cansativa) possível.

“Nada sobre nós, sem nós”

Tom Shakespeare

Para se criar uma boa experiência, é preciso incluir consultores e usuários na construção das audiodescrições. Afinal, não é possível promover acessibilidade e inclusão excluindo os protagonistas da experiência.

Bônus

Me deparei com um probleminha ao criar esta postagem no Medium. O limite de caracteres para os textos alternativos não me permitiu inserir as audiodescrições criadas. Inclusive a mensagem de instrução nos pede que façamos uma descrição breve da imagem.

Captura da tela de inserção de texto alternativo do Medium

Ler um resumo de um texto escrito é o mesmo que ler uma obra inteira?

Vou apenas deixar mais essa reflexão.

Referências

SILVEIRA, D. M. M. Audiodescrição de charges e cartuns no livro didático digital: uma proposta de parâmetros à luz da Gramática do Design Visual, 2019.

MOTTA, Livia Maria V.; ROMEU FILHO, Paulo (orgs). Audiodescrição: transformando imagens em palavras. São Paulo: Secretaria dos Direitos da Pessoa com Deficiência, 2010.