Acessibilidade e seus desafios

Como nós podemos envolver recursos facilitadores, para que qualquer pessoa, independente de suas dificuldades, possa compreender e interagir no ambiente online?

Bia Ferrer
Hub de Design TOTVS
10 min readNov 23, 2023

--

Ilustração de uma tela de computador apresentando a imagem de livros e um botão de ALT apresentando um texto informativo sobre como usar o recurso.
#ImagensQueFalam: Ilustração de um monitor de computador apresentando a imagem de uma pilha de livros com capas nas cores amarelo, vermelho e azul, onde ao lado esquerdo existe um livro aberto. No canto inferior esquerdo da tela, existe um botão escrito ALT. Deste, sai uma caixa de diálogo onde se lê: Sou o ALT. Não preciso ser breve e nem prolixo, mas devo ser descritivo. Fonte da imagem W3C Brasil. Fim da descrição.

Recentemente, Michelle Frasson e eu, pesquisadoras de UX no HUB de Design da TOTVS, recebemos como desafio, desenvolver um Guia de Acessibilidade com foco no ambiente digital, que pudesse trazer maiores conhecimentos sobre o assunto para as pessoas da empresa.

Neste artigo, trazemos uma “pincelada" sobre os tópicos explorados em profundidade no documento original, pois, por mais que exista um movimento crescente em prol da acessibilidade, a comunicação inclusiva ainda não encontrou um caminho dentro de muitos canais. Quanto mais compartilharmos os aprendizados sobre o assunto, mais pessoas serão sensibilizadas enquanto outras, beneficiadas.

A World Wide Web Consortium (W3C) Brasil define acessibilidade nos ambientes digitais como:

“A possibilidade e a condição de alcance, percepção, entendimento e interação para a utilização, a participação e a contribuição, em igualdade de oportunidades, com segurança e autonomia, em sítios e serviços digitais, por qualquer indivíduo, independentemente de sua capacidade motora, visual, auditiva, intelectual, cultural ou social, a qualquer momento, em qualquer local e em qualquer ambiente físico ou computacional e a partir de qualquer dispositivo de acesso”.

Atuar em uma inclusão digital envolve considerar formatos e recursos diversos desde a etapa de planejamento, para que todas as pessoas tenham acesso à informação e possam se comunicar, devendo esta ação ser vista como uma necessidade e não como “um adicional”.

Na prática

Diferentes deficiências exigem diferentes medidas considerando seus diversos graus e particularidades. A melhor forma de obter esse entendimento é incluindo as pessoas no planejamento e nas decisões.

Enquanto isso não faz parte da realidade da maioria dos produtos e serviços, nossa intenção aqui é compartilhar algumas boas práticas que podem ser úteis no favorecimento da acessibilidade de conteúdos em nossas ações diárias.

Texto — será que todas as pessoas estão entendendo o que queremos comunicar?

O objetivo da acessibilidade é atender à diversidade de necessidades, características e preferências de todas as pessoas; logo, não se refere apenas às dificuldades de percepções e movimentos, mas também, deve levar em consideração a possibilidade de compreensão.

A escolha da fonte, bem como o seu tamanho, é extremamente importante para pessoas com baixo letramento, que utilizam Tecnologias Assistivas (TA), ampliadores de telas, etc.

Faça

  • As melhores fontes para acessibilidade são: Tahoma, Verdana, Arial e Helvetica;
  • Utilize fontes simples e que contenham design limpo;
  • O tamanho recomendado para a fonte é de 16PX;
  • Na necessidade de no texto existirem expressões regionais ou termos especializados, é preciso que seus significados sejam expressos no próprio texto, como nota de rodapé ou em uma sessão “dicionário”;
  • Escreva palavras por extenso;
  • Ao se tratar de siglas conhecidas como IRPF, PIS, RG, CPF, disponibilizar na interface um tooltip com a função de ajuda contextual ou informação adicional contendo sua explicação de forma completa;
  • Recomenda-se dividir um texto longo em textos menores, com o uso da estrutura de cabeçalhos;
  • Utilize lista de itens em vez de uma longa série de palavras ou frases;
  • Por linha, opte por 60 caracteres (11 a 13 palavras).

Não faça

  • Não use famílias de fontes com serifas, com decorações ou em estilo manuscrito;
  • Formatações como itálico, negrito ou fontes decoradas, devem ser evitadas;
  • Atenção ao espaçamento entre letras ou palavras e textos em blocos, pois podem dificultar a compreensão das pessoas usuárias, a leitura por TA (Tecnologias Assistivas) ou ampliadores de telas;
  • Evitar expressões regionais ou termos especializados;
  • Não utilize abreviação de palavras;
  • Não aplique a formatação justificado no texto, o espaçamento criado entre as letras dificulta a ação do leitor de tela.

