Skip to content
Ilustração de um jovem desenvolvedor web Moçambicano sentado à sua secretária, rodeado por pilhas de livros, um candeeiro e um relógio

Quão acessíveis são os websites chaves em Moçambique?

Investigação baseada em dados

Usamos ferramentas automatizadas para medir as violações de acessibilidade de 90 websites chaves em Moçambique. Aqui está o que encontramos.

Estudo feito pelo FAMOD e Data4Change

Fevereiro de 2021

Leitura de 7 minutos

Esta é uma página da internet muito má, contendo muitas violações de acessibilidade. Isso é intencional.

Esta página da internet é o resultado da investigação baseada em dados que realizamos nos websites chaves de Moçambique. Nela iremos lhe mostrar exactamente como alguns dos websites mais importantes do nosso país continuam a excluir muitos de nós.

O que encontramos

Revemos 90 websites no total. Eles vão de serviços governamentais chaves à serviços bancários online, compras e notícias de saúde.

Nesses 90 websites, descobrimos mais de 700.000 violações de acessibilidade.

Isso traduz-se em 38 violações de acessibilidade por página de website única.

Vejamos agora as cinco violações mais comuns.

Ilustração de um grupo de jovens moçambicanos com necessidades de acessibilidade: uma mulher de óculos, uma mulher a andar de muletas com a perna com gesso, e um homem na cadeira de rodas. No fundo estão imagens de exemplos de websites nas versões móvel e desktop que eles desejam usar.
1 Baixa cor de contraste

A violação mais comum na nossa investigação foi

Hem?

Eu disse !!!

Duas palavras dificíeis de ler

Se você ainda não percebeu, o que eu estava tentando dizer era contraste de cores.

O contraste de cor é a diferença visual entre

  1. a cor do texto; e
  2. a cor do plano de fundo sobre o qual ele fica
Esta caixa com baixo contraste de cor diz contraste de cor
Esta segunda caixa com baixo contraste de cor diz contraste de cor
Esta terceira caixa com baixo contraste de cor diz contraste de cor

Em média, os websites que pesquisamos tinham 14 violações de contraste de cor por página.

A falta de contraste de cores exclui pessoas com visão reduzida ou baixa. Ter contraste de cor insuficiente no seu website é como colocar-se no modo silencioso. As pessoas não saberão o que está tentando dizê-las.

Mas, assim como sair do modo silencioso, existe uma solução simples!

Podemos medir e verificar o contraste de cores do texto em uma página da internet usando ferramentas online gratuitas. Por exemplo, Corhexa (Abre em uma nova janela). Temos uma lista de muitas outras ferramentas de contraste de cores no nosso kit de ferramentas digital.

2 Falta de pontos de referência

Quer saber qual foi a segunda violação mais comum em nossa investigação? É a falta de estrutura quando se trata do conteúdo da página.

Imagine ver ou ouvir uma página da internet como esta...

Uma página da internet imaginária que é apenas texto não estruturado.

Que tal agora?

Uma página da internet imaginária que possui estrutura: um logotipo, botões de navegação, títulos, subtítulos e o texto principal

Se tem uma deficiência visual, pode estar acostumado a usar o que é conhecido como "leitor de tela". Leitores de tela são softwares em computadores que convertem texto em fala.

É mais fácil navegar uma página da internet com um leitor de tela quando o conteúdo está organizado em secções claras. Por exemplo, um cabeçalho, barra de navegação, conteúdo principal e rodapé.

Pode ser difícil para um usuário de leitor de tela encontrar conteúdo da página se o conteúdo não estiver em uma secção. O propósito desse conteúdo pode também não ficar claro.


A página da internet média em nossa amostra tinha 13 pedaços de conteúdo de página sem uma estrutura clara.


Existe uma solução simples para este problema: os desenvolvedores podem usar “HTML5 elements” ou “ARIA landmarks”. Estes identificam as secções no código do website.

3 Links não funcionais

Depois, havia os links.

Quer comprar este livro para os seus estudos? Vá aqui.

Você não clicou?

Está bem, deseja receber a transferência de pagamento online que seu amigo enviou? aqui?

Você também não clicou nisso ?!

Alguém que não consegue usar um mouse e depende do teclado para navegar na internet, não conseguirá selecionar um link, a menos que isso tenha sido codificado pelo desenvolvedor. Da mesma forma, alguém que usa um leitor de tela para navegar na internet, não saberá que existe um link, a menos que tenha sido codificado pelo desenvolvedor.

Sem essa informação, os usuários de teclado e de leitor de tela, não conseguem realizar a actividade mais básica da internet: seguir os links.

