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

Seu site do React não será progressivo se não puder ser acessado. Fazer auditorias durante o desenvolvimento pode ajudar você a detectar problemas.

Houssein Djirdeh

O react-axe é uma biblioteca que audita um aplicativo do React e registra todos os problemas de acessibilidade no console do Chrome DevTools. Ele usa a biblioteca de testes de código aberto axe para sinalizar problemas e a gravidade deles.

O eslint-plugin-jsx-a11y é um plug-in ESLint que identifica e aplica várias regras de acessibilidade diretamente no JSX. O uso dele em combinação com uma ferramenta que testa o DOM renderizado final, como react-axe, pode ajudar a encontrar e corrigir questões de acessibilidade no site.

Por que isso é útil?

É fundamental criar sites que proporcionem a todos os usuários a capacidade de acessar o conteúdo, seja qual for a deficiência ou restrição. O uso de bibliotecas de auditoria, como react-axe e eslint-plugin-jsx-a11y, durante o desenvolvimento do aplicativo React vai expor automaticamente todos os problemas de acessibilidade conforme eles surgirem.

Usar eslint-plugin-jsx-a11y

O React já oferece suporte à criação de elementos HTML acessíveis dentro da sintaxe do JSX. Por exemplo, você só precisa usar o atributo htmlFor em vez de for para vincular um 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 (em inglês) abrange todas as nuances do gerenciamento de questões de acessibilidade em um componente do React. Para facilitar a detecção desses problemas durante o desenvolvimento, o Create React App (CRA) inclui o plug-in eslint-plugin-jsx-a11y para ESLint por padrão.

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

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

{
  "extends": "react-app"
}

Agora, alguns problemas comuns de acessibilidade serão exibidos.

Para verificar ainda mais regras de acessibilidade, modifique o arquivo para incluir automaticamente todas as regras recomendadas pelo plug-in:

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

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

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

A documentação do projeto fornece informações sobre as diferenças entre o modo recomendado e o rigoroso.

Usar o reaxe

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 em torno da 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'));
}

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

Agora, ao executar o aplicativo durante o desenvolvimento, os problemas aparecem 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
• Sério
• Crítico

Conclusão

1. Se você estiver criando um site com o React, inclua a auditoria de acessibilidade no fluxo de trabalho com antecedência para detectar problemas à medida que você cria os componentes.
2. Use eslint-plugin-jsx-a11y para adicionar verificações de acessibilidade ao fluxo de trabalho de inspeção. A CRA já vem com ela, mas mude para o modo recomendado ou restrito.
3. Além dos testes de desenvolvimento local, inclua react-axe no seu aplicativo para detectar problemas no DOM renderizado final. Não o inclua no seu pacote de produção.