¡Rendimiento de 100 puntos! Accesibilidad web en un entorno rápido: ¡fuegos artificiales para Lighthouse!

¡Dominemos la accesibilidad web!

"Tenemos gente de primerísimo nivel en frontend y maquetación, y además ya trabajamos en la interfaz de herramientas de MA, así que la accesibilidad va a ser pan comido." Con esa idea tan optimista comenzó el proyecto de accesibilidad web de Liberogic... que en realidad fue el inicio de una batalla épica. Al fijarnos la ambiciosa meta de cumplir por completo con WCAG 2.2, nos vimos envueltos en años de sesiones de estudio y debates interminables. Lo admito: subestimamos por completo la dificultad.

Si lo pienso, en las primeras sesiones de estudio sobre accesibilidad del proyecto, hace varios años,
"¿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ó un camino largo, muy largo.
"¿Entendemos bien este criterio de éxito de esta manera?"
"No, eso corresponde a este otro criterio."
Tras repetir discusiones y correcciones sin fin, por fin logramos organizarnos para apuntar al nivel de conformidad AA de WCAG 2.2.

¡Rehagamos nuestro propio sitio web!

"Este sitio web nuestro, ¿no encaja con nuestro negocio?"
Así empezó el rediseño de nuestro sitio.
"Ya que lo hacemos, que la accesibilidad y el SEO sean prioridad absoluta."
Ese deseo fue acogido con entusiasmo (probablemente) por nuestro talentoso equipo, aunque estuviera muy ocupado.

"¡Este color no cumple con la relación de contraste!"
"Vaya, desde el diseño se veía bien..."
"¿No se puede ajustar dentro de las reglas?"
Y así, entre el diseño y la accesibilidad, fuimos probando y equivocándonos.
En la maquetación, cumplimos con paciencia una lista de verificación de pruebas implacable.

¡Por fin terminado!
Aunque nos retrasamos bastante respecto al plan original, sentimos con firmeza los avances técnicos logrados.

¡100 puntos en Lighthouse y también una valoración excelente en PageSpeed Insights!

Ya contábamos con obtener una puntuación alta en Lighthouse para el sitio de nuestra empresa, desarrollado con Astro, microCMS y Cloudflare. ¡La accesibilidad, por supuesto, también quedó perfecta! La prueba de accesibilidad de Lighthouse utiliza axe-core, una herramienta de gran fiabilidad, por lo que el esfuerzo por cumplir con WCAG se valora de forma bastante directa.

En cuanto al rendimiento, al tener muchas imágenes y numerosos elementos en movimiento, al principio nos costó avanzar un poco. Sin embargo, tras repetir un ajuste laborioso, optimizando la forma de cargar las fuentes web, revisando la tasa de compresión y el formato de las imágenes y ajustando la prioridad de carga de los recursos, por fin llegó ese momento.

＼ ¡100 puntos! ／

¡Todas las categorías de Lighthouse para escritorio obtuvieron la máxima puntuación! Y el rumor resultó ser cierto. "¡Vaya! Si consigues 100 en todas las categorías de Lighthouse, ¡Google te celebra con fuegos artificiales!"

"¿En serio? El sitio anterior apenas llegaba a los 80-90 puntos. Seguramente Astro tiene parte del mérito, pero esto es increíble."

En PageSpeed Insights, la herramienta de medición del rendimiento web también ofrecida por Google, también obtuvimos una puntuación de 100 sin problemas.

Sin embargo, PageSpeed Insights no tiene ninguna animación especial (de fuegos artificiales). Como se ha repetido el patrón de un 99 aquí y un 100 allá, nos gustaría pedirle a Google que añada alguna celebración especial. 🎇

Por cierto, las puntuaciones de Lighthouse y PageSpeed Insights varían según la red, el estado del servidor y el navegador en el momento de la medición, así que, aunque hayamos alcanzado los 100 puntos, conviene tener en cuenta que no siempre es posible mantenerlos.

¿Conseguir 100 puntos de rendimiento en móvil es una misión imposible?... Así es como está la situación. (↑ No hicimos captura en su momento, así que esta es bastante reciente)

La verdadera meta está más allá de la puntuación

"Bueno, pero esto es lógico si lo pensamos desde el punto de vista del usuario...?"

Creo que el mejor resultado no proviene de perseguir una puntuación, sino de diseñar a fondo para todas las personas que utilizan el sitio web, y eso es lo que conduce a la mejor valoración. "Puntuación 100" es solo un punto de paso. El verdadero objetivo es crear un sitio web cómodo y fácil de usar para todos!!

Actualmente estamos implementando diversas funciones experimentales para verificar la viabilidad de nuestro trabajo, por lo que la puntuación de Lighthouse ha bajado respecto a entonces. Aunque repetimos con toda inocencia "¿por qué, por qué?", es evidente que para todos resulta más importante verificar la viabilidad del trabajo que mi capricho.

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