Apresentamos uma tradução de um artigo da
Indrek Lasn publicado em Medium.com. Abaixo, você aprenderá como tornar um aplicativo ou site mais acessível com o ax - uma ferramenta para testar a acessibilidade de sites e outras interfaces de usuário.
react-ax mostra os resultados dos testes de disponibilidade Qual é a diferença entre apenas um bom aplicativo e um ótimo? Na acessibilidade!
Não se esqueça dos detalhes. Alguns usuários desejam controlar a interface do seu aplicativo usando seu próprio teclado, outros usarão teclas de atalho como Tab para se mover rapidamente, e usuários com deficiência visual também podem se inscrever no seu blog.
Para tornar o produto acessível a todos, você precisa da Biblioteca de testes de disponibilidade.
ax-coreMachado Biblioteca de testes de disponibilidade Filosofia
A Internet se tornará um espaço verdadeiramente inclusivo apenas se os desenvolvedores sempre testarem seus projetos quanto à acessibilidade e começarem a aplicar os princípios da codificação "acessível".
O teste de disponibilidade automatizado economiza significativamente o tempo de desenvolvimento. Para conduzi-lo, ele não requer nenhuma habilidade especial, e isso permite que a equipe se concentre no mais importante - desenvolvimento de produto. Infelizmente, a maioria das ferramentas de teste é projetada para sites e aplicativos, cujo desenvolvimento é concluído, e obter resultados confiáveis por causa disso é bastante difícil. Como resultado, os prazos podem ser perdidos quando o produto parece estar prestes a sair para lançamento.
A biblioteca ax é compatível com todos os navegadores, ferramentas e ambientes de teste modernos usados por especialistas. Graças a isso, o teste de acessibilidade pode fazer parte de qualquer outro teste que sua equipe realiza diariamente (por exemplo, teste de unidade, teste de integração, teste de navegador etc.). O uso de ferramentas de teste de disponibilidade em um estágio inicial de desenvolvimento economizará tempo e recursos, além de poupar muitos problemas.
Manifesto do AX
- ax é um projeto de código aberto.
- Não possui falsos positivos (os bugs não contam).
- O ax funciona em todos os navegadores modernos e com todas as ferramentas, plataformas, bibliotecas e ambientes.
- O ax é suportado por uma grande empresa de acesso digital ( Deque Systems ).
- Essa biblioteca se integra facilmente às ferramentas funcionais / de aceitação existentes para testes automatizados.
- ax determina automaticamente quais regras executar com base no contexto da avaliação.
- O ax suporta dispositivos de memória interna, dispositivos estáticos, testes de integração e aninhamento infinito de iFrame.
- O ax tem uma configuração extremamente flexível.
Introdução ao React
Página de reag -ax do GitHubInstale o módulo com NPM ou Yarn.
NPM:
npm install --save-dev react-axe
Fio:
yarn add react-axe
Lançamos o módulo
Chamamos a função exportada, passando objetos React e ReactDOM e um atraso de tempo em milissegundos, que será rastreado entre cada alteração no componente e a hora de início da análise.
const React = require('react'); const ReactDOM = require('react-dom'); if (process.env.NODE_ENV !== 'production') { const axe = require('react-axe'); axe(React, ReactDOM, 1000); }
Executando sem uma estrutura
Primeiro instale o pacote
axe-core .
npm install axe-core --save-dev
Composição do pacote API
O pacote da
API ax-core inclui:
axe.js - arquivo JavaScript a ser adicionado ao site testado (API);axe.min.js é uma versão menor do arquivo acima.
Adicione um arquivo JavaScript a cada dispositivo iFrame ou sistema de teste.
<script src="node_modules/axe-core/axe.min.js"></script>
Em seguida, adicionamos chamadas a cada ponto de teste, onde fica visível ou um novo elemento de interface aparece.
axe.run(function (err, results) { if (err) throw err; ok(results.violations.length === 0, 'Should be no accessibility issues');
Iniciamos o módulo no ambiente de desenvolvimento (como no código acima), caso contrário, o aplicativo usará mais recursos durante o teste do que durante a operação normal. Você pode usar o
envify (como mostrado
neste exemplo).
Uma vez iniciado, o módulo começará a exibir informações sobre erros de acessibilidade no console do Chrome Devtools toda vez que um componente for atualizado.
Portanto, ao iniciar um aplicativo React, poderemos ver todos os problemas de acessibilidade (se houver) no console.
Exibir erros e problemas de acessibilidade no machadoNavegadores suportados
A API ax-core suporta os seguintes navegadores:
- Microsoft Edge 40 e superior;
- Google Chrome 42 e superior;
- Mozilla Firefox 38 e superior;
- Apple Safari 7 e superior;
- Internet Explorer 9, 10, 11.
Por suporte, quero dizer corrigir bugs e testar regularmente o navegador sempre que possível. Atualmente, com cada solicitação pull, apenas o Firefox, Chrome e Internet Explorer 11 são testados.
O suporte ao JSDOM ainda é limitado. Agora, os desenvolvedores estão tentando tornar todas as regras compatíveis com o JSDOM, mas onde isso não for possível, recomendo desativar as regras. Sabe-se que a regra de
color-contrast não funciona com o JSDOM.
Atualmente, o ax funciona apenas em ambientes onde todas as funções são suportadas nativamente ou implementadas corretamente. A biblioteca não suporta a implementação do DOM DOM v0 descontinuada.
Regras de acessibilidade
Uma lista completa das regras acionadas pelo
axe-core pode ser encontrada
aqui .
Regras do machadoConclusão
Verifique se seu aplicativo está acessível a uma ampla variedade de usuários. Há muitas pessoas por perto, cada uma com suas próprias necessidades. Quanto mais necessidades você levar em consideração, mais tráfego terminará no seu aplicativo ou site. Use todas as oportunidades para melhorar seu produto.
Obrigado pela leitura!