Aplicando la accesibilidad en Reactjs

Luego de leer el maravilloso árticulo de @CristinaGrim, Quiero hacer mi web accesible, pero no sé por dónde empezar quede con la duda de ¿Como puedo aplicar esto a Reactjs?, ¿Que forma puedo validar que los cambios que estoy haciendo en mi aplicación realmente mejoran la accesibilidad? y de este artículo se basa precisamente en esas preguntas.

Comenzando la investigación me encontré con la documentación oficial de reactjs acerca de la accesibilidad y otro árticulo de @hdjirdeh, Accessibility auditing with react-axe and eslint-plugin-jsx-a11y que fue el punto de partida.

Instalar eslint-plugin-jsx-a11y

Es un plugin de ESlint que nos permite inspeccionar el código que estamos escribiendo, validando las prácticas que se recomiendan en cada elemento de html que usemos en JSX.

yarn add -D eslint eslint-plugin-jsx-a11y

Agregamos el archivo de configuración para ESlint en la raíz del proyecto .eslintrc con la configuración básica:

{
 "extends": "react-app"
}

De esta forma se validan las características más comunes de accesibilidad

Si quieres ver más configuraciones es ESlint puedes ver el articulo Usar ESLint y Prettier en proyectos TypeScript

Si quieres garantizar un nivel de accesibilidad similar a AA puedes usar:

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

Y si quieres ir un poco más (similar a AAA) allá puedes usar:

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

En esta documentación esta la diferencia detallada entre el modo recomendado y el modo estricto.

Instalando react-axe

Un módulo que evalúe el código HTML de nuestra aplicación en el DOM para darnos recomendaciones de accesibilidad directamente en la consola del navegador, utiliza la api de axe-core tambien puedes encontrar react-a11y pero este fue depretado en favor de react-axe.

Para instalarlo:

yarn add -D react-axe

Ahora solo necesitas inyectar el inspector de Axe en el punto de entrada de tu aplicación, ejemplo: index.js

if (process.env.NODE_ENV !== 'production') {
 const axe = require('react-axe')
 axe(React, ReactDOM, 1000)
}

Se usa la variable entorno NODE_ENV para mostrar las sugerencias solo en ambiente de desarrollo

Ahora podrás ver las notificaciones en la consola de desarrollo de tu navegador, estas tienen alertas que corresponden a los mismos niveles de accesibilidad mencionados:

• Minor (A)
• Moderate (AA)
• Serious (AAA)
• Critical (AAA)

Todo depende a que estés apuntando desde tu aplicación.

También tenemos a mano extensiones de Chrome que te pueden ayudar a validar la accesibilidad de la aplicación:

• Lighthouse
• Wave Evolution Tool
• Axe

Espero te sea de utilidad este contenido y recuerda que la accesibilidad la hacemos todos.