En este artículo, exploramos axe + WDIO y Pa11y-ci, dos herramientas eficientes que mejoran la accesibilidad de los sitios web. Evaluamos sus capacidades y cobertura en función de estándares de accesibilidad, para poder comprender cuál es la mejor herramienta para cada tarea.
La accesibilidad es un componente cada vez más importante del desarrollo web, ya que ayuda a minimizar barreras tecnológicas y que tanto los sitios web como las aplicaciones sean accesibles por todas las personas, independientemente de sus condiciones, discapacidades, o circunstancias.
Sin embargo, analizar un sitio web completo, en busca de incidentes de accesibilidad, puede ser una tarea larga y desalentadora. Por eso, queremos ayudarte a explorar algunas herramientas. Profundizaremos en dos de las opciones más conocidas que pueden ayudarte a mejorar la accesibilidad de los sitios web.
Nos sumergiremos en cómo funcionan Pa11y-ci y axe + WDIO, para evaluar su eficacia a la hora de realizar pruebas de accesibilidad en sitios web.
Nuestro objetivo es evaluar las capacidades y la cobertura de cada herramienta en relación con las normas de accesibilidad. Para ello, examinaremos una Prueba de Concepto (PoC) anterior con axe + WDIO y realizaremos una nueva con Pa11y-ci.
También ofreceremos información sobre su rendimiento general, y sugeriremos estrategias para incorporar estas herramientas a proyectos de desarrollo web.
Descripción general — Pa11y-ci vs. axe + WDIO
Pa11y-ci y axe + WDIO son dos herramientas diseñadas para ayudar a validar la accesibilidad web. Con este objetivo, utilizan un conjunto de reglas basadas en las Pautas de Accesibilidad para el Contenido Web (WCAG).
Estas plataformas analizan el código HTML de los sitios web y proporcionan un informe detallado de los hallazgos que puede tener varios formatos, tales como JSON o HTML. Como resultado, con la información adecuada, los equipos tienen la posibilidad de identificar y solucionar los problemas de accesibilidad.
Para comprender mejor lo que aporta cada herramienta, haremos una breve descripción tanto de Pa11y-ci como de axe + WDIO.
Pa11y-ci:
Pa11y-ci es una interfaz de línea de comandos de código abierto que facilita la ejecución de pruebas de accesibilidad en los sitios web.
Algunas de sus principales características son:
✅ Pruebas de accesibilidad automatizadas.
✅ Soporte de los estándares WAI-ARIA, WCAG 2.0 y Sección 508.
✅ Fácil integración con procesos CI/CD.
✅ Posibilidad de probar varias URL simultáneamente.
A continuación, compartimos una imagen del informe Pa11y, la cual muestra cómo ofrece una representación directa de las pruebas de accesibilidad realizadas.
Es importante tener en cuenta que el reporte no ofrece una visión global ni una agrupación detallada de los problemas identificados, sino que sirve como una forma de evaluar rápidamente el estado de accesibilidad de un sitio, ya que destaca los errores hallados.
axe + WDIO:
axe es una biblioteca de código abierto para pruebas automatizadas de accesibilidad de páginas web. Por su parte, WebdriverIO (WDIO) es un marco de automatización para Node.js, que proporciona capacidades para implementaciones del protocolo WebDriver como Selenium.
Juntos, ofrecen una experiencia de automatización más potente que tiene en cuenta la accesibilidad. Pero necesitamos tener presente que la automatización por sí sola no basta: no podemos confiar únicamente en ella y dejar de lado la importancia de las pruebas manuales.
El proceso de configuración del marco de trabajo no es complejo debido a la integración con axe. Resulta tan sencillo como importar la librería “@axe-core/webdriverio”. El desafío reside en instalar una herramienta de informes independiente para exportar los resultados a un informe HTML.
Además, para obtener las URL dentro de un mapa del sitio, con el fin de simular el enfoque de Pa11y, es necesario emplear Axios. Posteriormente, precisamos crear una función que nos permita iterar las pruebas para cada página encontrada.
Las ventajas de utilizar axe + WDIO incluyen:
✅ Integración flexible con WebdriverIO Test Framework.
✅ Soporte de los estándares WAI-ARIA, WCAG 2.0 y Sección 508.
✅ Informe detallado sobre los problemas identificados.
✅ Capacidad para probar aplicaciones web dinámicas y complejas.
A continuación, compartimos varias imágenes del informe de axe + WDIO, las cuales ofrecen una visión general de los resultados, seguida de una lista de los problemas de accesibilidad encontrados en la aplicación web.
El informe incluye secciones que muestran los resultados que pasan las pruebas de los criterios de accesibilidad, así como los resultados de accesibilidad incompletos e inaplicables.
Comparación entre axe + WDIO y Pa11y-ci
Analizamos las dos herramientas basándonos en los resultados de la realización de Pruebas de Concepto (PoC) con cada una de ellas.
axe + WDIO:
✅ En promedio, logró un 57% de cobertura de problemas de accesibilidad WCAG.
✅ Informes más claros, problemas agrupados y soluciones vinculadas que mejoraron la interpretación de los resultados.
✅ Permitió una integración perfecta con el marco WebDriver.
✅ Proporcionó un entorno de pruebas flexible.
❌ Configuración más compleja.
Pa11y-ci:
✅ Simplificó la ejecución a través de la interfaz de línea de comandos. ✅Permitió probar varias URL rápidamente.
❌ Capacidades limitadas en comparación con axe + WDIO.
❌ Menos precisión en la detección de todos los problemas.
En pocas palabras: ¿cuál es la mejor herramienta para cada tarea?
En resumen, tanto Pa11y-ci como axe + WDIO ofrecen importantes ventajas para las pruebas de accesibilidad web. Mientras que Pa11y-ci se destaca por su sencillez y rapidez, axe + WDIO ofrece capacidades más amplias.
Para apoyar los esfuerzos de testing manual, recomendamos utilizar axe + WDIO como método principal, debido a que ofrece informes completos y categorizados. Esto permite priorizar los problemas e identificar las áreas que cumplen las pautas o que requieren una revisión adicional.
Para la integración CI/CD, consideramos que Pa11y-ci es la mejor opción, ya que es fácil de configurar y funciona con rapidez. Se puede integrar perfectamente en las etapas de compilación (“build”) y despliegue para mantener un énfasis continuo en la accesibilidad.
¿Te gustaría aprender más sobre la estrategia sugerida para la accesibilidad de sitios web y la implementación de axe + WDIO? Te invitamos a disfrutar de la charla “Automatizando accesibilidad Web: una demostración práctica con axe-core y WebDriverIO“, donde Leonardo Guedes, tster automator, nos presentó una demo sobre cómo la integración de axe-core con WebDriverIO puede transformar la manera en que realizamos pruebas en páginas web, para que sean accesibles para todas las personas:
También puedes revisar nuestra prueba de concepto en GitHub. Si tienes alguna pregunta o necesitas ayuda, ¡no dudes en contactarnos!
¿Buscas ayuda para integrar Pa11y-ci en tu proceso CI/CD?
Conversemos sobre cómo podemos ayudarte a mantener un enfoque continuo en la accesibilidad durante todo el proceso de desarrollo de tu proyecto. ¡Contáctanos!
¡Síguenos en Linkedin, Twitter, Instagram y Facebook para ser parte de nuestra comunidad y estar al tanto de otras reseñas de herramientas de accesibilidad de sitios web!
Testing de software e Inteligencia Artificial, claves para el futuro de la accesibilidad digital
EL rol del testing de software es fundamental para trabajar en pro de la accesibilidad digital. Conoce como las tecnologías disruptivas, como la IA, tienen implicancias en los cambios tecnológicos de la sociedad.
Cómo elegir la mejor herramienta de automatización de pruebas para tu proyecto en 5 simples pasos
Cada proyecto de testing es único, así como sus requisitos. Conoce algunos pasos prácticos para decidir qué herramienta de automatización de pruebas es la mejor para tu proyecto.