A página da internet média em nossa amostra tinha 4 links não funcionais.

Há uma solução simples: os desenvolvedores podem garantir que dêem a todos os links numa página da internet um “foco programático”. Este é um termo para descrever o tratamento de um item numa página da internet como um "evento" interactivo.

4 Imagens sem texto

Digamos que gostaria de saber sobre as diferentes universidades nas quais pode se inscrever.

Lê sobre uma e tem um curso no qual está interessado. Óptimo!

Então se depara com isto:

A blank image

O que é? Por que este website está a mostrar-me uma imagem vazia?

Quando não colocamos texto em volta de imagens nos websites, deixamos os usuários de leitores de tela se perguntando "o que eu perdi?"

Será que foi…

As possibilidades do que a imagem em branco pode ter sido: talvez um logotipo, foto ou diagrama?

Existe uma solução simples: use o texto alternativo "alt". Os criadores de conteúdo devem fornecer a cada imagem uma alternativa em texto que um leitor de tela possa ler. Desenvolvedores de páginas na internet: Toda <img> deve ter um atributo alt="".

Se fizermos isso, todos saberão que a imagem era de...

A photo of a cute black and brown dog

A página da internet média em nossa amostra tinha uma imagem sem texto alternativo "alt".

5 Sem texto para elementos interactivos

Pergunta: Você está gostando desta página da internet horrível?

Pode responder que é confusa, que é feia, que não a percebe, outro.

Então, será que isso significa que é possível dizer que "É confusa" e "Outro - não gosto dela"? E se você quiser dizer 'todas opções acima' - isso também é possível?

Se é capaz de ver, verá que as respostas a esta pergunta estão na verdade dispostas como caixas de seleção.

O mesmo formulário desposto como caixas de seleção

O design visual aqui sugere que sim, pode responder quantas respostas se aplicarem.

Se não é capaz de ver, e não há texto alternativo para os botões interactivos, então não saberá que tem essa opção. Frustrado, pode selecionar ‘É confusa’ e deixar desse jeito. Mas no processo você não foi capaz de dizer o que realmente pensa. Você foi silenciado.

A página da internet média em nossa amostra tinha pelo menos um elemento interactivo sem texto que o acompanha.

Existe uma solução simples para isso. Os desenvolvedores podem incluir texto alternativo com botões interactivos nos formulários. Incluir esse texto remove a ambiguidade para o usuário do leitor de tela. Eles agora têm tanta oportunidade de responder à pergunta quanto qualquer outra pessoa.

Esta é apenas a ponta do iceberg

An image showing a half submerged iceberg

O método automatizado que usamos para colectar estes dados pode capturar apenas uma pequena proporção das violações de acessibilidade.

Por exemplo, ele não captura coisas como:

  • Conteúdo de texto confuso, técnico, vago ou inútil
  • Cor como forma de fornecer a única identificação para os links
  • Uma incompatibilidade entre

    1. a ordem em que um designer apresenta os itens em uma página; e

    2. a ordem em que um leitor de tela os lerá


Essa incompatibilidade pode surgir quando são feitas alterações no layout da página no código subjacente.

Existe uma solução para tudo isso:

desenho de páginas inclusivo e acessível.

Aprenda como incluir
Ilustração de dois jovens desenvolvedores de páginas moçambicanos sentados em suas secretárias.

O que acontece quando uma página da internet não é acessível

Testes de acessibilidade automatizados nunca são suficientes. Precisa também testar os websites com usuários reais. Eis o que descobrimos quando pedimos a usuários com deficiência visual para tentar usar alguns destes websites:

Metodologia

Compilamos e categorizamos uma lista de 90 domínios de websites e links internos (até o nível 2) para cada website. Isso nos deu 18.704 páginas da internet únicas no total. Em seguida, colectamos as violações de acessibilidade em cada página usando axe-core. Axe-core é uma popular ferramenta automática de teste de acessibilidade da internet. No total, colectamos 128.377 violações de acessibilidade em todas as páginas.

Agradecimentos

Gostaríamos de agradecer a Deque por oferecerem sua axe-core API em código aberto(Abre em uma nova janela). Gostaríamos também de agradecer aos seguintes especialistas em acessibilidade pelos conselhos e apoio que nos deram nas fases iniciais deste projecto: Steve Green, Andy Keyworth, Aurelien Levy e Leonie Watson. Finally, we would like to thank members of the Lista de Discussão Pública do Grupo de Interesse WAI(Abre em uma nova janela) who so kindly responded to our request for feedback and advice in the early stages of our investigation.