Teste de acessibilidade automatizado: axe + WDIO e Pa11y-ci

A acessibilidade é um componente cada vez mais vital do desenvolvimento web. Ela ajuda a reduzir barreiras tecnológicas e a tornar sites e aplicações fáceis de usar e inclusivos para todos.

Porém, analisar um site inteiro em busca de problemas de acessibilidade pode ser uma tarefa demorada e intimidadora. Por isso queremos ajudar você a explorar algumas ferramentas. Vamos entrar em duas das opções mais populares, que podem ajudar de forma significativa a melhorar a acessibilidade do seu site.

Vamos colocar Pa11y-ci e axe + WDIO sob o microscópio para avaliar a eficácia deles no teste de acessibilidade automatizado.

O objetivo é avaliar as capacidades e a cobertura de cada ferramenta em relação aos padrões de acessibilidade, para aprofundar o teste de acessibilidade. Como vamos conseguir isso? Examinando uma prova de conceito (PoC) anterior com axe + WDIO e fazendo uma PoC nova com o Pa11y-ci. Também vamos oferecer insights sobre o desempenho geral e sugerir estratégias para incorporar essas ferramentas em projetos de desenvolvimento web.

Visão geral: Pa11y-ci vs. axe + WDIO¶

Pa11y-ci e axe + WDIO são ferramentas feitas para ajudar você a validar a acessibilidade web. Elas fazem isso com um conjunto de regras baseado nas Web Content Accessibility Guidelines (WCAG).

Essas ferramentas analisam o código HTML do seu site e entregam um relatório detalhado dos achados. Isso pode ter vários formatos, como JSON ou HTML. Como resultado, a equipe consegue identificar e corrigir problemas de acessibilidade.

Para entender melhor o que cada ferramenta traz, vamos passar por uma visão breve do Pa11y-ci e do axe + WDIO.

Pa11y-ci¶

O Pa11y-ci é uma interface de linha de comando open source que facilita rodar testes de acessibilidade nos seus sites.

Alguns dos principais recursos incluem:

✅Teste de acessibilidade automatizado. ✅Suporte aos padrões WAI-ARIA, WCAG 2.0 e Section 508. ✅Integração fácil com pipelines de CI/CD. ✅Capacidade de testar várias URLs ao mesmo tempo.

A seguir, você encontra uma representação visual do relatório do Pa11y. Esta imagem mostra como o relatório oferece uma representação direta dos testes de acessibilidade feitos. Vale notar que o relatório não traz uma visão abrangente nem um agrupamento detalhado dos problemas identificados. Em vez disso, ele serve como um jeito prático de avaliar rápido o status de acessibilidade de um site, destacando os erros encontrados.

axe + WDIO¶

O axe é uma biblioteca open source para teste automatizado da acessibilidade de páginas web. Já o WebdriverIO (WDIO) é um framework de automação para Node.js que oferece capacidades para implementações do protocolo WebDriver, como o Selenium. Juntos, eles dão uma amostra de uma experiência de automação mais poderosa, que leva a acessibilidade em conta. Mas o ponto é este: automação sozinha não resolve. Não dá para depender só dela e deixar de lado a importância do teste manual. O processo de configuração do framework não foi complexo principalmente pela integração com o axe. É tão simples quanto importar a biblioteca “@axe-core/webdriverio”. O desafio está em instalar uma ferramenta de relatório à parte para exportar os resultados para um relatório HTML. Além disso, ao usar um sitemap parecido com a abordagem do Pa11y, foi preciso usar o Axios para buscar as URLs dentro do sitemap. Depois, foi preciso criar uma função para iterar os testes de cada página encontrada no sitemap.

As vantagens de usar axe + WDIO incluem:

✅Integração flexível com o framework de testes WebdriverIO.
✅Suporte aos padrões WAI-ARIA, WCAG 2.0 e Section 508.
✅Relatórios detalhados e destaque dos problemas.
✅Capacidade de testar aplicações web dinâmicas e complexas.

A seguir, você encontra várias imagens do relatório do axe + WDIO. Essas imagens dão uma visão dos resultados, seguida de uma lista de problemas de acessibilidade encontrados na aplicação web. Além disso, o relatório inclui seções com resultados que passam nas checagens das diretrizes de acessibilidade. E também resultados incompletos e não aplicáveis.

Teste de acessibilidade automatizado: comparação¶

A seguir, analisamos as duas ferramentas com base nos resultados das provas de conceito (PoCs).

PoC do axe + WDIO¶

✅Em média, uma cobertura de 57% dos problemas de acessibilidade da WCAG. ✅Relatórios mais claros, problemas agrupados e soluções vinculadas melhoram a interpretação dos resultados. ✅Integração fluida com o framework WebDriver. ✅Ambiente de teste flexível. ❌Configuração mais complexa.

PoC do Pa11y-ci¶

✅Execução simplificada pela interface de linha de comando. ✅Permitiu testar várias URLs rápido. ❌Capacidades limitadas em comparação com axe + WDIO. ❌Menos precisão para detectar todos os problemas.

Em resumo: qual é a melhor ferramenta para cada tarefa?¶

Para resumir, tanto o Pa11y-ci quanto o axe + WDIO trazem benefícios relevantes para o teste de acessibilidade automatizado na web. Enquanto o Pa11y-ci se destaca pela simplicidade e pela velocidade, o axe + WDIO oferece capacidades mais amplas.

Para apoiar os esforços de teste manual, recomendamos usar o axe + WDIO como método principal, pelos relatórios abrangentes e categorizados. Isso permite priorizar problemas e identificar áreas que atendem aos padrões ou pedem mais revisão.

Para integração com CI/CD, o Pa11y-ci é a escolha superior por ser fácil de configurar e operar rápido. Pode ser integrado com fluidez às etapas de Build e Deploy para manter ênfase contínua na acessibilidade. Quer saber mais sobre a estratégia sugerida de teste de acessibilidade automatizado e sobre implementar axe + WDIO? Confira a nossa prova de conceito no GitHub. Se tiver alguma dúvida ou precisar de ajuda, não hesite em entrar em contato!