Cores — não conte só com elas para destacar partes do texto

Sabe aquela parte do texto que por vezes queremos destacar e para isso, utilizamos marcadores? Nada errado em utilizar esse recurso, mas tenha em mente que seu uso não pode ser a única forma de trazer atenção para essa determinada parte do texto.

Tenha em mente também, que o contraste deve estar disponível, devendo existir a possibilidade do seu ajuste caso necessário.

Faça

  • Utilize uma taxa de contraste de no mínimo 3,1%;
  • Em gráficos e tabelas, opte por adicionar padrões ou texturas;
  • Para que as informações não fiquem somente na cor na hora de destacar uma parte do texto, utilize o recurso de sublinhar.

Não faça

  • Não coloque apenas cores como a única fonte de informação;
  • Não utilize uma taxa de contraste inferior a 3%.

Imagens que falam

Ilustração de duas mulheres sentadas em mesa de trabalho, usando computador. Estão em ambientes diferentes, cada uma em uma lado da ilustração, separadas por uma linha no centro da imagem.
#ImagensQueFalam: Ilustração representando duas mulheres sentadas em suas mesas de trabalho, usando computador. Elas estão em ambientes diferentes, representados por uma linha central que divide a imagem e cores de fundo diferentes. Elas estão de costas, uma para outra. Na imagem da esquerda, uma mulher de cabelos castanhos está sentada em uma mesa, com um computador, em um espaço com a parede em cor verde. No monitor deste computador, pode ser vista a imagem de uma flor vermelha em um fundo verde, e uma representação de texto. Desta mulher, sai uma caixa de diálogo que diz: "Tem imagem, mas não tem texto alternativo". Na imagem da direita, uma mulher de cabelos loiros está sentada em uma mesa, com computador, em um espaço com a parede em cor amarela. No monitor deste computador, pode-se ler "Problemas de acessibilidade encontrados" seguido de uma representação de texto. Desta mulher, sai uma caixa de diálogo que diz: "Obrigada por nos contactar! Vamos encaminhar o seu pedido para a área". Fonte: W3C Brasil. Fim da descrição.

Convivemos com uma comunicação digital que é cheia de imagens e vídeos. Se a intenção é incluir, transformar imagens em palavras é um recurso fundamental para que as tecnologias assistivas — como o leitor de tela, a linha braille e navegadores textuais — interpretarem o conteúdo desses elementos.

A descrição de imagem tem como sua principal função, permitir a interação com a imagem que está sendo compartilhada, podendo ser fotos, gráficos, organogramas, ilustrações etc.

Faça

  • Observe o contexto em que a imagem está inserida, para saber o que deve ou não constar na descrição;
  • Descreva textualmente todas as imagens que transmitem informações relevantes, tentando responder: O quê?, Quem?, Onde? e Como?;
  • Escreva as palavras corretamente;
  • Faça uma descrição sucinta;
  • Descrições detalhadas podem ser utilizadas quando os detalhes fazem toda a diferença, como no caso de obras de arte;
  • Deve ser objetiva, imparcial e sem juízo de valor de forma que permita uma interpretação própria;
  • Anuncie o tipo de imagem: fotografia, imagem, cartaz, ilustração, desenho, folder, capa de livro, gráficos e outros;
  • Comece a descrever da esquerda para a direita, de cima para baixo (a ordem natural de escrita e leitura ocidental);
  • Informe as cores: fotografia em tons de cinza, em tons de sépia, em branco e preto. Se a foto for colorida, não precisa informar “fotografia colorida”, porque você vai dizer as cores dos elementos da foto na descrição e a indicação ficará redundante;
  • Inicie pelos elementos menos importantes, contextualizando a cena, e vá afunilando até chegar no ponto chave da imagem;
  • Respeite a estrutura hierárquica das informações para que a compreensão da imagem faça sentido. Informe em quais margens estão cada elemento, o lado que se encontram as pessoas, em quantos níveis está escrita determinada frase, as emoções nos rostos, as cores ou os tamanhos relativos;
  • Para diagramas, fluxos ou gráficos, tente transmitir o insight; por exemplo: “Um gráfico de barras mostrando as vendas ao longo do tempo. Em julho, as vendas da marca A ultrapassaram as vendas da marca B e continuaram aumentando ao longo do ano”;
  • Descreva claramente o ponto de partida, o progresso e a conclusão dos fluxogramas;
  • Ao final escrever: [Fim da descrição].

Não Faça

  • Dispense a descrição de imagens apenas decorativas;
  • Não use adjetivos ou expressões que remetam a sentimentos ou opiniões pessoais;
  • O alt text (texto alternativo) não deve ser o mesmo da legenda de descrição da imagem.

