Mantener la accesibilidad de un sitio web grande, y asegurar que todas sus páginas permanezcan accesibles en diferentes resoluciones de dispositivo puede ser una tarea desafiante. Un cambio en el diseño de un sitio grande afecta cientos de páginas, y verificar manualmente la accesibilidad de cada página sería una tarea tediosa y propensa a errores.
Usar pruebas automatizadas en una configuración de integración continua es un gran enfoque para ahorrar tiempo y esfuerzo. Aprendamos cómo combinando las funciones de emulación de viewport de dispositivo y hooks de despliegue de Rocket Validator podemos tener una configuración potente y flexible para mantener la accesibilidad de nuestros sitios web bajo control, cubriendo diferentes resoluciones de dispositivo.
Lo que vamos a construir
En este post vamos a configurar un pipeline de integración continua simple para nuestro sitio.
Aprovecharemos las funciones de emulación de viewport de dispositivo y hooks de despliegue de Rocket Validator para validar la accesibilidad de nuestro sitio web en diferentes resoluciones de dispositivo (800x600, 320x568, y 1440x900), y prepararemos algunos hooks de despliegue para integrar nuestro hosting preferido, Netlify, para que activen los informes de accesibilidad de Rocket Validator justo después de cada despliegue.
Qué verificaciones incluiremos
Rocket Validator es una herramienta de validación para todo el sitio que puede verificar miles de páginas de tus sitios, en busca de problemas comunes de accesibilidad y HTML.
Los informes de validación son bastante simples de configurar, ya que solo necesitas indicar la URL de inicio, qué verificaciones incluir: verificación de conformidad HTML (usando el validador HTML del W3C), y/o verificaciones de accesibilidad (usando el último conjunto de reglas de Axe Core), y cuántas páginas web incluir en el informe de validación (hasta 5,000 por informe).
Aquí está la lista de verificaciones que incluiremos en nuestros informes de Rocket Validator:
- Conformidad HTML. Asegurar que el HTML de nuestro sitio cumple con el validador HTML del W3C.
- Verificaciones de Axe Core en una resolución por defecto de 800x600. Verificar la accesibilidad de nuestro sitio, en busca de problemas comunes como etiquetas de formulario faltantes, contraste de color insuficiente, y más.
- Verificaciones de Axe Core en una resolución de 320x568. Las mismas verificaciones de Axe Core, pero esta vez en una resolución que simula el tamaño de pantalla de un iPhone SE.
- Verificaciones de Axe Core en una resolución de 1440x900. Las mismas verificaciones de accesibilidad, en una resolución que simula el tamaño de pantalla de una pantalla HiDPI, por ejemplo un MacBook Pro.
Para cada uno de estos informes de validación, incluiremos hasta 100 páginas de nuestro sitio de prueba. Así que en total, ejecutaremos 400 pruebas de validación en cada despliegue, ya que haremos 4 verificaciones en 100 páginas: una verificación HTML, y 3 verificaciones de Axe Core en 3 resoluciones de pantalla diferentes.
Los planes Agency de Rocket Validator incluyen 100,000 créditos de validación por mes, así que con una suscripción Agency podremos ejecutar 250 despliegues por mes - ¡eso es como 8 despliegues diarios!
Configurar el informe de validación HTML + Axe Core 800x600
¡OK, empezemos!
Primero, vamos a configurar un hook de despliegue que, cuando se active, ejecutará un informe de validación de Rocket Validator. Este primer informe de validación incluirá tanto la verificación de conformidad HTML, como las verificaciones de accesibilidad de Axe Core 800x600.
Para hacer esto, crearemos un nuevo Schedule. En Rocket Validator, un Schedule es un informe de validación recurrente que puede configurarse para ejecutarse en un intervalo de tiempo específico, o bajo demanda después de recibir una llamada de webhook a través de tu proveedor de hosting o servicio CI/CD.
En el formulario New Schedule, solo necesitaremos rellenar los siguientes campos:
- ¿Cuándo deberíamos ejecutar esta validación? Selecciona "Only on deploys".
- Starting URL. Introduce la página de inicio de tu sitio, o cualquier URL desde la que quieras empezar. En nuestro caso usaremos la URL de nuestro sitio de prueba ficticio, https://dummy.rocketvalidator.com/.
- ¿Cuántas páginas validar? Usaremos 100 páginas para este primer informe de validación.
Dejaremos los otros campos con sus valores por defecto. Eso incluirá verificaciones HTML y A11Y en una resolución por defecto de 800x600, y otras opciones como Deep Crawling que permitirá a Rocket Validator descubrir enlaces internos mientras rastrea el sitio. Además, la velocidad de validación más baja de 1 petición por segundo es un buen valor por defecto para validación automatizada, para evitar ser bloqueado por los límites de velocidad del sitio.
Una vez que hagamos clic en Save schedule, veremos los detalles del schedule que acabamos de crear. Esta página incluye la Deploy hook URL, que necesitaremos configurar en nuestros ajustes de construcción de Netlify (o en cualquier otro servicio CI/CD que soporte webhooks).
Configurar el informe de validación Axe Core 320x568
Repetiremos el mismo proceso para crear un nuevo schedule para el informe de validación de accesibilidad Axe Core 320x568.
Esta vez, desmarcaremos la opción HTML, ya que el marcado HTML no cambia entre resoluciones.
Para validar el sitio en una resolución que simule el tamaño de pantalla de un iPhone SE, marcaremos iPhone SE (320x568) en la sección Device Viewport Emulation. También podemos usar las tags opcionales para categorizar estos informes, en nuestro ejemplo usaremos la etiqueta "narrow".
¡Eso es todo lo que necesitamos! Haz clic en Save schedule y seremos redirigidos a la página del schedule, donde podremos ver la Deploy hook URL.
Configurar el informe de validación Axe Core 1440x900
Repetiremos el mismo proceso para crear un nuevo schedule para el informe de validación de accesibilidad Axe Core 1440x900.
Esta vez, marcaremos Laptop HiDPI screen (1440x900) en la sección Device Viewport Emulation, y usaremos la etiqueta "wide".
¡Ya casi estamos listos! Guarda el schedule y obtendrás la tercera Deploy hook URL.
Configurar la integración de Netlify
Ahora que tenemos las tres Deploy hook URLs configuradas en Rocket Validator, los informes relacionados se activarán cuando se reciba una petición POST en la URL correspondiente. Ese es el comportamiento estándar para webhooks, y Netlify hace que sea muy fácil configurarlo.
En la página de configuración del sitio para tu sitio en Netlify, ve a la sección Notifications. Allí, dentro de Emails and webhooks, haz clic en Add notification y elige HTTP POST request.
Introduce la primera deployment hook URL, y luego repite el proceso para las otras dos URLs.
¡Eso es todo! ¡Hemos configurado la integración de Rocket Validator en Netlify! Ahora, cada vez que desplegemos una nueva versión de nuestro sitio, Netlify notificará a Rocket Validator del despliegue a través de 3 webhooks diferentes, y Rocket Validator ejecutará los informes de validación relacionados con la emulación de viewport de dispositivo configurada para cada schedule.
Lo que hemos construido
En este post hemos visto cómo configurar un pipeline de integración continua para nuestro sitio, y cómo usar las funciones de emulación de viewport de dispositivo y hooks de despliegue de Rocket Validator para validar la accesibilidad de nuestro sitio web en tres resoluciones de dispositivo diferentes (800x600, 320x568, y 1440x900). Además, la conformidad HTML también se verificará en cada despliegue.
Tener esta configuración significa que cada vez que se despliegue una nueva versión de nuestro sitio, Rocket Validator ejecutará un informe de validación para cada schedule, verificando la accesibilidad de nuestro sitio en las diferentes resoluciones de dispositivo y enviándonos un informe detallado de los resultados por email.
Si se encuentran problemas de accesibilidad, podemos corregirlos y redesplegar nuestro sitio, y Rocket Validator ejecutará los informes de validación de nuevo en la nueva versión de nuestro sitio.