Linting y barreras de CI para la accesibilidad

Las pruebas se ejecutan después de escribir el código, pero un linter señala los problemas mientras escribe. Cuanto antes detecte un problema, menos costará corregirlo.

En los proyectos de React, el plugin de ESLint eslint-plugin-jsx-a11y comprueba el JSX en busca de errores habituales de accesibilidad directamente en el editor.

jsx-a11y detecta casos como una imagen sin la propiedad alt, un ancla sin href o un controlador de clic en un elemento no interactivo.

Añada la propiedad alt y la advertencia desaparecerá. La corrección es mínima y la detectó antes de que el código llegara a publicarse.

Un linter lee el código fuente, no la página renderizada. No puede medir el contraste ni el orden del foco, por lo que complementa los análisis de axe, pero no los sustituye.

Una barrera de CI es una comprobación que debe superarse antes de poder fusionar el código. Si la prueba de accesibilidad falla, la solicitud de incorporación de cambios queda bloqueada.

Sin una barrera, una auditoría fallida no es más que una advertencia que todo el mundo ignora. Una barrera convierte la accesibilidad en un requisito, no en una sugerencia amable.

Un flujo de trabajo de CI instala las dependencias y después ejecuta los comandos de lint y de pruebas. Un código de salida distinto de cero hace que el trabajo falle automáticamente.

Cuando la compilación falla, la persona autora ve en el registro la regla y el elemento exactos que fallaron. El ciclo de retroalimentación dura minutos, no semanas.

Una barrera que falla por motivos equivocados acaba desactivándose. Mantenga las pruebas estables y bien delimitadas para que el equipo confíe en que una compilación fallida indica un problema real.

La configuración más sólida las combina: lint mientras se programa, axe en las pruebas y una barrera de CI al fusionar. Cada capa detecta lo que las demás pasan por alto.

Ejecute el lint mientras programa, use axe en las pruebas y establezca una barrera para las fusiones en CI. Juntas, estas protecciones evitan que las regresiones de accesibilidad lleguen a producción. 🚦