Transcrição Episódio 2 Podcast Todos na Web

A transcrição foi levemente editada para melhorar a fluidez e a leitura, mantendo o sentido e a intenção das falas originais

[Jeniffer]
Olá, pessoal, eu sou a Jeniffer, analista de projetos do Ceweb.
E hoje eu estou aqui para conversar com duas pessoas queridas, que são a Simone Freire e o Leonardo Gleison.
Eu sou uma mulher branca, de cabelos claros, com franja e olhos verdes, e eu vou passar agora para eles também se apresentarem e se descreverem.
________________________________________
[Simone]
Oi, Jeni, obrigada pelo convite, vai ser maravilhoso.
Eu sou a Simone Freire, sou idealizadora do Movimento Web para Todos, CEO da agência Espiral Interativa. Sou uma mulher branca, de cabelos castanhos escuros, compridões, ondulados, e olhos castanhos escuros, e estou vestindo a camiseta do Movimento Web para Todos.
Um prazer enorme estar aqui, vou rolar a bola para o Leonardo, querido Leo.
________________________________________
[Leonardo]
Oi, gente, eu sou o Leonardo Gleison, eu sou engenheiro de software e sou um dos embaixadores do Movimento Web para Todos.
Sou um homem branco, estou com os cabelos já meio grisalhos e tudo, estou usando a camiseta preta linda do Movimento Web para Todos.
E hoje nós vamos falar um pouquinho sobre imagens, é isso?
________________________________________
[Jeniffer]
É isso.
Então, gente, o assunto do nosso papo hoje — como o pessoal já deu aqui um spoiler — vai ser imagens, que é uma coisa que a gente está sempre publicando. Todo mundo publica imagens nas redes sociais ou em sites, enfim, mas nem sempre a gente dá aquela atenção especial, aquela atenção necessária, para o aspecto de acessibilidade quando a gente está falando sobre imagens.
E, para abrir, eu queria trazer um exemplo aqui. Vamos imaginar, Leo, que você está comprando um presente para sua esposa. Você está lá na sua loja favorita, escolhendo, e o leitor de tela lê a imagem só assim: “imagem um, dois, três, quatro, cinco”.
Nesse momento, você não tem nenhuma pista do que é. Você segue com essa compra? Você desiste? Você tenta de outra forma? O que você faz, Leo?
________________________________________
[Leonardo]
Bom, geralmente, nesse tipo de caso, se não tiver outros indícios e se eu não encontrar nada ali, o negócio é desistir da compra, porque você não tem como saber se o que está comprando é realmente o que está comprando. E aí você só vai descobrir quando chegar em casa — tarde demais.
________________________________________
[Jeniffer]
Sim.
Si, falando um pouco sobre a sua experiência: qual é a barreira mais comum que você observa quando a gente fala de acessibilidade em imagens?
________________________________________
[Simone]
Eu acho que tem algumas, Jeni.
Uma delas é o pessoal achar que dá para colocar qualquer descritivo e isso já está valendo. Principalmente quando a pessoa está lendo o conteúdo e redigindo aquele texto, e a gente tem vários problemas com isso. Não adianta colocar uma descrição de qualquer forma.
Outra barreira acontece quando o gestor ou a gestora de projeto não dá o valor necessário para esse recurso de acessibilidade. É uma pessoa que está ali supervisionando, olhando tudo e, no final, a qualidade da entrega: ela precisa, sim, estar atenta para saber se os produtos estão saindo daquela página com a descrição.
Então, a barreira é a qualidade da descrição que está sendo feita e esse olhar final para garantir que esse recurso está sendo colocado.
Está tudo relacionado às normas da ABNT, à NBR 17225. Nessa parte específica de imagens, a gente tem bastante conteúdo para as pessoas se aprofundarem, inclusive nas outras oficinas. Aproveito o gancho para convidar o pessoal a acompanhar as oficinas que a gente fez online desse mesmo projeto — lá tem muita informação.
Vocês vão poder se aprofundar bastante em tudo o que vai ser falado em todos os episódios.
________________________________________
[Jeniffer]
Joia. É isso mesmo, pessoal! Assistam aos webinars que a gente gravou no mês de agosto de 2025. Estão todos publicados no canal do NIC, então vocês podem encontrar esse conteúdo — tem bastante coisa aprofundada lá.
Leo, queria jogar para você outra pergunta. Vou te fazer mais algumas perguntas para você comentar com a gente um pouco sobre como é sua experiência com essa questão de imagens.
O que você já enfrentou em relação a imagens inacessíveis no seu dia a dia? Você quer contar alguns exemplos, vivências que você já teve com isso?
________________________________________
[Leonardo]
Nossa, eu já tive muitos problemas com imagem. Por exemplo: fazer compras online em grandes e-commerces. Geralmente, as pessoas postam os produtos de qualquer jeito no e-commerce e você, às vezes, vai tirar uma dúvida.
Uma vez aconteceu um caso muito interessante. Eu estava tentando comprar um interruptor desses de casa inteligente e eu queria um interruptor branco. Aí eu perguntei para o vendedor: “Olha, esse interruptor é branco?”. Ele respondeu: “Não, é rosa”, porque supôs que eu estava vendo a imagem do interruptor branco e estava tirando sarro. E, poxa, não era, né?
De qualquer forma, eu acabei não comprando, porque, imagina: se a pessoa tem essa falta de respeito, essa falta de empatia, você não vai comprar.
Isso acontece diariamente com diversos produtos. Não só comigo, mas com pessoas próximas a mim, que também têm deficiência visual. Elas acabam passando por isso, sofrendo, e não conseguem comprar, não conseguem consumir.
________________________________________
[Jeniffer]
E aí, Si, falando agora sobre alguns mitos em relação a imagens que a gente sabe que existem: muita gente acha que basta preencher o atributo "alt" com um texto — qualquer texto — mesmo que seja longo, cheio de coisinhas, com muitas informações confusas. Isso mais ajuda ou mais atrapalha?
________________________________________
[Simone]
Atrapalha. A descrição de imagem tem que ser muito direta, clara e sucinta. A gente precisa imaginar o que é relevante naquilo que está querendo passar de informação.
Muitas vezes, o pessoal traz aquela descrição rebuscada: "a borda fina arredondada, verde limão". O Leo tem um treco. A não ser que seja, de fato, uma mudança de identidade de marca, algo nessa linha que justifique.
Então, a dica — mais uma vez, voltando às nossas oficinas, porque tem muito conteúdo sobre isso — é fazer uma descrição do que realmente importa, do que realmente é informativo.
E acho que vale dar esse gancho para o Leo: não adianta só o pessoal de conteúdo estar preocupado em fazer uma descrição bacana se a galera de desenvolvimento não está ali colocando também o atributo "alt" direitinho, para que a imagem seja exibida no CMS, tudo de acordo. Essa jogada entre conteúdo e a galera de desenvolvimento, né?
________________________________________
[Leonardo]
Com certeza. E o grande problema que eu vejo em muitos lugares é que, às vezes, o pessoal coloca descrições perfeitas, que passam a mensagem, mas você encontra essa descrição totalmente fora de contexto.
O que acontece? Às vezes, o cara coloca o texto com a descrição do produto por último e a imagem fica em primeiro lugar. Não tem uma ordem de navegação.
A gente vai falar sobre isso também em outros podcasts, mas isso atrapalha. Se o desenvolvedor não cuidar para que a descrição do produto — ou da imagem, porque pode ser produto, reportagem, notícia — esteja no lugar certo, a pessoa não vai conseguir aproveitar.
E tem outras questões também. Por exemplo: colocar qualquer coisa no atributo "alt" nem sempre é bom. Por quê? Porque você coloca qualquer coisa ali e não é como se estivesse andando na rua, usando qualquer coisa que você bate como referência. Não adianta: você não vai conseguir, você não vai entender.
________________________________________
[Jeniffer]
Sim. E se for um texto muito longo, Leo? Conta algum exemplo de uma descrição em que você pensou: "meu Deus, tô cansado; até eu terminar de escutar isso aqui, já passou o tempo". Tem algum caso desse?
________________________________________
[Leonardo]
Nossa, bastante.
Descrever imagem também é uma arte de ser sucinto. Você precisa passar a mensagem que precisa passar. Se eu estou vendendo uma bolsa, o que eu tenho que falar sobre detalhes dessa bolsa? É ser sucinto nesse sentido.
Não precisa ficar falando do fundo, da mesa em que a bolsa está em cima. Não é isso que a gente quer ver. A gente quer saber sobre o produto. Então, foco no foco.
________________________________________
[Jeniffer]
Agora, passando para o segundo mito, Si, falando de design um pouquinho: muita gente coloca informações importantes nas imagens, como promoções, sem texto alternativo. Aí tem aquela promoção, 50% de desconto… fica bonito, mas quem não enxerga perde essa mensagem, né?
Queria fazer uma pergunta para vocês dois, mais aberta, sobre essa coisa de colocar textos nas imagens. Si, fala um pouquinho sobre isso e depois queria ouvir o Leo também.
________________________________________
[Simone]
Isso é um dos erros — a gente brinca que é erro da galera preguiçosa mesmo. Depois que você tem a informação… calma lá, para o pessoal não se sentir ofendido e ofendida aqui… mas é muito ruim, porque, como a gente sabe, o leitor de telas não lê a imagem: ele lê o texto que foi colocado para descrever aquela imagem.
Então, quando um designer ou uma designer vai lá e chapa a imagem com texto, se o pessoal de conteúdo não colocar no texto alternativo o que é aquele banner e qual informação ele traz, a pessoa, como o Leo, que navega com leitor de tela, bate ali e perde o melhor do site, que é o que está naquele campo quente.
A recomendação é: viu que tem banner chapado com imagem? Puxa vida, dá aquela cutucada no designer e na designer, faz o seu papel enquanto conteudista consciente e, ao mesmo tempo, coloca a descrição.
Isso tem que ser mandatório. Senão, as pessoas que não enxergam ou têm baixa visão ficam excluídas daquela informação, né, Leo?
________________________________________
[Leonardo]
Com certeza. E aí aquela pessoa com deficiência, um pouco mais espertinha, mais bem desenvolvida na tecnologia, pode falar: “ah, mas aí é só pegar a imagem e mandar para uma inteligência artificial reconhecer”.
E eu respondo: não. Nem todas as imagens você consegue pegar e mandar para uma inteligência artificial reconhecer. E, pior, não é sempre que você vai ter interesse ou sequer vai saber que aquela imagem existe.
Às vezes está ali "promoção 50%", mas, se você não teve acesso ao conteúdo e não sabe que a imagem existe, você não vai mandar para lugar nenhum, não vai encontrar isso em lugar nenhum e não vai saber que está acontecendo.
É muito comum isso em banner. Coloca no banner do site: “é dia de promoção, 50% de desconto” e você não acha essa informação.
Aí está todo mundo comprando e depois vem aquela coisa: “Pô, você não comprou aquele produto? Estava com 50% de desconto lá naquela empresa X”. E eu falo: “poxa, mas eu nem sabia”.
________________________________________
[Simone]
Jeni, vou acrescentar uma informação bacana: a gente está com colinha aqui, né, pessoal? Tem que ter colinha. A gente sabe muito, mas a colinha ajuda pra caramba.
Acho legal você explicar, Leo, a questão do código semântico. Porque, sem código semântico, a informação desaparece para quem depende de tecnologia assistiva. Nesse caso, colocar o "aria-label" resolveria? Procede?
________________________________________
[Leonardo]
Sim. Na verdade, você tem várias formas de pôr imagem numa página.
Uma delas é usar a tag "img", que é a mais comum, com o atributo "alt" (texto alternativo). Você coloca ali e a pessoa cega vai ter acesso ao texto que você colocou no atributo "alt".
Mas, às vezes, você usa um elemento diferente, que não é semanticamente uma imagem, e pode atribuir esse valor semântico colocando um papel de imagem naquele conteúdo e um "aria-label" para descrever.
O que acontece também — e eu posso contar para vocês — é que muitos programadores colocam a imagem no fundo de uma "div" que não tem valor nenhum, e o leitor de tela passa batido, não lê absolutamente nada. Ou, às vezes, lê qualquer outra coisa menos aquilo, passa e ignora que existe.
Então, não pode, né, gente? Vai colocar uma imagem na página? Vamos colocar o atributo correto, colocar uma tag de imagem.
Se não tem como fazer isso porque o sistema é muito antigo e foi feito errado, acontece. Às vezes acontece.
Então, vamos tentar colocar pelo menos um "role" de imagem ali, um papel de imagem, e um "aria-label" para descrever que aquilo é realmente uma imagem, o que está dizendo e para que serve.
________________________________________
[Simone]
Ainda bem que eu rolei a bola para o Leo, está vendo?
________________________________________
[Jeniffer]
Sim, muitas informações importantes e esclarecedoras aqui.
E, fora esses exemplos todos que a gente citou, queria que vocês falassem também de coisas super populares que a gente usa no dia a dia: os "GIFs", os "GIFs" animados, que todo mundo gosta e usa para se divertir.
E também as imagens mais decorativas, ícones, enfim. Falem um pouquinho sobre isso. Si, comenta um pouquinho.
________________________________________
[Simone]
Acho que os "GIFs"... eu, pelo menos, vivo de "GIF".
Inclusive, quando a gente vai mandar algum GIF para o Leo por e-mail ou para outros embaixadores e embaixadoras com deficiência visual, a gente descreve o "GIF". Às vezes, a gente até brinca: “GIF para o Leo ver”, “GIF para o Gus ver”.
Porque é isso: o "GIF" também precisa. É um recurso muito gostoso, uma linguagem super leve… e por que excluir as pessoas que não enxergam dessa brincadeira, dessa comunicação gostosa? Então, sim, os "GIFs" também. É uma prática inclusiva, a gente deve fazer essa descrição.
Sempre tem dúvida nas oficinas sobre os "emojis". “Descrevo ou não descrevo emoji?” Não se descreve "emoji", gente.
Primeiro, usa-se "emoji" com muita parcimônia. Isso a gente fala também nas oficinas e vai falar quando comentar sobre conteúdo textual e linguagem inclusiva. A gente deve usar pouco "emoji" e não precisa descrever “rosto sorrindo”, “rosto chorando”, porque o leitor de tela já capta o "emoji" e faz essa leitura.
Sobre ícones, é o que a gente estava comentando: os ícones decorativos… a gente precisa se colocar no lugar da pessoa que não enxerga, mas antes de uma pessoa que enxerga. A gente presta atenção no ícone decorativo?
Estou falando de uma matéria e tem lá uma folhazinha para falar de sustentabilidade. Quem é que está analisando cognitivamente a folhazinha? Então, não tem necessidade de fazer essa descrição.
Com o tempo, Jeni, eu sempre falo para o pessoal: “Ai, meu Deus, eu estou com receio de começar a descrever”. Isso é uma prática que a gente vai pegando.
Viu ícone decorativo? Esquece.
________________________________________
[Jeniffer]
Agora eu queria puxar outro assunto importante: redes sociais.
Todo mundo está nas redes sociais e, às vezes, é onde a gente mais publica imagens. Se vocês tivessem que dar alguma dica sobre redes sociais, o que vocês falariam? Simone?
________________________________________
[Simone]
Bora lá!
Na verdade, as dicas de produção são as mesmas que você usa para produzir de maneira geral.
É olhar o que é relevante naquele post. Por exemplo, se é um post de um evento: um evento sábado que vem, roda de samba, no local tal, com a hora… e isso não está sendo passado no texto. Então, tem que descrever essa informação.
Evento, texto do evento, roda de samba tal, no horário tal. E, claro, se tiver uma foto muito relevante… por exemplo, vai ter o Xande de Pilares, que vai ser a grande atração. Pô, ele tem uma presença muito forte. Então, descrever: "foto do Xande de Pilares segurando o tamborim", enfim.
A dica é olhar a relevância e passar a informação.
Muitas vezes, a informação relevante está no texto da imagem e não necessariamente na foto de quem está aparecendo. Então, primeiro: qual é a relevância daquele conteúdo? O que deve ser passado?
A maioria das redes sociais tem campo de texto alternativo. É escondidinho? É escondidinho. Você tem que ir em configurações avançadas, dá um trabalho. Mas, depois de tudo que a gente aprendeu aqui, dá para entender a importância de ter esse campo preenchido. Então, bora colocar a descrição ali.
E a nossa recomendação, enquanto Movimento Web para Todos, analisando benchmarks internacionais e ouvindo pessoas com deficiência que se beneficiam, é continuar fazendo a descrição aberta também.
A gente coloca no texto alternativo e coloca a descrição aberta, porque isso beneficia não só a pessoa cega, mas pessoas neurodivergentes também, que podem ter dificuldade de interpretar a informação. E a gente também chama atenção para a causa.
Eu tenho muitos amigos com deficiência na minha rede e as pessoas que não têm deficiência me mandam inbox direto falando: “Si, eu acho o máximo você fazer a descrição, o que é isso?”. Então, a gente provoca as pessoas para essa reflexão.
________________________________________
[Leonardo]
Mesmo na sua rede social pessoal, é interessante você falar.
Às vezes, você posta uma foto numa praia ou numa festa e quer falar sobre a roupa que você está vestindo. É super legal você falar, porque, senão, fica aquela coisa: você passa na rede social e fica só "foto, foto, foto, foto, foto".
Chega um momento em que a pessoa com deficiência visual não vai ter interesse de ficar na rede social ouvindo sempre a mesma coisa: “foto”. Não importa para mim se é foto, né?
Ou então a pessoa posta: “quem disse que a vida está fácil?” ou “quem disse que a vida tá difícil?” e posta uma foto totalmente oposta, tomando um drink numa piscina, e não coloca nada disso. Como é que eu vou entender? Eu, como pessoa cega, como vou entender o que está acontecendo?
Então, assim… se você quer isso...
________________________________________
[Simone]
Você até acha que a pessoa está passando mal, passando alguma dificuldade, e a pessoa tá curtindo a vida ali, numa foto na praia, né?
________________________________________
[Leonardo]
Exatamente. Quer uma doação, está precisando de ajuda? Aí fica só a pessoa cega, coitada, precisando.
Então, gente, tem que ter esse bom senso de descrever as imagens ali também, mesmo que você saiba.
Aliás, se você souber ou não souber que tem uma pessoa com deficiência, mas está me ouvindo aqui agora nesse podcast, é importante fazer essa descrição.
Você nunca sabe quando vai aparecer alguém. E você também não sabe se uma pessoa do seu rol de amigos consegue ver todos os detalhes daquela foto.
Então, é interessante oferecer essa descrição.
________________________________________
[Jeniffer]
Sim. Vou colocar uma questão pessoal: repostagem de conteúdo.
Muitas vezes eu vejo frases bonitas, coisas bonitas de perfis na rede social favorita e quero repostar. E eu fico na dúvida: eu descrevo a imagem que estou repostando ou considero que o produtor de conteúdo fez a parte dele e já colocou uma descrição? Na dúvida, Leo, o que você indica?
________________________________________
[Leonardo]
Na dúvida, descreve de novo, porque não dá para confiar que a pessoa que postou aquilo realmente colocou acessibilidade. Às vezes até sim, mas, por via das dúvidas, faz de novo.
E é bom que você aproveita para treinar, né?
________________________________________
[Simone]
Não estava no script, mas é bacana comentar que a gente estava vindo para cá, né, Leo, de carro, conversando, e a questão da descrição de imagem em gráficos — ou nesses sistemas em que os gráficos são gerados automaticamente — é um problema seríssimo. Muita informação é passada em gráfico e aí o pessoal fala: “poxa, descrevo ou não descrevo? Tem espaço ou não tem espaço?”.
Nesse caso, a gente recomenda não só colocar no texto alternativo, mas colocar, em algum lugar perto do gráfico, a descrição aberta do gráfico, explicando e contextualizando aquela informação.
E o Leo estava contando para mim… conta aí, Leo.
________________________________________
[Leonardo]
O gráfico é um problema grande por quê? Ele tem informações, ele quer dizer alguma coisa — geralmente informação tabular e tal. O importante de descrever um gráfico, de forma simplificada, é colocar um texto explicando exatamente o que ele está querendo mostrar, porque aí você vai ter que interpretar o gráfico.
O que acontece muitas vezes no mercado de trabalho é que você precisa analisar o gráfico. Às vezes, não tem ninguém para gerar aquela descrição para você. Às vezes, é um sistema que gera um volume de dados e você tem que analisar.
Por exemplo, na empresa em que eu trabalho, a gente não tinha nenhuma ferramenta para isso e eu tive que desenvolver uma ferramenta para analisar o gráfico.
Então, eu entro lá e vou navegando com a setinha naquele gráfico e ouvindo os sons que me dizem como está aquela informação.
É um pouquinho mais complexo; não vou cobrar de vocês fazerem isso. Às vezes, precisa de uma pessoa com deficiência visual muito experiente na prática, ou ler algum artigo sobre como fazer isso.
Mas é possível. Qualquer pessoa cega poderia analisar um gráfico com bastante tranquilidade.
Até o pessoal do trabalho fala: “nossa, mas peraí, como você sabe que essa linha está passando por cima dessa outra?”. Porque eu estou ouvindo aqui.
________________________________________
[Jeniffer]
Muito bom, muito bom. Muito legal.
E é por isso também, Leo: isso que você falou é bem importante para a gente reforçar uma das coisas que a gente gosta de falar, que é sempre ter as pessoas com deficiência envolvidas.
Quando a gente está produzindo conteúdo ou fazendo codificação, design, isso ajuda bastante, porque tem a experiência, a vivência do que funciona e do que não funciona.
Eu queria pedir para a Si fazer um resuminho do episódio. Mas, antes, queria perguntar para você, Leo: se você pudesse dar um recado bem direto para quem publica imagens todo dia, qual seria a dica principal? Tanto para quem publica imagens profissionalmente quanto para quem publica nos seus contextos pessoais. Que dica você daria para não deixar ninguém de fora?
________________________________________
[Leonardo]
Acho que uma das coisas que você falou no finalzinho é ter a participação das pessoas com deficiência no projeto, se for profissional. Se você tiver acesso a alguém na sua empresa, uma pessoa com deficiência, testa com ela aquela descrição de imagem: se funcionou, se entendeu bem, se não entendeu.
Se não, tenta fazer o melhor juízo possível sobre aquilo que a pessoa poderia querer entender daquela imagem, talvez pensando no que você mesmo gostaria de saber se você não enxergasse.
Ter esse bom senso ajuda.
E isso é uma coisa que você aprende com o tempo. Você faz e provavelmente recebe feedback de alguém. Alguém vai te contar o que achou.
Aproveita esse feedback para incorporar e conhecer cada vez mais o que você está fazendo.
Mas uma coisa que não vale a pena é não fazer. Isso não vale a pena.
________________________________________
[Jeniffer]
Joia. E aí, Si?
________________________________________
[Simone]
Bom, agora não é cola, não. Agora é de cabeça mesmo que eu vou ter que lembrar, mas é importante.
A gente falou da importância do texto alternativo estar ali, realmente, semanticamente aplicado corretamente.
Falou da importância de o pessoal de design não salvar a informação como imagem. E, se isso acontecer, o quanto é importante o pessoal de conteúdo entender que é preciso, obrigatoriamente, ter o texto alternativo preenchido com aquela informação.
O Leo trouxe várias experiências de como a vida dele e de tantas outras pessoas é impactada pela falta de acessibilidade nas imagens, e como é importante entender que outros tipos de recursos — não só necessariamente a imagem como a gente está acostumada a interagir — também precisam de descrição: "GIF", gráfico.
A gente não entrou aqui em tabelas, que tem nas nossas oficinas. A gente fala bastante de e-mails marketing que têm imagem, de WhatsApp que você vai mandar e tem imagem.
Então, é sempre ter essa preocupação: tem um conteúdo imagético passando informação? Tem que ter descrição.
________________________________________
[Jeniffer]
Joia! Pessoal, então é isso.
Muitas dicas sobre imagens, sobre como tratar acessibilidade de imagens.
Queria agradecer a toda nossa audiência por estar com a gente aqui nesse episódio. Até a próxima!