Cómo usar Pa11y: Realizando pruebas de la accesibilidad web mediante la línea de comandos

Spanish (Español) translation by Javier Salesi (you can also view the original English article)

El mundo está en un punto donde es imperativo diseñar para todos, y la web es una parte importante de ello. Como tal, los desarrolladores y diseñadores necesitan asegurar que sus aplicaciones web y páginas web sean accesibles para todos.

Iniciarse en esto puede ser confuso, especialmente si estás aprendiendo por primera vez sobre accesibilidad. Esta opinión de Sami Keijonen es una magnífica introducción:

Accesibilidad

Creando una web inclusiva: por qué la accesibilidad importa

Sami Keijonen

En la misma tónica, una herramienta que resalta las mejoras en la accesibilidad es algo vital para agregar a tu flujo de trabajo de desarrollo web.

Presentando Pa11y

Pa11y proporciona un conjunto de herramientas gratuitas y de código abierto para ayudar a los desarrolladores y diseñadores a crear páginas web accesibles.

En este tutorial, estaré abordando Pa11y y Pa11y-ci, ambas herramientas de accesibilidad utilizadas mediante la línea de comandos. Si mejor prefieres usar una interfaz web consulta Pa11y Dashboard (también conocida como Koa11y).

Pa11y

Entonces ¿qué es la herramienta Pa11y utilizada desde la línea de comandos? De acuerdo a la documentación:

"Pa11y es tu compañero para realizar pruebas de accesibilidad de manera automatizada. Ejecuta pruebas de accesibilidad en tus páginas a través de la línea de comandos o de Node.js, de esa manera puedes automatizar tu proceso de testeo."

Cómo Instalar y Ejecutar Pa11y

Puedes comenzar instalando el paquete como un paquete global mediante NPM. Abre tu terminal e ingresa:

1	npm install -g pa11y

