Cuando lancé Lúmina, hace unos meses, la idea era disponer de una herramienta rápida en español para comprobar la accesibilidad básica de una web sin tener que montar un entorno complejo ni pelearte con veinte informes distintos. Introducir una URL, esperar unos segundos y obtener un diagnóstico automático basado en axe-core y criterios WCAG, sin más misterio; y la primera versión cumplía exactamente eso y funcionaba. Detectaba problemas reales. Generaba informes útiles. Pero también era evidente que todavía tenía bastante de “prototipo técnico”. Y sinceramente, no esperaba que tanta gente la usara tan pronto, ya que estos días Lúmina ha superado las 700 auditorías realizadas.
No es una cifra gigantesca. No voy a vender humo diciendo que esto ha revolucionado Internet XD. Pero sí es suficiente para confirmar algo importante: la herramienta tiene utilidad real. La gente entra, prueba sitios, revisa informes y vuelve. Y precisamente por eso decidí hacer algo que llevaba tiempo rondándome la cabeza: rehacer prácticamente todo el informe premium. No solo a nivel visual, sino también a nivel de experiencia, accesibilidad, navegación y calidad técnica del análisis. Porque había una contradicción bastante evidente.
Sí: el informe de accesibilidad tenía problemas de accesibilidad
Nada dramático, pero estaban ahí, y me parecía una mieja absurdo auditar sitios ajenos mientras el propio informe incumplía algunas cosas básicas. Así que una de las primeras decisiones fue dejar de tratar el informe como “una salida de datos” y empezar a tratarlo como un producto real.
Los badges ya no dependen únicamente del color para transmitir estado, y ahora incorporan iconografía SVG y mejor contraste para usuarios con dificultades de percepción visual. La navegación de la toolbar funciona completamente por teclado siguiendo el patrón ARIA Toolbar. Los enlaces del índice tienen etiquetas descriptivas reales. Los bloques de código pueden enfocarse correctamente. Y también corregí la jerarquía semántica de encabezados porque sí… había varias etiquetas donde no deberían. Son detalles pequeños, pero en accesibilidad los detalles pequeños suelen ser exactamente los importantes.
El informe necesitaba menos “datos” y más contexto
Otra cosa que me molestaba bastante de las primeras versiones era que el informe se parecía demasiado a un dump técnico, es decir, mucho selector CSS. Mucha referencia interna. Mucho “esto falla aquí”. Muy útil para alguien técnico, pero no tan útil para un cliente, un diseñador, un responsable de contenidos o alguien que simplemente quiere entender qué está pasando. Así que empecé a trabajar las evidencias de otra manera.
Ahora, por ejemplo, los problemas de contraste muestran comparativas visuales reales entre la combinación actual y una propuesta corregida con ratio WCAG válido. Ya no tienes que imaginarte el problema leyendo hexadecimales, simplemente lo ves.
También añadí capturas anotadas automáticamente mediante Puppeteer, marcando visualmente las zonas conflictivas de la página. Y esto cambia muchísimo la lectura del informe. Porque pasas de interpretar selectores a identificar problemas de un vistazo. De momento esta fase está en pruebas porque, no es posible anotar todas las incidencias en una sola captura. Ya veré cómo evoluciona, porque creo que esta parte ha sido una de las mejoras que más prometen.
Navegar 50 criterios WCAG tampoco debería ser un castigo medieval
El antiguo índice era básicamente una lista enorme de criterios. Funcionaba… técnicamente, pero navegarlo era bastante horrible. Ahora los criterios están agrupados por principios WCAG (Perceptible, Operable, Comprensible y Robusto), con acordeones, contadores de estado y filtros rápidos para mostrar únicamente errores o revisiones manuales. Esto gracias a las observaciones de mi querido amigo Marc Palau que se tomó las molestias de hacerme feedback del proyecto.
Además, cada criterio permite volver al índice sin tener que hacer scroll infinito durante medio kilómetro de informe. Que sí, parece una tontería. Hasta que haces auditorías largas y empiezas a maldecir tu propio producto.
WCAG 2.2 completo y Lighthouse integrado
A nivel técnico también había trabajo pendiente. Lúmina ahora cubre los nuevos criterios WCAG 2.2 A/AA, incluyendo aspectos como:
- foco no oculto,
• tamaños mínimos de objetivos táctiles,
• alternativas a gestos drag & drop.
Y además el análisis ya no depende únicamente de axe-core. He integrado Lighthouse para complementar accesibilidad con métricas de rendimiento, SEO y buenas prácticas. Pero intentando evitar el ruido habitual de Lighthouse: el informe filtra duplicidades y solo muestra auditorías realmente útiles que no estén ya cubiertas por axe.
También me he pegado con algo menos glamuroso pero bastante importante: traducir y reinterpretar muchas auditorías al español para que no parezcan mensajes crípticos escritos por un parser enfadado. Creo que el esfuerzo merece la pena porque pone a Lúmina en el foco de lo que pretendía en un principio, que existiese una herramienta en castellano, que ayude a los desarrolladores sin tener que leer cientos de páginas de documentación en inglés.
El añadido más curioso: simulación de daltonismo
Probablemente la funcionalidad más específica —y también una de las que más curioso me ha resultado añadir— es el simulador de daltonismo integrado dentro del informe.
Ahora puedes visualizar problemas de contraste bajo distintos tipos de percepción cromática: deuteranopia, protanopia y tritanopia. Incluso puedes aplicar el filtro a todo el informe y navegarlo completo viendo cómo lo percibiría alguien con esas limitaciones visuales. Y aquí es donde he vuelto a recordar algo importante sobre accesibilidad: muchas veces no hablamos de “cumplir normas”, sino simplemente de entender cómo otras personas utilizan la web.
¿Y ahora qué?
Sinceramente, por primera vez siento que Lúmina empieza a parecer una herramienta madura y no solo una idea interesante funcionando sobre Node, Puppeteer y café XD. Todavía hay muchísimo margen de mejora. Tengo en mente soporte opcional para criterios AAA, monitorización continua y varias ideas relacionadas con reporting avanzado.
Pero ahora mismo el informe ya está en un punto donde podría utilizarse perfectamente en auditorías reales para clientes reales. Y esa era la meta. Si quieres probarlo, puedes entrar en Lúmina https://lumina.fmkr.net/ y analizar cualquier web gratuitamente.
Y si tu web suspende… bueno… no le eches la culpa al mensajero XD.