Utilize hashtags

As hashtags, além de serem uma forma de organizar e catalogar conteúdos, atualmente adquiriram a função de inclusão.

Entre as mais utilizadas estão #PraCegoVer e #PraTodosVerem.

Outra hashtag que pode ser utilizada para esse fim é #ImagensQueFalam, criada para a campanha de mobilização para descrição de imagens em sites e apps.

Diferença entre o Alt Text e Descrição de imagem

O Alt Text é a descrição dos elementos visuais de uma imagem que, embora possa apoiar uma pessoa com deficiência visual, sua maior função está atrelada aos mecanismos de busca.

A descrição contida em um Alt Text é essencial para que os mecanismos de busca entendam o que está sendo representado naquele recurso visual de forma que o mesmo fique melhor posicionado nas pesquisas, além de servir de suporte no caso da imagem não carregar por alguma falha técnica ou na existência de algum bloqueador de imagem.

Audiodescrição

A audiodescrição é um recurso que traduz imagens em palavras “faladas”, sendo mais utilizado em filmes, cenas de teatro, obras de um museu, apresentações de um evento etc, tornando a experiência da pessoa com deficiência visual a mais autônoma possível, de modo que ela não precise necessariamente de um acompanhante ou guia para frequentar espaços de cultura e lazer.

Aqui, valem as mesmas “boas práticas” utilizadas para descrever imagens.

Faça

  • Utilize o recurso da audiodescrição mixado ao áudio original dos filmes (teatro etc), podendo estar disponível em fones receptores distribuídos nos locais de exibição;
  • Disponibilize o recurso em audioguias para exposições ou eventos;

Libras

Pessoas com deficiência auditiva também encontram suas próprias barreiras de acessibilidade.

Para minimizar as barreiras de comunicação, pessoas surdas utilizam Libras (Língua Brasileira de Sinais), que implica em uma língua gestual visual, onde é possível se comunicar por meio de gestos, expressões corporais e faciais. A Libras é reconhecida como meio legal de comunicação desde 24/04/2002.

Faça

  • Tanto no consumo de vídeos, eventos, palestras etc, além de usar legendas descritivas, sempre que possível, utilize também a LIBRAS;
  • Caso seja possível, permita o ajuste da velocidade das animações em vídeos;
  • Utilize a Libras em uma janela localizada no canto inferior esquerdo do vídeo.

Não faça

  • Evite criar vídeos sem libras;
  • Não coloque a janela de Libras nas partes superiores da tela;
  • Evite criar vídeos sem legendas;
  • Evite criar vídeos sem audiodescrição;
  • Evite criar vídeos sem a transcrição de textos.

Vídeos — cada vez mais utilizados no compartilhamento de conteúdo

A internet está cheia de vídeos, mas será que todas as pessoas conseguem captar seu conteúdo? Para um vídeo totalmente acessível, é preciso considerar alguns fatores que serão descritos a seguir.

Audiodescrição

Já contamos um pouco sobre esse recurso, e no vídeo, ele é essencial para que uma pessoa que não possa obter todas as informações de uma cena visualmente, “mergulhe” na história que está sendo contada.

Esta descrição deve ser objetiva, inserida entre os diálogos, apresentar todas as informações visuais que não façam parte deles.

Tradução em Libras (língua brasileira de sinais)

Geralmente é apresentada por uma pequena janela dentro do vídeo preferencialmente no canto inferior esquerdo da tela, em que uma pessoa ou avatar interpreta em Libras as informações auditivas.

Legendas

Destina-se aos usuários que não podem ouvir ou compreender, seja por haver alguma dificuldade auditiva, por dominarem mais a língua escrita do que a falada, ou por não disporem de recursos para a reprodução do som. Devem ser usadas, mesmo que o idioma falado seja o português.

Transcrição do vídeo em textos

Deve estar disponível a transcrição das falas e dos demais sons e ruídos significativos apresentados no vídeo e no áudio. Destina-se aos usuários que não podem ouvir ou compreender, seja por haver alguma dificuldade auditiva, por dominarem mais a língua escrita do que a falada, ou por não disporem de recursos para a reprodução do som.

Pode-se usar também a transcrição para oferecer traduções em outros idiomas. Além disso, esse recurso é essencial para pessoas surdocegas, que podem ler toda a informação oferecida por programas leitores de tela por meio de dispositivos que a convertem para a escrita braille.

A transcrição em texto também pode ser criada para conteúdo que contenha apenas vídeo sem áudio e de mídia sincronizada, incluindo também as informações visuais.

Legendas ocultas (closed caption)