Para ejecutar Pa11y ingresa el siguiente comando (estoy usando mi propio sitio web https://jioke.me para demostrar este primer paso pues no indica ningún problema de accesibilidad):

1	pa11y https://jioke.me

Una manera alternativa de instalar Pa11y implica el uso de npx, un ejecutor de paquetes npm. En este caso ejecuto Pa11y como se señala a continuación:

1	npx pa11y https://jioke.me

Pa11y ejecuta pruebas de accesibilidad en las páginas web y nos devuelve los resultados. Si tu sitio web no contiene errores deberías ver un mensaje similar a este:

Welcome to Pa11y

 > Running Pa11y on URL https://jioke.me

No issues found!

Eligiendo qué pruebas realizar

Ahora, sustituye https://jioke.me por https://tutsplus.com, ejecuta Pa11y y verás una lista de errores:

Los errores que recibes podrían parecer agobiantes, pero es posible ser selectivo sobre la clase de respuesta que queremos de Pa11y.

Cómo seleccionar qué clases de pruebas ejecutar

Pa11y por defecto clasifica el resultado de las pruebas en tres categorías. En el orden del menos crítico al más crítico, son estos:

Aviso: Esto te informa sobre la accesibilidad de los elementos en tu página web. Son generalmente no críticos como tales, puedes elegir ignorarlos.
Advertencia: Pa11y utiliza esto para que prestes atención a algo que vale la pena tomar en consideración-problemas de accesibilidad que requieren atenderse, pero no son altamente críticos.
Error: Estos son problemas críticos que deberían abordarse y solucionarse.

Los mensajes de errores son los más importantes, como lo puedes ver en la imagen que tenemos arriba. Si quieres enfocarte en ellos, puedes hacerlo ignorando las advertencias y los avisos usando este comando:

1	pa11y --ignore "notice;warning" https://tutsplus.com

Este comando ahora mostrará únicamente los mensajes de errores. Pero si fuera posible ¿también podríamos ignorar los mensajes de errores? ¡Sí, podemos!

1	pa11y --ignore "error" https://tutsplus.com

Este comando, como podrías imaginar, no mostrará mensajes de errores.

Cambiando otros aspectos de los reportes de A11y

También podemos cambiar la accesibilidad estándar que queremos usar para realizar pruebas de accesibilidad. Esto es posible usando el parámetro --standard.

1	pa11y --standard WCAG2AAA https://tutsplus.com

Usando el parámetro --reporter, puedes configurar cómo deberían mostrarse los mensajes. Por ejemplo, puedes tener los mensajes mostrados en formato JSON en tu terminal.

1	pa11y --reporter json https://tutsplus.com

El mensaje de salida, cuando se muestra en la ventana de la terminal no es particularmente legible. Una mejor solución sería poner la respuesta JSON en un archivo que puedes abrir en tu editor de código o IDE. Puedes hacerlo usando el comando indicado abajo:

1	pa11y --reporter json https://tutsplus.com > errors.json

La opción json pasada al parámetro --reporter sobreescribe la opción de reporter predeterminada (la cual es CLI o línea de comandos). Luego indicando > errors.json, le decimos a Pa11y que guarde el mensaje de salida o resultado en un archivo errors.json. No necesitas tener este archivo creado antes de ejecutar el comando; el archivo será creado al instante y los resultados serán guardados en él.

También hay un reporter en formato CSV disponible para utilizarse.

1	pa11y --reporter csv https://tutsplus.com

Y puedes tener los errores guardados en un archivo CSV especificado.

1	pa11y --reporter csv https://tutsplus.com > errors.csv

Pa11y-CI

Momento de la herramienta número dos. Como el nombre lo sugiere, Pa11y-CI resulta útil cuando trabajas con integración continua. Creado con Pa11y, ejecuta pruebas de accesibilidad contra múltiples URLs, asegurando que no haya errores de accesibilidad en la producción.

Habiendo recorrido las bases del uso de Pa11y en la sección de arriba, Pa11y-CI es lo que querrás utilizar en tu siguiente gran proyecto después de haberte familiarizado con la accesibilidad.

Cómo instalar y configurar Pa11y-CI

Comienza instalando el paquete globalmente en tu computadora mediante npm.

1	npm install -g pa11y-ci

Pa11y-CI busca un archivo de configuración JSON llamado .pa11yci en el actual directorio de trabajo. Hay un parámetro ---config que puedes usar para especificar un archivo de configuración en un directorio diferente.

Aquí está una archivo de configuración de muestra tomado de la documentación.

{
    "default": {
        "timeout": 1000,
        "page": {
            "viewport": {
                "width": 320,
                "height": 480
            }
        }
    },
    "urls": [
        "https://pa11y.org/",
        "https://pa11y.org/contributing"
    ]
}

Navega hasta un directorio limpio usando tu terminal, o crea uno nuevo. Yo lo llamé pa11y-test. Crea un archivo llamado .pa11yci en este nuevo directorio. Por ahora, comencemos con esta configuración para probar múltiples URLs.

{
    "urls": [
        "http://tutsplus.com/",
        "https://tutsplus.com/authors/kingsley-chijioke"
    ]
}

Deberías ver errores en tu terminal, los errores serán para las URLs que indicaste.

En la configuración inicial que obtuvimos de la documentación, tuvimos un objeto predeterminado. Este objeto hizo posible identificar la configuración que será usada por todas las URLs que queremos probar.

Por ejemplo, también podemos definir un estándar de accesibilidad que será usado como predeterminado para las URLs que queremos probar.

"defaults": {
    "standard": "WCAG2AAA",
    "timeout": 1000,
    "page": {
        "viewport": {
            "width": 320,
            "height": 480
        }
    },
    "urls": [
        "https://tutsplus.com",
        "https://tutsplus.com/authors/kingsley-chijioke"
    ]
}

Esto sobreescribirá el estándar predeterminado que utiliza Pa11y. La configuración observada arriba también incluye la dimensiones de la ventana gráfica que queremos usar en las pruebas de la página.

También podemos especificar una configuración para una URL específica. Por ejemplo, despues de especificar el estándar de accesibilidad predeterminado que queremos utilizar (WCAG2AAA), podemos sobreescribir ese, cambiándolo por uno de las URLs que estamos probando (WCAG2A).

"defaults": {
    "standard": "WCAG2AAA",
    "timeout": 1000,
    "page": {
        "viewport": {
            "width": 320,
            "height": 480
        }
    },
    "urls": [
        {
            "url": "http://tutsplus.com/",
            "standard": "WCAG2A"
        },
        "https://tutsplus.com/authors/kingsley-chijioke"
    ]
}

Pa11y-CI también hace posible probar las acciones del usuario, estas son específicamente las que un usuario experimentará mientras navega por tu sitio web. Por ejemplo, podemos probar la acción de cuando un usuario hace clic en Suscríbete a Envato Elements en https://tutsplus.com/, que dirige al usuario a https://tutsplus.com/subscribe-with-elements.

{
  "urls": [
    {
      "url": "https://tutsplus.com",
      "actions": [
        "click element .home-hero__cta-button",
        "wait for url to be https://tutsplus.com/subscribe-with-elements"
      ]
    }
  ]
}

Concluyendo

Pa11y-CI se desempeña mejor cuando se usa en integración continua como lo especificó categóricamente la documentación.

"... puede actuar como un vigilante para detener la ocurrencia de problemas en a11y."

Después de pasar por todo esto y desarrollar el flujo de trabajo que prefieras, te sugiero ser consistente en su uso, para tener una mejor comprensión de lo que se ofrece. Si hay otras herramientas para realizar pruebas de accesibilidad que tu usas, ¡me encantaría leer sobre ellas en la sección de comentarios abajo!