¡100 puntos a toda velocidad! ¡Accesibilidad web en entornos de alto rendimiento! ¡Fuegos artificiales en Lighthouse!

¡Domina la accesibilidad web!

"El frontend está bien cubierto, el marcado es de primera clase, incluso la UI de nuestras herramientas de marketing automation está lista, así que la accesibilidad será pan comido". Con esa ingenua idea comenzó el proyecto de accesibilidad web de Liberogic... pero en realidad fue el comienzo de una batalla épica. Al establecer la ambiciosa meta de cumplir plenamente con WCAG 2.2, nos sumergimos en años de sesiones de capacitación y debates interminables. Sinceramente, aprendimos a no subestimar algo que habíamos considerado tan fácil.

Mirando atrás, hace algunos años en las primeras fases del proyecto tuvimos sesiones de capacitación en accesibilidad.
"¿Cuál es la diferencia entre WCAG y JIS X 8341-3:2016?"
"¡WCAG 2.0 y JIS X 8341-3:2016 son lo mismo!"
Así comenzó este largo y sinuoso camino desde intercambios tan elementales.
"¿Es correcto entender este criterio de conformidad de esta manera?"
"No, eso corresponde al otro criterio".
Tras repetir debates y correcciones sin fin, finalmente llegamos a un punto donde podíamos perseguir la conformidad WCAG 2.2 nivel AA.

¡Rediseñemos nuestro sitio web!

"Nuestro sitio web no se alinea bien con nuestro negocio, ¿verdad?".
Así comenzó la renovación de nuestro sitio corporativo.
"¡Mientras estamos en ello, pongamos todo en accesibilidad y SEO!"
Nuestro talentoso equipo, aunque ocupado, (probablemente) se lanzó felizmente a la tarea.

"¡Este color no cumple con el ratio de contraste!".
"Pero desde el punto de vista del diseño se ve bien...".
"¿Podemos hacer ajustes dentro de las reglas?"
Y así, nos encontramos en la encrucijada entre diseño y accesibilidad, experimentando continuamente.
En el marcado, completamos metódicamente una implacable lista de verificación de elementos de prueba.

¡Finalmente terminado!
Aunque el cronograma se atrasó significativamente del plan original, sentimos una clara confirmación del progreso técnico alcanzado.

¡Puntuación perfecta de 100 en Lighthouse! ¡Y excelente calificación en PageSpeed Insights también!

Nuestro sitio construido con Astro + microCMS + Cloudflare logra altas puntuaciones en Lighthouse como era de esperarse. ¡La accesibilidad está perfectamente afinada, por supuesto! La prueba de accesibilidad de Lighthouse utiliza axe-core, una herramienta de alta confiabilidad, por lo que los esfuerzos de cumplimiento WCAG se evalúan de manera bastante directa.

En cuanto al rendimiento, aunque inicialmente tuvimos algunos problemas dado que el sitio contiene muchas imágenes y elementos dinámicos, realizamos ajustes meticulosos: optimizamos la carga de web fonts, revisamos la compresión y formato de imágenes, y ajustamos la prioridad de carga de recursos. Finalmente, ¡llegó ese momento!

¡100 puntos!

Todos los elementos de Lighthouse para versión de escritorio con puntuación perfecta. Y ese rumor resultó ser verdad. "¡Espera! ¿Es cierto que Google dispara fuegos artificiales de celebración cuando logras puntuación perfecta de 100 en Lighthouse?"

"¿En serio? El sitio anterior apenas alcanzaba 80-90 puntos. ¡Aunque parte del mérito es de Astro, esto es increíble!"

De manera similar, PageSpeed Insights, la herramienta de medición de rendimiento de sitios web proporcionada por Google, también registró naturalmente una puntuación de 100.

Solo que PageSpeed Insights no tiene efectos especiales (fuegos artificiales) como Lighthouse. Como continuábamos viendo casos donde un lado tenía 99 y el otro 100, esperamos que Google agregue algún tipo de efecto celebratorio aquí también. 🎇

Por cierto, las puntuaciones de Lighthouse y PageSpeed Insights varían según el entorno de red, el estado del servidor y las condiciones del navegador en el momento de la medición, así que aunque hayas logrado una puntuación de 100, ten en cuenta que no siempre podrás mantener esa puntuación.

¿Conseguir una puntuación perfecta de 100 en móvil es imposible? Más o menos así se ve. (↑No tengo la captura de ese momento, así que esta es bastante reciente)

El verdadero objetivo está más allá de la puntuación

"Pero espera, si lo pienso desde la perspectiva del usuario, ¿no es este el resultado natural...?"

Creo que el resultado de perseguir un diseño pensado en todas las personas que utilizan un sitio web, en lugar de simplemente buscar una puntuación, es lo que lleva a la máxima evaluación. "Puntuación 100" es solo un punto de paso. ¡El verdadero objetivo es crear un sitio web que sea cómodo y fácil de usar para todos!

Actualmente estamos implementando varias funciones experimentales para verificar la viabilidad de nuestras operaciones, y la puntuación de Lighthouse ha bajado desde entonces. Aunque sigo preguntándome ingenuamente "¿por qué, por qué...?", es obvio que para todos es más importante verificar la viabilidad operativa que mis caprichos personales.

Así que nuestra incesante búsqueda continúa.