Auditoria de acessibilidade com o reação-axe e o eslint-plugin-jsx-a11y

O site do React não será progressivo se não estiver acessível. A auditoria durante o desenvolvimento pode ajudar você a identificar problemas.

Houssein Djirdeh

Observação : para saber mais sobre os conceitos básicos da acessibilidade em páginas da Web, consulte primeiro o guia O que é acessibilidade.

O react-axe é uma biblioteca que audita Reagir aplicativo e registrar problemas de acessibilidade no Chrome DevTools no console do Google Cloud. Ele usa o axe de código aberto, biblioteca de testes para sinalizar problemas e a gravidade deles.

eslint-plugin-jsx-a11y é um plug-in ESLint que identifica e aplica várias regras de acessibilidade diretamente no seu JSX. Use-o com uma ferramenta que testa a versão final DOM renderizado, como react-axe, pode ajudar você a encontrar e corrigir problemas de acessibilidade questões relacionadas ao seu site.

Por que isso é útil?

É crucial criar sites que ofereçam a todos os usuários, independentemente das deficiência ou restrição, a capacidade de acessar seu conteúdo. Como usar a auditoria bibliotecas, como react-axe e eslint-plugin-jsx-a11y, durante o desenvolvimento do seu aplicativo React vai expor automaticamente e problemas de acessibilidade à medida que eles surgem.

Usar o eslint-plugin-jsx-a11y

O React já oferece suporte à criação de elementos HTML acessíveis na sintaxe do JSX. Para exemplo, você só precisa usar o atributo htmlFor em vez de for para vincular uma rótulo a um elemento de formulário específico em um componente do React.

<input id="promo" type="checkbox">
<label htmlFor="promo">Receive promotional offers?</label>

A Documentação de acessibilidade do React abrange todas as nuances de lidar com questões de acessibilidade em um React componente. Para facilitar a detecção desses problemas durante o desenvolvimento, crie um O React App (CRA) inclui o plug-in eslint-plugin-jsx-a11y para ESLint da padrão.

Para ativar a inspeção pré-configurada fornecida pelo CRA:

1. Instale o plug-in ESLint apropriado para o seu editor de código
2. Adicionar um arquivo .eslintrc.json ao projeto

.

{
  "extends": "react-app"
}

Observação : acesse a documentação do CRA para mais detalhes sobre como configurar seu editor para oferecer suporte à inspeção pronta para uso.

Alguns problemas comuns de acessibilidade serão exibidos.

Para verificar se há ainda mais regras de acessibilidade, modifique o arquivo para que ele seja configurado automaticamente incluir todas as regras recomendadas pelo plug-in:

{
  "extends": ["react-app", "plugin:jsx-a11y/recommended"]
}

Se você quiser um subconjunto de regras ainda mais rigoroso, mude para o modo restrito:

{
  "extends": ["react-app", "plugin:jsx-a11y/strict"]
}

O projeto documentação fornece informações sobre as diferenças entre os modos recomendado e estrito.

Usar o axe de reação

O eslint-plugin-jsx-a11y pode ajudar você a identificar facilmente problemas de acessibilidade no seu JSX, mas não testa nenhuma saída HTML final. react-axe é uma biblioteca que faz exatamente isso fornecendo um wrapper do React ao redor do elemento Ferramenta de teste axe-core da Deque Labs.

Para começar, instale a biblioteca como uma dependência de desenvolvimento:

npm install --save-dev react-axe

Agora você só precisa inicializar o módulo em index.js:

if (process.env.NODE_ENV !== 'production') {
  import('react-axe').then(axe => {
    axe.default(React, ReactDOM, 1000);
    ReactDOM.render(<App />, document.getElementById('root'));
  });
} else {
  ReactDOM.render(<App />, document.getElementById('root'));
}

Um importação dinâmica é usada aqui para carregar a biblioteca apenas quando ela não estiver no modo de produção antes renderizar e inicializar o componente raiz App. Isso garante que ele não seja desnecessariamente no pacote de produção final.

Agora, quando você executa o aplicativo durante o desenvolvimento, surgem problemas diretamente no console do Chrome DevTools.

Um nível de gravidade também é atribuído a cada violação. Esses níveis são:

• Menor
• Moderado
• Grave
• Crítico

.

Observação : se você quiser incluir o teste de acessibilidade no fluxo de trabalho de teste de unidade, veja o exemplo de integração de Jest e axe para entender como fazer isso.

Conclusão

1. Se você estiver criando um site com o React, inclua auditoria de acessibilidade no seu fluxo de trabalho cedo para detectar problemas à medida que você cria seus componentes.
2. Usar eslint-plugin-jsx-a11y para adicionar verificações de acessibilidade ao lint de desenvolvimento de software. O CRA já vem com ele incluído, mas mude para o no modo recomendado ou rigoroso.
3. Além dos testes de desenvolvimento local, inclua react-axe na sua para detectar problemas no DOM renderizado final. Não inclua ao pacote de produção.