Teste de acessibilidade

9 min readMay 28, 2024

Recentemente estava em uma sessão com a Karina Yamashita , Tatiana Honda e Débora Silva e chegamos a conclusão que sabiamos muito pouco sobre testes de acessibilidade, por causa disso, decidimos fazer uma pesquisa sobre o assunto e encontramos as várias ferramentas para testar a acessiblidade.

Tipos de acessibilidade

Existem vários tipos de incapacidades, que podem ser categorizadas como:

Cognitivas: incapacidade de compreensão ou entendimento.
Visuais: incapacidade da visão total, parcial ou condicional.
Auditivas: incapacidade da audição.
Motoras: incapacidade de movimentação, permanente ou temporária.
De fala: incapacidade da fala ou até mesmo de se expressar ou de ter interações sociais.

Gostaria de falar de algumas incapacidades que não são tão comuns ou conhecidas.

Daltonismo (ou discromatopsia) é um distúrbio da percepção visual que afeta a capacidade de um indivíduo de diferenciar certas cores.

Veja mais sobre “Daltonismo” em:https://brasilescola.uol.com.br/biologia/daltonismo.htm

Este é um teste para verificar daltonismo: é necessário ser capaz de ler os números que aparecem com certas cores.

Os numeros são 7, 13 e 16 na primeira linha e 8, 12, 9 na segunda linha.

É importante realizar validações, como verificar se a página possui um bom contraste. Isso pode ser conseguido com um fundo escuro e texto claro, ou o contrário. Se o texto e o fundo tiverem cores muito semelhantes, será muito mais difícil para uma pessoa ler.

Imagem 1: Com contraste de cores, o que facilita a visualização.
Imagem 2: Sem contraste de cores, o que dificulta a leitura.
Imagem 3: É a mesma imagem 1, editada para mostrar como é vista por uma pessoa que não vê cores.
Imagem 4: É a mesma imagem 2, editada para mostrar como é vista por uma pessoa que não vê cores.

Imagens de alto contraste e baixo contraste e depois sem cores, para representar como uma pessoa com daltonismo veria a imagem.

Aqui estão alguns exemplos de botões, sendo que podemos destacar alguns aspectos.

1 — Botão somente com cores, não indica a intenção do botão

2 — Botão de baixo contraste, mas indica a ação.

3 — Botão com alto contraste e indica a ação, mas não possui icone para indicar intenção.

4- Botão com alto contraste, icone não significa nada em relação a ação.

5 — Alto contraste e icone correto para ação

6 — Outra opção de alto contraste e icone correto para ação.

Dislexia é uma perturbação da aprendizagem caracterizada pela dificuldade de leitura. Textos muito longos ou com fontes muito pequenas podem aumentar essa dificuldade.

Fonte desenvolvida para pessoas com dislexia.

Acessibilidade Cognitiva — Quando falamos sobre acessibilidade, raramente abordamos pessoas com algum tipo de limitação cognitiva, como aquelas dentro do espectro autista, pessoas com baixo QI, ou até mesmo aquelas cuja língua nativa não é a do site.

Alguém no espectro autista pode ter dificuldade para compreender linguagem figurativa, informações com sarcasmo ou características de humor podem não ser bem interpretadas.

Uma linguagem complexa pode impedir que uma pessoa com baixo QI e sem acesso a uma formação escolar utilize o site. Essa dificuldade é ainda maior para pessoas que estão utilizando o site em uma língua não nativa.

Pequenos ajustes, como combinar uma imagem com texto, podem transformar informações complexas em algo muito mais simples e intuitivo para essas pessoas.

Nunca vou me esquecer de quando acessei um site para verificar o status de um pedido que fiz e vi que estava “DEFERIDO”. Fiquei muito triste, sem saber que isso significava que meu pedido havia sido aceito ou aprovado, pois não conhecia o significado da palavra “deferido”.

Deferido — Que obteve deferimento; que recebeu permissão, autorização; autorizado, concedido: requerimento deferido.

Exemplo de site com acessibilidade

Um bom exemplo de site com boa acessibilidade é o site da Pull & Bear. Eles possuem um botão que permite habilitar diversos recursos de acessibilidade.

