Press "Enter" to skip to content

Pruebas de accesibilidad con Pa11y Dashboard desde Windows 10

Pa11y está conformado por un equipo donde su mayor creencia se basa en que hacer que la web sea más accesible es una mejora para TODOS. El equipo de Pa11y ha publicado y desarrollado una gama de herramientas gratuitas y de código abierto para colaborar con el diseño y desarrollo de páginas web más accesibles.

Una de las herramientas que han desarrollado es Pa11y Dashboard, esta herramienta consiste en un panel web que prueba automáticamente las páginas web para detectar problemas de accesibilidad a diario. Los gráficos que muestra ayudan a rastrear las mejoras y las regresiones a lo largo del tiempo. Es muy útil para los que no son desarrolladores porque permite realizar un seguimiento del estado de la accesibilidad en la página web acorde a los cambios que sean realizados por el equipo de desarrollo.

dashboard
Imagen tomada de: https://github.com/pa11y/pa11y-dashboard

Otra forma de poder acceder a resultados muy similares a los que nos ofrece Pa11y Dashboard y sus diferentes opciones, es la herramienta Koa11y.

Koa11y es una aplicación de escritorio para Windows, OSX y Ubuntu que nos permite comenzar a usar Pa11y con sólo unos pocos clicks. Esta opción nos ahorra muchos clicks y líneas de comandos si no somos desarrolladores.

La documentación que se tiene en la página de Github para la instalación de la opción de Pa11y Dashboard está generalmente orientada para Mac o Linux, pero si eres usuario de Windows en este post estaremos compartiendo los pasos que debes seguir para que puedas instalarla sin inconvenientes.

Pa11y Dashboard también fue presentada como parte de las investigaciones que fueron orientadas al grupo de estudiantes del curso 2020 de la UCU en la asignatura de Testing de Software y forma parte de la serie de posts que se irán publicando en las siguientes semanas relacionados al uso de varias herramientas de accesibilidad.

Pero, para los que aún deseen aventurarse e instalar Pa11y Dashboard desde Windows 10 continuemos avanzando en el post. 😀

Requisitos

Pa11y Dashboard es una aplicación Node.js y requiere de una versión estable o una versión LTS de Node, actualmente la versión 8 o superior. También requiere de una base de datos MongoDB para poder almacenar los resultados de las pruebas. Es importante conocer que la base de datos no tiene que estar en el mismo servidor o computadora desde donde se ejecuta Pa11y Dashboard.

Para instalar Node.js puedes acceder directamente a su sitio y descargar la opción más recomendada para todos los usuarios.

Imagen tomada desde: https://nodejs.org/en/

Una vez descargado e instalado Node.js, podemos a través de la consola verificar la versión que fue instalada de Node.js con el siguiente comando: node –version

Para la instalación de la base de datos MongoDB en Windows, recomiendo acceder primeramente al siguiente video, donde se explica todos los pasos que se necesitan realizar para dejar corriendo la base de datos de MongoDB en Windows.

Una vez realizados los pasos para la instalación de MongoDB, podemos correr desde la consola el siguiente comando: mongod y nos quedaría corriendo la base de datos. Para estar seguros que nos quedó corriendo correctamente se debe visualizar al final de la líneas de comandos que se está esperando por conexiones desde el puerto 27017. Esto debemos dejarlo corriendo en una consola por separado.

Instalación de Pa11y Dashboard

Para correr Pa11y Dashboard se recomienda acceder desde una consola diferente a la que estamos corriendo MongoDB para clonar el repositorio de forma local a través del siguiente comando:

git clone https://github.com/pa11y/pa11y-dashboard.git

Para instalar las dependencias se realizará a través de los siguientes comandos:

cd pa11y-dashboard
npm install

Una vez instalado Pa11y Dashboard y sus dependencias podemos acceder a la aplicación a través del siguiente comando: cd pa11y-dashboard

Si nos encontramos corriendo la aplicación de forma local, entonces debería estar bien con tener solo el desarrollo y las configuraciones de prueba. Ahora que se tiene la aplicación configurada, debemos asegurarnos de tener el servidor MongoDB ejecutándose con el comando mongod en otra consola. Se puede ejecutar en cada modo cambiando la variable de entorno NODE_ENV:

En Windows esto lo podemos realizar a través de los siguientes comandos:

