{"id":16298,"date":"2023-07-31T17:13:35","date_gmt":"2023-07-31T17:13:35","guid":{"rendered":"https:\/\/cl.abstracta.us\/blog\/?p=16298"},"modified":"2024-05-22T20:10:24","modified_gmt":"2024-05-23T00:10:24","slug":"accesibilidad-web-comparacion-herramientas-axe-wdio-pa11yci","status":"publish","type":"post","link":"https:\/\/es.abstracta.us\/blog\/accesibilidad-web-comparacion-herramientas-axe-wdio-pa11yci\/","title":{"rendered":"Accesibilidad de sitios web: comparaci\u00f3n entre axe + WDIO y Pa11y-ci"},"content":{"rendered":"\n

En este art\u00edculo, exploramos axe + WDIO y Pa11y-ci, dos herramientas eficientes que mejoran la accesibilidad de los sitios web. Evaluamos sus capacidades y cobertura en funci\u00f3n de est\u00e1ndares de accesibilidad, para poder comprender cu\u00e1l es la mejor herramienta para cada tarea.<\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n\n

La accesibilidad es un componente cada vez m\u00e1s importante del desarrollo web<\/strong>, ya que ayuda a minimizar barreras tecnol\u00f3gicas y que tanto los sitios web como las aplicaciones sean accesibles por todas las personas, <\/strong>independientemente de sus condiciones, discapacidades, o circunstancias.<\/p>\n\n\n\n

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\u00e1s conocidas que pueden ayudarte a mejorar la accesibilidad de los sitios web.<\/strong><\/p>\n\n\n\n

Nos sumergiremos en c\u00f3mo funcionan\u00a0Pa11y-ci<\/strong><\/a>\u00a0y\u00a0axe<\/strong><\/a> +\u00a0<\/strong>WDIO<\/strong><\/a>, para evaluar su eficacia a la hora de realizar pruebas de accesibilidad en sitios web.<\/p>\n\n\n\n

Nuestro objetivo es evaluar las capacidades y la cobertura de cada herramienta en relaci\u00f3n con las normas de accesibilidad. Para ello, examinaremos una Prueba de Concepto (PoC) anterior con axe + WDIO y realizaremos una nueva con Pa11y-ci.<\/p>\n\n\n\n

Tambi\u00e9n ofreceremos informaci\u00f3n sobre su rendimiento general, y sugeriremos estrategias para incorporar estas herramientas a proyectos de desarrollo web.<\/p>\n\n\n\n

Descripci\u00f3n general \u2014 Pa11y-ci vs. axe + WDIO<\/strong><\/h2>\n\n\n\n

Pa11y-ci y axe + WDIO son dos herramientas dise\u00f1adas para ayudar a validar la accesibilidad web<\/strong>. Con este objetivo, <\/strong>utilizan un conjunto de reglas basadas en las Pautas de Accesibilidad para el Contenido Web (WCAG).<\/p>\n\n\n\n

Estas plataformas analizan el c\u00f3digo HTML de los sitios web y proporcionan un informe detallado de los hallazgos <\/strong>que puede tener varios formatos, tales como JSON o HTML. Como resultado, con la informaci\u00f3n adecuada, los equipos tienen la posibilidad de identificar y solucionar los problemas de accesibilidad.<\/p>\n\n\n\n

Para comprender mejor lo que aporta cada herramienta, haremos una breve descripci\u00f3n<\/strong> tanto de Pa11y-ci como de axe + WDIO.<\/p>\n\n\n\n

Pa11y-ci:<\/strong><\/h2>\n\n\n\n

Pa11y-ci es una interfaz de l\u00ednea de comandos de c\u00f3digo abierto que facilita la ejecuci\u00f3n de pruebas de accesibilidad en los sitios web.<\/p>\n\n\n\n

Algunas de sus principales caracter\u00edsticas son:<\/strong><\/h4>\n\n\n\n

\u2705 Pruebas de accesibilidad automatizadas.
\u2705 Soporte de los est\u00e1ndares WAI-ARIA, WCAG 2.0 y Secci\u00f3n 508.
\u2705 F\u00e1cil integraci\u00f3n con procesos CI\/CD.
\u2705 Posibilidad de probar varias URL simult\u00e1neamente.<\/p>\n\n\n\n

A continuaci\u00f3n, compartimos una imagen del informe Pa11y, la cual muestra c\u00f3mo ofrece una representaci\u00f3n directa de las pruebas de accesibilidad realizadas.<\/p>\n\n\n\n

Es importante tener en cuenta que el reporte no ofrece una visi\u00f3n global ni una agrupaci\u00f3n detallada de los problemas identificados, sino que sirve como una forma de evaluar r\u00e1pidamente el estado de accesibilidad de un sitio, ya que destaca los errores hallados.<\/strong><\/p>\n\n\n

\n
\"\"
Informe pally-ci html<\/em><\/figcaption><\/figure><\/div>\n\n\n

axe + WDIO:<\/strong><\/h2>\n\n\n\n

axe es una biblioteca de c\u00f3digo abierto para pruebas automatizadas de accesibilidad de p\u00e1ginas web. Por su parte, WebdriverIO (WDIO) es un marco de automatizaci\u00f3n para Node.js, que proporciona capacidades para implementaciones del protocolo WebDriver como Selenium.<\/p>\n\n\n\n

Juntos, ofrecen una experiencia de automatizaci\u00f3n m\u00e1s potente que tiene en cuenta la accesibilidad.<\/strong> Pero necesitamos tener presente que la automatizaci\u00f3n por s\u00ed sola no basta: no podemos confiar \u00fanicamente en ella y dejar de lado la importancia de las pruebas manuales.<\/p>\n\n\n\n

El proceso de configuraci\u00f3n del marco de trabajo no es complejo debido a la integraci\u00f3n con axe. Resulta tan sencillo como importar la librer\u00eda \u201c@axe-core\/webdriverio\u201d. El desaf\u00edo reside en instalar una herramienta de informes independiente para exportar los resultados a un informe HTML.<\/p>\n\n\n\n

Adem\u00e1s, para obtener las URL dentro de un mapa del sitio<\/strong><\/a>, con el fin de simular el enfoque de Pa11y, es necesario emplear Axios. Posteriormente, precisamos crear una funci\u00f3n que nos permita iterar las pruebas para cada p\u00e1gina encontrada.<\/p>\n\n\n\n

Las ventajas de utilizar axe + WDIO incluyen:<\/strong><\/h4>\n\n\n\n

\u2705 Integraci\u00f3n flexible con WebdriverIO Test Framework.
\u2705 Soporte de los est\u00e1ndares WAI-ARIA, WCAG 2.0 y Secci\u00f3n 508.
\u2705 Informe detallado sobre los problemas identificados.
\u2705 Capacidad para probar aplicaciones web din\u00e1micas y complejas.<\/p>\n\n\n\n

A continuaci\u00f3n, compartimos varias im\u00e1genes del informe de axe + WDIO, <\/strong>las cuales ofrecen una visi\u00f3n general de los resultados, seguida de una lista de los problemas de accesibilidad encontrados en la aplicaci\u00f3n web.<\/p>\n\n\n\n

El informe incluye secciones que muestran los resultados que pasan las pruebas de los criterios de accesibilidad, as\u00ed como los resultados de accesibilidad incompletos e inaplicables.<\/p>\n\n\n

\n
\"\"
Informe axe html (resumen de resultados)<\/figcaption><\/figure><\/div>\n\n
\n
\"\"
axe html report (Detalles fallidos)<\/em><\/figcaption><\/figure><\/div>\n\n
\n
\"\"
Informe axe html (an\u00e1lisis detallado de resultados)<\/em><\/figcaption><\/figure><\/div>\n\n\n

Comparaci\u00f3n entre axe + WDIO y Pa11y-ci<\/strong><\/h2>\n\n\n\n

Analizamos las dos herramientas bas\u00e1ndonos en los resultados de la realizaci\u00f3n de Pruebas de Concepto (PoC) con cada una de ellas.<\/p>\n\n\n\n

axe + WDIO:<\/strong><\/h3>\n\n\n\n

\u2705 En promedio, logr\u00f3 un 57% de cobertura de problemas de accesibilidad WCAG<\/strong><\/a>.
\u2705 Informes m\u00e1s claros, problemas agrupados y soluciones vinculadas que mejoraron la interpretaci\u00f3n de los resultados.
\u2705 Permiti\u00f3 una integraci\u00f3n perfecta con el marco WebDriver.
\u2705 Proporcion\u00f3 un entorno de pruebas flexible.<\/p>\n\n\n\n

\u274c Configuraci\u00f3n m\u00e1s compleja.<\/p>\n\n\n\n

Pa11y-ci:<\/strong><\/h3>\n\n\n\n

\u2705 Simplific\u00f3 la ejecuci\u00f3n a trav\u00e9s de la interfaz de l\u00ednea de comandos. \u2705Permiti\u00f3 probar varias URL r\u00e1pidamente.<\/p>\n\n\n\n

\u274c Capacidades limitadas en comparaci\u00f3n con axe + WDIO.
\u274c Menos precisi\u00f3n en la detecci\u00f3n de todos los problemas.<\/p>\n\n\n\n

En pocas palabras: \u00bfcu\u00e1l es la mejor herramienta para cada tarea?<\/strong><\/h2>\n\n\n\n

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\u00e1s amplias.<\/p>\n\n\n\n

Para apoyar los esfuerzos de testing manual, recomendamos utilizar axe + WDIO <\/strong>como m\u00e9todo principal, debido a que ofrece informes completos y categorizados. Esto permite priorizar los problemas e identificar las \u00e1reas que cumplen las pautas o que requieren una revisi\u00f3n adicional.<\/p>\n\n\n\n

Para la integraci\u00f3n CI\/CD, consideramos que Pa11y-ci es la mejor opci\u00f3n<\/strong>, ya que es f\u00e1cil de configurar y funciona con rapidez. Se puede integrar perfectamente en las etapas de compilaci\u00f3n (\u201cbuild<\/em>\u201d) y despliegue para mantener un \u00e9nfasis continuo en la accesibilidad.<\/p>\n\n\n\n

\u00bfTe gustar\u00eda aprender m\u00e1s sobre la estrategia sugerida para la accesibilidad de sitios web y la implementaci\u00f3n de axe + WDIO?<\/strong> Te invitamos a disfrutar de la charla “Automatizando accesibilidad Web: una demostraci\u00f3n pr\u00e1ctica con axe-core y WebDriverIO<\/strong>“, donde Leonardo Guedes, tster automator, nos present\u00f3 una demo sobre c\u00f3mo la integraci\u00f3n de axe-core con WebDriverIO puede transformar la manera en que realizamos pruebas en p\u00e1ginas web, para que sean accesibles para todas las personas:<\/p>\n\n\n\n

\n\n\n\n
\n