Auditoría de accesibilidad con react-axe y eslint-plugin-jsx-a11y

Si no se puede acceder a él, tu sitio de React no será progresivo. La auditoría durante el desarrollo puede ayudarte a detectar cualquier problema.

Houssein Djirdeh

react-axe es una biblioteca que audita una aplicación de React y registra cualquier problema de accesibilidad en la consola de Herramientas para desarrolladores de Chrome. Utiliza la biblioteca de pruebas de axe de código abierto para marcar cualquier problema y su gravedad.

eslint-plugin-jsx-a11y es un complemento de ESLint que identifica y aplica una serie de reglas de accesibilidad directamente en tu JSX. Si lo usas en combinación con una herramienta que pruebe el DOM renderizado final, como react-axe, podrás encontrar y solucionar cualquier problema de accesibilidad en tu sitio.

¿Por qué es útil?

Es fundamental crear sitios web que brinden a todos los usuarios, sin importar su discapacidad o restricción, la capacidad de acceder al contenido. El uso de bibliotecas de auditoría como react-axe y eslint-plugin-jsx-a11y durante el desarrollo de la aplicación de React expondrá automáticamente los problemas de accesibilidad a medida que surjan.

Usa eslint-plugin-jsx-a11y

React ya admite la escritura de elementos HTML accesibles en la sintaxis de JSX. Por ejemplo, solo debes usar el atributo htmlFor en lugar de for para vincular una etiqueta a un elemento del formulario específico dentro de un componente de React.

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

La documentación de accesibilidad de React abarca todos los matices del manejo de problemas de accesibilidad dentro de un componente de React. Para facilitar la detección de estos problemas durante el desarrollo, Create React App (CRA) incluye el complemento eslint-plugin-jsx-a11y para ESLint de forma predeterminada.

Para habilitar el análisis con lint preconfigurado que proporciona CRA, haz lo siguiente:

1. Instala el complemento ESLint adecuado para tu editor de código
2. Agrega un archivo .eslintrc.json a tu proyecto.

{
  "extends": "react-app"
}

Ahora aparecerán algunos problemas comunes de accesibilidad.

Si quieres verificar aún más reglas de accesibilidad, modifica el archivo para que incluya automáticamente todas las reglas que recomienda el complemento:

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

Si quieres un subconjunto de reglas aún más estricto, cambia al modo estricto:

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

La documentación del proyecto proporciona información sobre las diferencias entre el modo recomendado y el modo estricto.

Usa react-axe

eslint-plugin-jsx-a11y puede ayudarte a identificar fácilmente cualquier problema de accesibilidad en tu JSX, pero no prueba ninguno de los resultados finales de HTML. react-axe es una biblioteca que hace exactamente esto, ya que proporciona un wrapper de React alrededor de la herramienta de prueba axe-core de Deque Labs.

Para comenzar, instala la biblioteca como una dependencia de desarrollo:

npm install --save-dev react-axe

Ahora, solo debes inicializar el módulo en 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'));
}

En este caso, se usa una importación dinámica para cargar la biblioteca solo cuando no está en modo de producción antes de procesar y, luego, iniciar el componente raíz App. Esto garantiza que no se incluya innecesariamente en el paquete de producción final.

Ahora, cuando ejecutas la aplicación durante el desarrollo, los problemas aparecen directamente en la consola de Herramientas para desarrolladores de Chrome.

También se asigna un nivel de gravedad a cada incumplimiento. Estos niveles son los siguientes:

• Menor
• Moderado
• Grave
• Crítico

Conclusión

1. Si compilas un sitio con React, incluye una auditoría de accesibilidad en el flujo de trabajo desde el principio para detectar problemas a medida que compilas tus componentes.
2. Usa eslint-plugin-jsx-a11y para agregar comprobaciones de accesibilidad a tu flujo de trabajo de análisis con lint. CRA ya viene incluida, pero cambia al modo recomendado o estricto.
3. Además de las pruebas de desarrollo locales, incluye react-axe en tu aplicación para detectar problemas en el DOM renderizado final. No la incluyas en tu paquete de producción.