SET NODE_ENV=development

node index.js

Una vez que se muestra en consola que Pa11y Dashboard se encuentra disponible y que el webservice está corriendo podemos pasar al siguiente paso.

Accederemos en nuestro navegador a la siguiente URL: http://localhost:4000/

Una vez que accedemos se visualizará la siguiente página:

Configurando Pa11y Dashboard

Una vez que tenemos acceso desde el navegador a Pa11y Dashboard podemos adicionar una nueva URL para realizar las pruebas a nuestra página web desde la opción «Add new URL».

Al seleccionar la opción «Add new URL» se muestra la siguiente pantalla con varias opciones que nos permitirán personalizar las pruebas que sean realizadas. Podemos indicar el nombre del proyecto, URL, estándar a probar, tiempos de espera, acciones, usuario y contraseña, también podemos ignorar reglas específicas, entre otras opciones.

Una vez completada la información que sea relevante para las pruebas de accesibilidad seleccionamos la opción «Add URL +» para que el proyecto de pruebas quede creado.

Una vez creado el proyecto de pruebas se muestra la siguiente pantalla donde se informa que todo fue creado correctamente:

Pruebas de accesibilidad en Pa11y Dashboard

Para correr las pruebas se debe seleccionar la opción: «Run Pa11y»

Una vez que sean corridas las pruebas se estarán mostrando los Errores, Advertencias, Avisos basados en las preferencias WCAG seleccionadas y se especifica si fue ignorada algunas de las reglas que se evalúan desde Pa11y Dashboard. La aplicación permite descargar los resultados en formato CSV y JSON.

Luego de ejecutar la prueba sobre un sitio, se presenta un cuadro con los errores, advertencias, avisos encontrados. Los mismos se muestran separados en diferentes pestañas.

Ventajas

Pa11y Dashboard nos permite acceder a los resultados de todos los sitios web que estemos evaluando y todo esto al alcance de un solo click desde una misma pantalla.

dashboard
Imagen tomada desde: https://github.com/pa11y/pa11y-dashboard

Una de sus principales ventajas es que proporciona una interfaz para el seguimiento de las pruebas de accesibilidad automatizadas a lo largo del tiempo. Los resultados de las pruebas de un sitio ejecutadas en diferentes días son comparadas de forma automatizada y presentadas de forma gráfica para que el usuario pueda ver la evolución del sitio en lo que a la accesibilidad refiere.

Los resultados de las pruebas de un sitio, quedan persistidas en la base de datos y es posible ver la evolución de la accesibilidad en las mismas como se muestra en la siguiente imagen:

results-page
Imagen tomada desde: https://github.com/pa11y/pa11y-dashboard

En el Dashboard queda visible el proyecto de prueba y se especifica el día de la última corrida realizada con los errores, advertencias y avisos detectados:

Limitaciones

La aplicación requiere realizar configuraciones poco amigables para alguien que no es desarrollador, pero al inicio del post dejamos todo lo necesario para que puedas instalar la aplicación sin inconvenientes desde Windows, si necesitas instalar desde Mac OS o Linux (Debian) puedes acceder a la página de Pa11y Dashboard en Github y encontrarás toda la información necesaria para la instalación en estos sistemas operativos.

Otra de las limitaciones que presenta es que una vez creado el proyecto no se permite editar el campo donde se ingresa la URL ni tampoco el campo del estándar de accesibilidad que fue seleccionado, si se desea obtener los resultados desde otro estándar desde la misma URL se deberá crear un nuevo proyecto de prueba para obtener los resultados.

Conclusiones

Pa11y Dashboard nos permite realizar un análisis inmediato de la accesibilidad en sitios web ingresando únicamente la URL y las configuraciones necesarias para la evaluación. Permite realizar un seguimiento de las pruebas de accesibilidad automatizadas a lo largo del tiempo.

Se detalla desde la aplicación un análisis basado en los estándares de la WCAG, parciales y totales. Se informa de las reglas que no son cumplidas, la ubicación del error en el código y se permite el acceso directo a más información del estándar en la página de la WCAG.

En general es una herramienta con una interfaz muy intuitiva para el usuario que realiza las pruebas y permite reconocer con facilidad los resultados que se visualizan.

Si te ha sido de utilidad este post, contanos tu experiencia!

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Close Bitnami banner
Bitnami