Axe-core: um conjunto de soluções de acessibilidade
A acessibilidade digital é uma prática essencial no desenvolvimento de software moderno, garantindo que produtos e serviços sejam utilizáveis por todas as pessoas, independentemente de suas habilidades ou limitações.
No entanto, desenvolver com acessibilidade não é tão complicado, muito menos tão custoso quanto se pensa. Há ferramentas para te ajudar no desenvolvimento acessível e ágil, que te auxiliam a aprender e manter boas práticas de acessibilidade, e também auxiliam na verificação de violações.
No que tange testes de acessibilidade, a ferramenta mais popular é a API Axe-core, desenvolvida pela renomada Consultoria de Acessibilidade Deque Systems. O axe-core verifica violações à WCAG 2.2, e potencialmente encontra cerca de 57% dos problemas automaticamente. Com ele, os testes de acessibilidade podem ser realizados como parte de testes de unidade, de integração, de navegador e quaisquer outros testes funcionais que sua equipe já realiza no dia a dia, podendo ser integrado a qualquer ambiente.
Seu feedback é assertivo e claro, trazendo regras que se relacionam as diretrizes da WCAG e seus critérios de sucesso. Nele há dois classificações bem relevantes no entendimento do problema:
- Tipo do problema — “erro” é uma violação de acessibilidade automaticamente detectada, enquanto “para revisar” é um apontamento que necessita a validação humana para determinar se é de fato “erro”.
- Impacto — a Deque classifica os erros em 4 níveis:
- Crítico: problemas que bloqueiam o acesso do usuário com deficiência ao conteúdo digital. Ex: se o produto não permite navegação apenas por teclado. (Usuário que não pode usar o mouse não conseguirá acessar o conteúdo)
- Alto: problemas sérios, mas que com algum trabalho o usuário consegue acessar a informação. Ex: se o seu link não tiver um texto descritivo, ou seja, os famosos “cliques aqui”. (Usuário de leitor de telas precisará buscar o contexto da página para entender o destino ou propósito do link)
- Médio: problemas que dificultam a navegação ou compreensão do usuário. Ex: se sua página não tem título de nível 1. (Usuários visuais e não visuais podem ter mais trabalho para compreender o propósito da página)
- Baixo: problemas que causam algum desconforto. Ex: Um elemento com caption que contém o mesmo texto do atributo. (O usuário de leitor de telas ouvirá informação redundante)
Da integração com essa API, muitas outras ferramentas surgiram que permitem incorporar testes de acessibilidade desde o início do ciclo de desenvolvimento de produto, uma vez que o axe-core é altamente configurável.
Ferramentas integradas com axe-core
Axe for Designers
É um plugin gratuito para Figma, que valida a conformidade dos seus designs com a WCAG. Suas funcionalidades são: escameamento para falhas, verificação de índice de contraste e tamanho do botão ou link e anotações de ordem de foco e outras informações importantes. Além disso, é gerado um relatório com dashboard, que pode ser facilmente acessado e compartilhado.
Axe Accessibility Linter
Esta é uma extensão gratuita para usuários do VS Code e deve ser baixada do na própria guia de extensões. Ela verifica arquivos React, Vue, Angular, HTML e Markdown, sem necessitar de configurações. As regras reconhecidas e validadas por essa ferramenta podem ser encontradas em Axe Linter Rules . Uma violação de regra é apresentada de forma clara na aba “Problemas”, e fornece uma descrição clara da regra e um link para documentação de referência.
Axe DevTools Linter
É uma extensão de linter mais completo, compatível com outras IDEs, como o IntelliJ e WebStorm!, e também com GitHub, Jenkins e SonarQube, adicionando acessibilidade em hooks e PRs. No entanto, sua licença é paga.
Jest-axe
O Jest-axe é uma ferramenta que une as bibliotecas Jest e Axe-core, e é ideal para testes unitários. Juntamente com Testing Library, ele consegue fazer verificações de acessibilidade em React, Vue e Angular, os mais populares frameworks.
Cypress-axe
O Cypress-axe é uma das várias integrações de ferramentas de teste com o axe-core, ideal para testes End-to-End. Os testes com Cypress podem verificar as classes corretas, IDs e elementos, além de poder simular qualquer ação do usuário. As vantagens dessa combinação são: validação de acessibilidade facilmente adicionada aos testes funcionais já existentes e feedback imediato, claro e visual. No entanto, para se acessar as informações detalhadas do problema, é necessário inspecionar o apontamento no console.
Axe DevTools Extension
É uma extensão para navegadores com a funcionalidade gratuita para escaneamento da página ou sessão, validando sua conformidade com a WCAG. Seu feedback é bem interessante, trazendo todas as informações do problema de forma bem clara. Além disso, ele tem a função de destacar o elemento com problema na tela através do “highlight” e também é possível compartilhar um problema específico ou toda a validação por meio de uma URL.
Na versão paga, ele oferece também auxílio para testes manuais guiados por inteligência artificial. Até o momento são 7 testes guiados: navegação por teclado, modais, elementos interativos, estrutura semântica, listas, imagens e formulários. Ele automaticamente reconhece esses elementos e então guia o usuário na validação se há realmente um problema de acessibilidade. Em seguida ele mesmo gera os registros no relatório da página, enriquecendo os resultados do escaneamento inicial.
Considerações finais
O axe-core é uma biblioteca de código aberto e é uma ferramenta com amplo potencial para enriquecer a qualidade de conteúdos digitais para que sejam acessíveis para todas as pessoas. As ferramentas apresentadas proporcionam uma integração eficiente e flexível para sanar problemas de acessibilidade. Ela contribui nas etapas do ciclo de desenvolvimento de software, desde a concepção à implementação e testes, combinando pesquisa, análise de dados e geração de conteúdo com precisão e agilidade.
O que achou dessas ferramentas? Bora testá-la nas suas atividades.
