jsx-a11y y controles de calidad a nivel de componente

Muchos errores de accesibilidad son fáciles de detectar en el código. Un linter puede señalarlos mientras escribe, mucho antes de que un usuario real se encuentre con la barrera. 🛡️

El paquete eslint-plugin-jsx-a11y añade reglas de accesibilidad a ESLint para JSX. Comprueba si sus componentes presentan errores de a11y comunes y conocidos.

Amplíe la configuración recommended del plugin para activar de una vez una base sólida de reglas, en lugar de habilitarlas manualmente una por una.

El plugin avisa cuando un img no tiene el atributo alt. Esta única regla evita un fallo de accesibilidad muy común y de gran impacto.

Usar onClick en un div sin compatibilidad con el teclado activa una advertencia. La solución es utilizar un button real, que puede recibir el foco y está preparado para el teclado.

Las reglas verifican que los controles de formulario tengan un label asociado. Un campo sin etiqueta se señala para que nunca llegue a los usuarios sin nombre.

El plugin comprueba que los atributos y roles de ARIA sean reales y se utilicen correctamente. Detecta de inmediato errores tipográficos como aria-lable o roles no válidos.

Un linter solo ve el código estático. No puede juzgar si el texto alt es significativo o si el orden del foco tiene sentido, por lo que las pruebas manuales siguen siendo importantes.

Integre la accesibilidad en los componentes compartidos. Un Button reutilizable que siempre renderiza un elemento button real extiende un buen comportamiento por toda la aplicación.

Ejecute ESLint en su pipeline para que las advertencias de a11y hagan fallar la compilación. Así se evita que las regresiones superen la revisión de código y lleguen a producción.

Con la extensión de ESLint para el editor, las advertencias aparecen directamente en el código. Estos comentarios rápidos enseñan al equipo patrones de accesibilidad mientras escribe.

Su equipo añade eslint-plugin-jsx-a11y al proyecto. ¿Qué no debe esperar todavía que haga?

Use jsx-a11y para detectar errores comunes, crear componentes compartidos accesibles e integrarlo en CI, sin dejar de recurrir a pruebas manuales para el resto. ✅