Acessibilidade nas Redes Sociais

Time de Acessibilidade
Sicredi Tech
Published in
4 min readNov 29, 2023
Jovem mulher e homem cegos caminham sobre uma tela de rede social. Ela utiliza cão-guia que com suas patas toca um ícone de imagem e aciona um balão com uma imagem de dia de sol desenhada. Ele usa uma bengala que toca em um texto sublinhado azul e aciona um balão com ícone de link.

Descrevendo imagens estáticas

“Jovem mulher e homem cegos caminham sobre uma tela de rede social. Ela utiliza cão-guia que com suas patas toca um ícone de imagem e aciona um balão com uma imagem de dia de sol desenhada. Ele usa uma bengala que toca em um texto sublinhado azul e aciona um balão com ícone de link.”

Percebeu quanta informação uma simples imagem pode ter? Quando imagens não possuem textos alternativos, pessoas com deficiência visual ou cognitiva não conseguem ter o entendimento sobre o que é a imagem. E quando pensamos em redes sociais, isso significa um grande silêncio, pois na maioria das vezes as imagens contêm todo o significado do post. Descrever imagens também é importante caso, por algum motivo, a imagem não carregue. Assim, qualquer usuário com ou sem deficiência pode perceber e compreender a mensagem transmitida. Além disso, o texto alternativo é usado pelas ferramentas de SEO para categorização e ranqueamento de conteúdo web.

Por isso, nesse artigo queremos mostrar como você pode incluir textos alternativos em todas as suas imagens e transformar essa prática um hábito. Vale lembrar algumas dicas que trouxemos sobre a descrição de imagens estáticas no mês passado e outras mais:

  1. Descreva a imagem com detalhes suficientes ao propósito dela, mas seja sucinto e foque no que a pessoa precisa saber de importante do conteúdo;
  2. Idealmente seu cumprimento deve ser em torno de 150 caracteres como texto alternativo;
  3. Para imagens mais complexas ou em que a descrição fica extensa, inclua um texto alternativo resumido e também a descrição detalhada, seja em uma outra página (com redirecionamento de link) ou como descrição no corpo do texto principal. OBS: Em caso do uso de links, não esqueça de informar seu propósito ou destino no texto do link e evite usar expressões como ‘Clique aqui’, ‘Veja aqui, ‘Ouça aqui, ‘Saiba mais abaixo’, a pessoa que utiliza leitor de tela não consegue saber onde é o ‘aqui’ ou ‘abaixo’. Assim, caso o usuário navegue apenas por links, ele saberá do que se trata.
  4. Uso de emojis é liberado, pois são descritos pelo sistema. Apenas lembre-se de evitar emoticon (o passado dos emojis), e sempre use a pontuação adequada;
  5. Não esqueça que GIFS e figurinhas também devem ser descritos, beleza?
  6. E finalmente, reserve hashtags para o final do texto e cuide para não usar discriminatórias.

Agora, seguem instruções de como inserir a descrição da sua imagem em cada rede social:

Teams

Ao inserir qualquer imagem, basta clicar nela com o botão direito do mouse e selecionar a opção “Editar texto alternativo”. Insira sua descrição e pronto, você estará ajudando a acessibilidade!

Viva Engage

Após inserir a imagem, basta clicar em “editar” (dentro da miniatura da imagem) e abrirá o campo para inserção do texto alternativo. Priorize o cumprimento de até 128 caracteres.

LinkedIn

Após inserir a imagem, clique na opção “Texto alternativo” (logo abaixo da figura). Na janela seguinte, digite a descrição da imagem no campo “Texto alternativo” e, para finalizar, clique no botão “Concluído ”. Em seguida, basta publicar.

Medium

Ao adicionar a imagem no post, clique sobre ela e, em seguida, clique na opção “Alt Text” que aparece logo acima da figura. Então na janela “Alternative text”, insira a descrição no campo logo abaixo da imagem. Para finalizar, clique no botão “Save” no final da janela e pronto, a descrição será salva.

Instagram

Após carregar a imagem no app, clique em “Configurações avançadas” e em seguida em “Escrever texto alternativo”. Inclua sua descrição e clique em “Salvar”.

Facebook

Ao inserir a imagem, basta clicar em nos 3 pontinhos (no canto superior direito da imagem) e clicar na opção “Editar texto alternativo”. Insira a descrição na janela seguinte e clique em “Concluir”.

Descrevendo vídeos

A descrição de vídeos pode ser uma pouco mais complexa. Normalmente, ela é uma faixa de áudio gravada, que pode ser acionada e adicionada na faixa original e consiste na descrição de sons, cenários ou ações que não são expressos ou claros oralmente. Você já deve ter visto a opção de audiodescrição (AD) em plataformas de streaming ou filmes, e como exemplo, podemos observar o comercial de Páscoa da Lacta, cuja transcrição é:

“[Música] Lacta apresenta palavras.

Um garotinho está embaixo da mesa folheando um livro. Ele quebra os quadradinhos de uma barra de chocolate os organiza sobre uma bandeja. A mãe chega em casa e apoia a bengala numa parede. Ele olha para a mãe que se aproxima de uma cortina de miçangas. Ele a conduz até uma poltrona e entrega a bandeja. Ela toca nos quadradinhos que formam em Braille ‘te amo’.

Pequenos quadradinhos falam tudo.

Inspirado na história do Nicolas e da mãe.”

Para conferir o vídeo do comercial, acesse PALAVRAS | PÁSCOA LACTA | VERSÃO ACESSÍVEL — YouTube.

Contudo, em razão da complexidade de disponibilizar uma AD em redes sociais em geral, a alternativa mais simples é oferecer uma transcrição. Seja como legenda do post, para Viva Engage, Instagram, Facebook ou LinkedIn; seja como um arquivo em anexo ou link ou mesmo um texto logo após o vídeo no Teams ou Medium. E por fim, mas não menos importante, devemos lembrar da plataforma Youtube, que dispõe da funcionalidade de transcrição automática — que ainda pode conter algumas gafes, transcrição manual no Youtube Studio e também a possibilidade de carregar um arquivo de transcrição para o seu vídeo (nesse caso, deve-se observar os formatos de arquivos aceitos).

Você pode encontrar mais detalhes de como inserir a transcrição em Traduzir vídeos e legendas — Ajuda do YouTube (google.com).

E aí? Bora descrever tudo?!

Referências:

Texto alternativo: o que é, como elaborar e adicionar Alt Text (handtalk.me)

Como inserir texto alternativo para imagens em blogs e redes sociais — Centro Tecnológico de Acessibilidade do IFRS

https://medium.com/uxmpretas/o-ux-writing-de-m%C3%A3os-dadas-com-a-acessibilidade-digital-50ec1944a9cf

https://brasil.uxdesign.cc/emojis-e-acessibilidade-como-us%C3%A1-los-adequadamente-4269bcb7136d

--

--