Saber se um site ou aplicativo está acessível para pessoas com deficiência pode parecer algo muito técnico e difícil para pessoas que não trabalham diretamente no desenvolvimento de aplicações digitais.
Existem vários tipos de testes de acessibilidade que podem ser feitos dependendo da informação que você precisa saber. Há os mais aprofundados que analisam a fundo todas as falhas de acessibilidade que devem ser corrigidas e apontam, inclusive, os caminhos para isso. Estes geralmente são utilizados por profissionais com conhecimento técnico avançado em conteúdo, design e programação, além das diretrizes de acessibilidade digital.
Mas existem também outros testes mais simples e rápidos que qualquer pessoa sem esse tipo de formação pode fazer. Eles são muito úteis às equipes de gestão de projetos digitais, profissionais de marketing digital e, também, para pessoas usuárias ou que atuam em outras áreas e que querem ter certeza se um determinado site ou aplicativo está ou não acessível para tomar as devidas providências.
E são exatamente esses tipos de testes simples e rápidos que listamos a seguir. Você pode, inclusive, colocar em prática as nossas orientações testando esta página do site do Web para Todos onde você está, que segue as diretrizes de acessibilidade digital. Outra dica é abrir um site de sua preferência em uma nova guia em seu navegador, aplicar os testes e compará-lo com o do Movimento.
Estes testes estão de acordo com a versão mais atualizada (2.2) das diretrizes de acessibilidade da WCAG (Web Content Accessibility Guidelines), que são as principais referências nesta área utilizadas em todo o mundo.
Teste 1: acessibilidade nas legendas
Para que as legendas em conteúdos audiovisuais sejam acessíveis para pessoas com e sem deficiência é importante pontuar que existem dois tipos:
- Legendas direcionadas para pessoas surdas e ensurdecidas (LSE), que possuem informações dos efeitos sonoros importantes nas cenas, como uma trilha sonora, risos, som do ambiente, etc, e sempre colocadas entre colchetes.
- Legendas comuns que atendem a pessoas surdas e ouvintes, transcrevendo apenas o conteúdo falado nas cenas.
As legendas podem ser “fechadas” (em inglês, closed caption – CC) ou “abertas”. As “fechadas” aparecem na tela e precisam ser acionadas pela pessoa usuária ou telespectadora. Esse tipo é considerado o mais acessível uma vez que as legendas podem ser lidas por leitor de telas, beneficiando também pessoas com baixa visão, cegas e surdo-cegas. Além disso, elas podem ser traduzidas automaticamente para outros idiomas, caso a plataforma em que o vídeo estiver hospedado permita isso, como acontece no YouTube.
Já as legendas “abertas”, que também são chamadas de “legendas queimadas”, aparecem na tela conforme o conteúdo é exibido no vídeo sem a possibilidade de desabilitá-las. Elas são bastante utilizadas principalmente em redes sociais, como o Instagram. Esse tipo de legenda não pode ser lida por software de leitura de telas.
O que analisar nas legendas em vídeos presentes em sites e aplicativos
- Primeiro, observe se há legendas disponíveis. Se não houver, este vídeo não cumpre uma das diretrizes mais básicas de acessibilidade digital e, portanto, não pode ser considerado acessível.
- Se houver legendas (fechadas ou abertas), observe se são precisas e estão sincronizadas, por exemplo, correspondem à faixa de áudio, e se as palavras estão corretas. Legendas geradas automaticamente podem conter muitas imprecisões no texto e isso gerar falhas de compreensão do conteúdo. Se detectar falhas neste sentido significa que o vídeo está parcialmente acessível e precisa ser ajustado.
Teste 2: redimensionamento de texto
O redimensionamento serve para que pessoas com deficiências visuais menos severas possam aumentar o tamanho do texto de forma confortável, sem o uso de tecnologia assistiva.
Segundo a WCAG, quando o texto é ampliado em até 200%, ele deve ser redimensionado e reorganizado para se ajustar à largura da tela, exceto para imagens de texto e legendas, sem que seja necessário usar a barra de rolagem horizontal para ler o conteúdo do texto.
Como testar o redimensionamento de texto
Em uma página de um site qualquer, aperte e segure em seu teclado a tecla “crtl” e depois pressione a que tem o sinal de + até chegar nos 200%. Em seguida, analise e responda as seguintes perguntas:
- Todo o texto se ajusta automaticamente ao tamanho da tela, ficando fácil de ler?
- Todo o conteúdo permanece visível e legível, por exemplo, nenhum se sobrepõe ao outro?
- Todo o conteúdo pode ser visualizado sem a necessidade de usar a barra de rolagem horizontal para ler o conteúdo?
Se respondeu “sim” em todas estas perguntas, significa que o site está acessível neste quesito.
Teste 3: apresentação de links
Os links aparecem no conteúdo como um destaque (texto colorido e/ou sublinhado) ou como um elemento gráfico que, ao ser clicado, leva à referência de destino que pode ser um site, uma página ou um documento.
Links devem ser facilmente visíveis e diferenciáveis do conteúdo em torno para garantir que sejam visíveis e rapidamente identificados. A cor não deve ser a única forma de distinguir um link, já que existem pessoas com deficiência na percepção de cores. Além disso, pode ser de difícil visualização também a quem estiver em ambientes muito claros ou escuros.
Os links também devem ter um texto claro que explique sua finalidade. Uma boa descrição no texto do link possibilita que as pessoas entendam o contexto e decidam se desejam ou não clicar nele.
Por exemplo, a escolha adequada do título das páginas no menu de navegação informa qual conteúdo ele irá acessar naquela página. Da mesma forma, o uso de títulos genéricos para links, como “Clique aqui” ou “Saiba mais”, não é recomendado pois não informa o destino daquele link dificultando principalmente pessoas cegas que utilizam softwares leitores de tela, já que o título é o que vai ser falado pelo leitor.
Como avaliar a acessibilidade em links
Identifique onde há links na página do site ou aplicativo e responda às seguintes perguntas:
- Os links são mostrados com um sublinhado ou de outra forma bem visível (como negrito ou cor diferente do texto ao redor)?
- O texto do link descreve a finalidade dele (ou seja, não está apenas marcado apenas como “Leia mais” ou “Clique aqui”)?
- Os links levam ao conteúdo correto da página a que se propõe?
Se respondeu “sim” em todas estas perguntas, significa que o site está acessível neste quesito.
Importante reforçar que pode haver situações em que a finalidade do link seja desconhecida e obscura. Por exemplo: um jogo pode ter links identificados apenas como “porta #1”, “porta #2” e “porta #3”. Este texto seria suficiente e não indicaria falta de acessibilidade porque o objetivo deles é criar suspense para quem está jogando, mas ainda assim oferece um contexto mínimo para compreendê-lo e poder participar de forma autônoma do jogo.
Teste 4: legibilidade do texto
A legibilidade, do ponto de vista da percepção, foca em tornar o conteúdo confortável para quem for lê-lo. Por isso, é importante escolher bem a fonte, o estilo e o alinhamento do texto.
Além disso, o tamanho da fonte deve ser ajustável, permitindo que as pessoas aumentem o texto conforme suas necessidades. Isso significa que, se o texto for ampliado, ele deve continuar fácil de ler e ajustado à tela, sem sobreposição e sem precisar usar a barra de rolagem horizontal no computador.
Como avaliar a legibilidade do texto em sites e aplicativos
Identifique na página os títulos, parágrafos, listas, rótulos e outros textos e responda às seguintes perguntas:
- Estão sendo usadas fontes simples e comuns, ou seja, sem desenhos ou serifas (que são pequenos traços ou prolongamentos que aparecem no final das linhas de certos caracteres de uma fonte de texto)?
- O texto está alinhado à esquerda?
- Texto em negrito, itálico e letras maiúsculas está sendo usado sem excessos na página?
Se respondeu “sim” em todas estas perguntas, significa que o site está acessível neste quesito.
Teste 5: texto alternativo
Texto Alternativo ou ALT (sigla em inglês para Alternative Text) é a maneira de tornar a informação de um conteúdo não textual (fotos, ilustrações, gráficos etc) em textos que podem ser lidos pela tecnologia assistiva.
Por exemplo, uma imagem que tenha o texto alternativo deve descrever as características dela de tal forma que o leitor de tela possa ler essas informações para uma pessoa cega e ela compreender aquela imagem.
Vale destacar que não é necessário incluir texto alternativo em imagens que tenham função meramente decorativa em um site ou aplicativo.
Como avaliar a acessibilidade em imagens em sites e aplicativos
Identifique na página as imagens relevantes e que sejam parte da informação ou do contexto do conteúdo e siga as etapas:
- Clique com o botão direito do mouse em cima da imagem e selecione “Inspecionar” no menu que aparece.
- Confira na linha que aparecerá destacada se há texto logo após a o código “alt=”.
- Se este campo estiver preenchido significa que há texto alternativo. A próxima etapa consiste em você verificar se este texto alternativo descreve adequadamente e de forma concisa o conteúdo ou a função da imagem. Ou seja, você teria compreendido a imagem se tivesse apenas lido o texto alternativo? Se a resposta for “sim”, a página está acessível neste quesito.
- Mas se o campo “alt=” estiver vazio, significa que este site está descumprindo uma das regras mais básicas de acessibilidade digital.
Teste 6: navegação por teclado
Os elementos da interface devem ser acessíveis por teclado, ou seja, todos os botões, links e outros controles em uma página devem funcionar bem quando você usa apenas o teclado, sem precisar do mouse.
Isso é importante para pessoas que não podem usar um mouse, como aquelas quem têm cegueira ou baixa visão em grau elevado, e as que têm deficiência motora ou mobilidade reduzida nos membros superiores. Elas devem conseguir navegar e interagir com a página pressionando as teclas, como as setas, a tecla Tab e Enter.
Um problema comum que as pessoas usuárias de teclado que enxergam é a falta de uma indicação visível de sua localização atual na tela. Isso é um exemplo de falta de acessibilidade.
Como avaliar a acessibilidade na navegação por teclado
Abra a página do site que você quer avaliar e navegue pelo conteúdo usando apenas o teclado do seu computador, seguindo as instruções e respondendo às perguntas a seguir:
- Todos os botões, links, campos de formulário podem ser acessados usando apenas a tecla “tab”?
- Todos os botões, links, campos de formulário podem ser ativados usando a tecla “enter” ou a barra de espaço?
- Todos os botões, links e campos de formulário têm foco visível, ou seja, você consegue visualizar e identificar rapidamente em qual posição da página está?
- A ordem do conteúdo segue uma sequência lógica?
Se respondeu “sim” em todas estas perguntas, significa que o site está acessível neste quesito.
Teste 7: pular links
Pessoas que usam teclados, dispositivos de sopro, joysticks, ponteiros de cabeça e outros recursos de tecnologia assistiva semelhantes navegam pelas páginas de forma sequencial, ou seja, do primeiro item na parte superior ao último na parte inferior da página.
Existe um recurso de acessibilidade para evitar com que essas pessoas tenham que pressionar uma tecla ou botão várias vezes antes de acessar o conteúdo que deseja. Este recurso permite “pular links”, o que permite pular uma seção inteira de conteúdo, por exemplo, para chegar mais rapidamente onde se quer.
Estes tipos de links devem ser os primeiros itens em cada página e estarem de fácil acesso. Geralmente estão descritos como “Pular para o conteúdo principal”
Como saber se há link de atalho na página
Identifique se na parte superior da página, do lado esquerdo, há link que permita pular para o conteúdo principal do site. Faça isso apertando a tecla “tab” no teclado de seu computador. Se houver este tipo de link, responda às seguintes perguntas:
- O link de atalho pode ser ativado usando a tecla “enter”?
- Depois que apertou a tecla “enter”, o foco se move para a seção direita do conteúdo, seguindo uma ordem lógica de navegação?
Se respondeu “sim” em todas estas perguntas, significa que o site está acessível neste quesito.
Teste 8: estrutura de títulos
Os títulos de páginas e seções ajudam a organizar as informações, permitindo que a pessoa encontre facilmente o que deseja ao navegar pelo site. Também é importante que os títulos sejam descritivos, para que elas entendam o que vão encontrar antes de acessar a página. Além disso, os títulos devem seguir uma estrutura hierárquica lógica, como um esquema de tópicos e subtítulos, para que o conteúdo da página seja mais fácil de entender e navegar.
Como avaliar se a estrutura de títulos está adequada em um site ou aplicativo
Identifique os títulos na página do site que estiver navegando e responda às seguintes perguntas:
- Os títulos das páginas deste site descrevem corretamente o conteúdo de cada página?
- Percorra a página e observe os títulos principais e subtítulos. Eles estão identificados de forma sequencial e de um jeito que você consiga visualizar a diferença e relação entre eles?
Se respondeu “sim” nestas perguntas, significa que o site está minimamente acessível neste quesito.
Teste 9: tradução em língua de sinais
Oferecer tradução do conteúdo de um site em língua de sinais é muito importante para que este seja compreendido por pessoas surdas sinalizantes e que não tenham conhecimento ou fluência em língua oral. Em nosso país, a língua de sinais oficial é a Libras – Língua Brasileira de Sinais.
Oferecer tradução em língua de sinais permite que essas pessoas compreendam o que está sendo comunicado no site, seja em vídeos, podcasts ou em textos. Na WCAG há uma diretriz para que haja este tipo de tradução em vídeos, apenas.
Mas como há recursos disponíveis no mercado, alguns com suporte de inteligência artificial (um deles de uso gratuito, inclusive), nós sempre recomendamos que se adote essa como uma boa prática em acessibilidade digital.
Como avaliar acessibilidade em língua de sinais em sites e aplicativos
Acesse a página de um site e responda às perguntas a seguir:
- Se houver vídeos na página, há janela de Libras nele, ou seja, há intérprete no canto inferior direito da tela traduzindo o conteúdo em áudio exibido?
- Há na página botão para abrir um tradutor automático de Libras?
Se respondeu “sim” nestas perguntas, significa que o site está minimamente acessível neste quesito.
Teste 10: idioma de página
Muitos leitores de tela e outras tecnologias assistivas são internacionais. É preciso informá-los sobre o idioma que está sendo usado na página, caso contrário a tecnologia pode utilizar outro idioma como referência e a compreensão do conteúdo ficar totalmente comprometida. O que fazemos é verificar se este atributo existe, e se está correto.
Como avaliar se o idioma de página está declarado no site
Acesse a página de um site em português do Brasil e siga as instruções a seguir:
- Clique com o botão direito do mouse em qualquer lugar da página e selecione “Inspecionar” no menu que aparece.
- Use a barra de rolagem vertical e suba até chegar na primeira linha de código.
- Procure pelo código “lang=” e confira se na sequência está escrito “pt-BR”. Se estiver, o idioma do site está configurado de forma adequada para pessoas brasileiras que usam leitores de tela neste idioma.
Estes são apenas 10 exemplos de testes rápidos para ajudar você a identificar alguns dos principais problemas de acessibilidade em sites e aplicativos. Qualquer pessoa pode usá-los como parte de uma análise inicial para aumentar a conscientização sobre a necessidade de se implementar acessibilidade desde a fase de concepção de qualquer produto digital.
* Colaboraram na pesquisa e produção desta matéria as seguintes pessoas participantes da Liga Voluntária do Movimento Web para Todos: Camila Bueno, Evelyn Onofre Lóssio, Ethiene Bilhalva, Gigi Villari, Natacsha Melo, Rafaela Ometto, Rosemeire Cardozo Vidal e Thaís Castro.