Por exemplo, quando o modo TDAH está habilitado, boa parte do site é ajustada para baixa luminosidade, destacando apenas a área que está sendo focada no momento. Com menos estímulos visuais, fica mais fácil ler e evitar que informações importantes sejam ignoradas.

Aqui demostra como ficaria o site no modo de suporte ao TDAH:

O que é teste de acessibilidade?

O Teste de Acessibilidade de Software é um processo que consiste em avaliar o grau de facilidade de uso do software por pessoas com determinadas deficiências ou limitações motoras ou cognitivas de qualquer origem.

Quando pensamos em acessibilidade, normalmente pensamos em pessoas cegas, principalmente porque muitos sites ou sistemas que usamos no dia a dia são desenvolvidos para pessoas que conseguem ver.

Um exemplo muito simples é: como uma pessoa cega poderia validar imagens de captcha? Selecionar imagens é algo praticamente impossível para alguém com cegueira. Por isso, muitas iterações de captcha oferecem a possibilidade de validação utilizando sons.

Porque devemos testar acessibilidade?

Vou tentar listar alguns dos motivos que devemos testar acessibilidade:

Experiência de Usuário: Se você já se frustrou alguma vez com algum software, imagine a frustração diária que pessoas com alguma deficiência enfrentam. Se ainda não entendeu, tente navegar em uma página com o monitor desligado.
Aquisição de Usuários: Páginas com bons índices de acessibilidade possuem melhor ranqueamento nos mecanismos de busca.
Motivos Legais: Muitos países implementaram leis e regulamentos de acessibilidade, exigindo que as organizações tornem suas plataformas digitais acessíveis a todos os usuários. O não cumprimento pode levar a consequências legais e danos à reputação. Nos Estados Unidos, por exemplo, a principal legislação de acessibilidade é a ADA — Americans with Disabilities Act.
Má Publicidade: É extremamente prejudicial para uma empresa se esses usuários não forem capazes de utilizar seu software. Grandes empresas têm departamentos responsáveis por esse tipo de cuidado.
Perda de Potenciais Usuários: Existem muitos usuários em potencial que provavelmente nunca utilizarão a aplicação se ela não for acessível, o que pode influenciar negativamente a quantidade de usuários.

Segundo a World Health Organization estima-se que 1,3 bilhão de pessoas sofram de deficiências significativas. Isto representa 16% da população mundial, ou 1 em cada 6 de nós.

Como testar e ferramentas disponíveis?

Existem diversas ferramentas para testar acessibilidade, pra te ajudar vamos listar algumas delas e algumas das suas caracteristicas.

Lighthouse:

O Lighthouse é uma ferramenta de código aberto desenvolvida pelo Google e integrada ao Google Chrome. Ela é utilizada para auditar e melhorar a qualidade geral de páginas da web. O Lighthouse analisa uma página da web em várias áreas, incluindo performance, acessibilidade, SEO (otimização para mecanismos de busca) e práticas recomendadas. Ele fornece feedback detalhado e sugestões de melhoria para ajudar os desenvolvedores a otimizarem seus sites, tornando-os mais rápidos, acessíveis e amigáveis aos mecanismos de busca. O Lighthouse é amplamente utilizado pela comunidade de desenvolvimento web para garantir a qualidade e o desempenho de sites e aplicações da web.

Pontos Positivos:

Ferramenta de código aberto integrada ao Chrome DevTools.
Avalia não só a acessibilidade, mas também performance, SEO e melhores práticas.
Gera relatórios detalhados e pontua a acessibilidade do site.

Pontos Negativos:

Pode não detectar todos os problemas de acessibilidade.
Requer um navegador Chrome para uso.

AXE

O AXE é uma ferramenta de teste de acessibilidade de código aberto desenvolvida pela Deque Systems. Ela é projetada para ajudar os desenvolvedores a identificar e corrigir problemas de acessibilidade em páginas da web e aplicativos móveis. O AXE pode ser integrado a vários fluxos de trabalho de desenvolvimento, incluindo testes automatizados, testes manuais e ferramentas de desenvolvimento como o navegador Chrome. A ferramenta identifica violações das diretrizes de acessibilidade, como o Web Content Accessibility Guidelines (WCAG), e fornece feedback detalhado sobre como corrigir esses problemas.

