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.
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:
- Instale o plug-in ESLint adequado para o editor de código.
- 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
- 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.
- 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. - 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.