Utilizadas por pessoas com dificuldades auditivas, são semelhantes às legendas comuns, contendo também, as informações dos demais sons e ruídos significativos.

Atenção

A audiodescrição e a janela de libras exigem profissionais gabaritados e sensíveis à arte, pois são responsáveis por garantir uma experiência estética aos usuários.

Caso seja possível, permitir o ajuste da velocidade das animações. Com isso, o vídeo ficará acessível ao maior número de pessoas usuárias possíveis, facilitando a compreensão das mesmas.

Descrição pessoal (Auto descrição) — dica de ouro

No início de reuniões, apresentações e painéis de discussão, é comum que as pessoas se apresentem. Uma pessoa vidente, consegue captar informações que vão além do que está contido nesta fala, o que deixa de fora, pessoas cegas ou com baixa visão.

Sendo assim, uma boa prática que incentivamos é que ao encontrar uma pessoa (ou um grupo) pela primeira vez, você forneça uma descrição de si mesmo e adote essa prática como parte das responsabilidades profissionais (e pessoais) na intenção de tornar os encontros inclusivos e acolhedores para todas as pessoas participantes.

Para tanto, recomendamos a seguinte sequência:

  • Apresentação básica contendo nome, idade, e qualquer outra informação relevante;
  • Etnia (cor da pele);
  • Estatura;
  • Olhos;
  • Cabelos;
  • Características marcantes existentes.

Isso faz com que as pessoas com deficiência visual construam uma imagem mental, e reconheçam a pessoa descrita caso haja alguma referência de características por terceiros.

Faça

  • Inicie pelo seu nome e o da empresa que representa (caso seja um encontro profissional);
  • Utilize características pessoais como elementos da autodescrição;
  • Mencione: gênero, idade, se possui alguma deficiência ou neuro divergência, raça/etnia, cor da pele, cabelo, altura, roupas e acessórios, local em que está (no caso de uma agenda online);
  • Uma boa regra de ouro é restringir-se a três elementos-chave em uma ou duas frases.

Não Faça

  • Não faça uma descrição muito grande quando existirem muitas pessoas participantes;
  • Avalie sobre quais detalhes devem ser compartilhados de acordo com o ambiente em que você está.

Conclusão: uma mensagem deve chegar para todas as pessoas

Política, moda, esportes, tecnologia, comportamento e outros. Seja qual for o tema, todas as pessoas devem ter direito ao acesso à informação de forma igualitária.

Promover uma comunicação inclusiva é ter consciência sobre diversidade, garantindo lugares de fala e oportunidades para diálogo.

As informações que compartilhamos aqui apenas “arranham” a superfície de todo um universo de interações onde os desafios são muitos e embora ainda exista um longo caminho a ser percorrido, nossa intenção é a de que este artigo seja um pequeno passo no apoio da disseminação de conhecimento e compartilhamento de práticas que possam ajudar pessoas na entrega de mensagens que possam alcançar muitas outras.

Michelle é uma pessoa cega, e utiliza o leitor de telas para trabalhar. Michelle não tem Medium, ele não é acessível para que ela possa fazer publicações. Diariamente, ela encontra barreiras que precisa lidar, e utilizando de sua criatividade e colaboração de seus pares, com frequência precisa encontrar outras formas de executar seu trabalho da melhor forma possível para manter seu desempenho e o alto nível de suas entregas.

Como pesquisadora de experiência, muitas das ferramentas que precisa utilizar no dia a dia de trabalho, ainda não são acessíveis, e juntas, pretendemos trazer mais sobre esse assunto em artigos futuros.

Quer falar mais sobre esse assunto com a gente?

Chama nóix no Linkedin

Bia Ferrer

Michelle Frasson

Agradecimentos especiais ao Caio de Mendonça na revisão de nosso texto.

Referências

Acessibilidade — GOV-BR

Gov BR — notícia 2021

Fundação domina — estatísticas pessoa com deficiência

Suporte Microsoft — acessibilidade em texto

Tutorial de descrição de imagens

autodescrição para reuniões

MWPT melhores práticas para PDFS acessíveis

Apresentações acessíveis — Microsoft

Boas práticas de comunicação — CPB

Audiodescrição — Fundação Dorina

Legislações — MWPT

Melhores práticas para PDFS acessíveis — MWPT

Descrição de imagens — Fundação Dorina

Conteúdo — MWPT

Cores acessíveis

Imagens acessível

Cartilha acessibilidade W3C

Gov BR — guia para produções audiovisuais acessíveis

Descrição de imagens — MWPT

--

--

Bia Ferrer
Hub de Design TOTVS

Pesquisadora muito interessada em comportamento e artista visual desde sempre.