Pontos Positivos:

Ferramenta robusta desenvolvida pela Deque Systems.
Integração com navegadores (extensões para Chrome e Firefox).
API disponível para integração com ferramentas de desenvolvimento e automação de testes.
Fornece relatórios detalhados com informações sobre como corrigir os problemas.

Pontos Negativos:

A versão gratuita tem limitações em comparação com as versões pagas.
Pode ser complexa para iniciantes sem conhecimento prévio de acessibilidade.

IBM Equal Access Accessibility Checker

A ferramenta IBM Equal Access Accessibility Checker é uma extensão para navegadores que ajuda a identificar e corrigir problemas de acessibilidade em websites, seguindo as diretrizes WCAG (Web Content Accessibility Guidelines).

Pontos Positivos

Facilidade de uso: Interface intuitiva que torna simples a verificação de acessibilidade.
Integração: Funciona bem com navegadores populares como Chrome e Firefox.
Relatórios detalhados: Fornece relatórios compreensivos sobre os problemas encontrados, incluindo sugestões para correção.
Atualizações regulares: Mantido pela IBM, garantindo atualizações frequentes e suporte a novas diretrizes de acessibilidade.

Pontos Negativos

Performance: Pode ser um pouco lento em páginas web muito grandes ou complexas.
Dependência de navegação manual: Requer que o usuário navegue manualmente pelas páginas para verificar todos os elementos.
Cobertura limitada: Embora abrangente, pode não detectar problemas extremamente específicos ou contextuais.
Curva de aprendizado: Usuários sem conhecimento prévio de acessibilidade web podem precisar de tempo para compreender totalmente os relatórios e recomendações.

Tenon Io

Tenon.io é uma ferramenta de acessibilidade web que oferece análises automatizadas para identificar e corrigir problemas de acessibilidade em websites, com foco nas diretrizes WCAG.

Pontos Positivos

Automatização: Permite análises automáticas de acessibilidade, economizando tempo e esforço.
Integração API: Oferece uma API robusta para integração com sistemas e fluxos de trabalho existentes.
Relatórios detalhados: Fornece relatórios abrangentes com explicações claras e sugestões para correção dos problemas encontrados.
Suporte a múltiplas plataformas: Funciona com uma variedade de plataformas e frameworks, tornando-se versátil para diferentes ambientes de desenvolvimento.

Pontos Negativos

Custo: Pode ser caro para pequenas empresas ou projetos individuais, pois é uma ferramenta paga.
Dependência de configuração: Requer alguma configuração inicial e entendimento técnico para uso eficaz.
Detecção de problemas específicos: Embora abrangente, pode não detectar todos os problemas contextuais ou específicos de acessibilidade.
Curva de aprendizado: Pode haver uma curva de aprendizado para novos usuários entenderem e utilizarem todas as funcionalidades disponíveis.

Pa11y

Pa11y é uma ferramenta de acessibilidade web de código aberto que ajuda a identificar problemas de acessibilidade em websites, compatível com as diretrizes WCAG. É altamente configurável e pode ser usada tanto via linha de comando quanto através de uma interface gráfica com Pa11y Dashboard.

Pontos Positivos

Código aberto: Gratuito e de código aberto, permitindo personalização e integração flexível.
Automatização: Pode ser facilmente integrada em processos de CI/CD para testes contínuos de acessibilidade.
Versatilidade: Funciona com diferentes navegadores e tecnologias de teste.
Pa11y Dashboard: Fornece uma interface gráfica útil para visualizar relatórios e gerenciar testes.

Pontos Negativos

Configuração técnica: Pode exigir conhecimentos técnicos avançados para configuração e uso efetivo, especialmente para a integração via linha de comando.
Documentação: A documentação pode ser complexa para iniciantes, dificultando o aprendizado inicial.
Detecção de problemas contextuais: Como muitas ferramentas automáticas, pode não capturar todos os problemas de acessibilidade que requerem avaliação contextual.
Interface gráfica básica: O Pa11y Dashboard, embora útil, é menos sofisticado comparado a ferramentas comerciais pagas.