Auditoría de accesibilidad en Figma con Inteligencia Artificial
Implementación práctica de un flujo automatizado de auditoría de accesibilidad
— El problema
El problema
Auditar accesibilidad sobre Figma es cómodo: vas dejando comentarios encima de cada componente con el criterio WCAG que se incumple, la descripción del error y una propuesta de solución. El problema llega después.
En la auditoría que realicé sobre el sitio de PortAventura World (conforme a WCAG 2.2) acabé con decenas de comentarios repartidos por la home, el flujo de compra de entradas, las páginas de parques, hoteles, restaurantes, formularios y componentes dinámicos. Toda esa información era valiosa, pero estaba atrapada dentro de Figma en un formato poco accionable para el equipo: imposible filtrar por criterio, ordenar por severidad o entregar un informe limpio a stakeholders y a desarrollo.
Volcar manualmente cada comentario a un Excel estructurado significaba horas de copia-pega, capturas una a una y un riesgo alto de inconsistencias entre filas. Un cuello de botella que, además, restaba tiempo a lo importante: analizar los errores y diseñar las soluciones.
— El enfoque
El enfoque
Decidí abordar el proyecto en dos capas: una capa de análisis humano (auditoría manual con VoiceOver y herramientas) y otra capa de automatización (IA como apoyo previo + skill para el informe).
PASO 1
Auditoría asistida por IA como punto de partida: utilicé un agente en Cursor. No lo uso para generar el informe final, sino para tener un primer mapa de fallos sobre el que estructurar el análisis manual. El showcase de este proceso está documentado en mi GitHub.
PASO 2
Analicé las pantallas clave combinando revisión manual y herramientas automáticas: VoiceOver para evaluar la lectura semántica, navegación por teclado de forma independiente, marcadores y varias extensiones de Chrome (Lighthouse entre otras) para verificar estructura, contraste, jerarquía y reflujo. Cada incidencia quedó documentada como comentario en Figma, vinculada a su componente con el criterio WCAG, la descripción del error y la solución propuesta.
PASO 3
Automatización del informe con la skill de weAAAre para extraer los comentarios de Figma y convertirlos en un informe estandarizado sin escribir una sola fila a mano: aparece el componente, criterio, error, cómo corregirlo y una captura del componente a modificar, todo de forma automática. En esta ocasión la exportación ha sido en Excel, pero si el cliente lo desea, se puede extraer en Jira, Notion… Solo hay que editar la skill.
— El resultado
El resultado
Un informe de auditoría WCAG 2.2 completo, filtrable y listo para compartir con desarrollo y stakeholders, generado de forma automática a partir del trabajo que ya había hecho dentro de Figma. Lo que antes era medio día de copia-pega pasó a ser cuestión de minutos, y eso liberó tiempo para lo que de verdad aporta valor: priorizar mejoras según impacto en la experiencia y viabilidad técnica.
Los hallazgos quedaron organizados en las cuatro categorías WCAG:
- Perceptible: ALTs ausentes o de baja calidad, contrastes insuficientes, estructura semántica inconsistente y ausencia de unidades relativas que limitaban el reflujo del contenido.
- Operable: falta de skip links, menús inaccesibles sin ratón, trampas de teclado en modales, foco poco visible, orden de tabulación irregular, enlaces poco descriptivos y dianas de clic demasiado pequeñas.
- Comprensible: cambios de contexto inesperados en formularios y mensajes de error poco claros, sobre todo en el flujo crítico de compra de entradas.
- Robusto: ausencia de atributos de idioma, HTML mal estructurado, mal uso de ARIA y dependencias excesivas de JavaScript sin alternativas accesibles.
La conclusión: el sitio presenta una accesibilidad insuficiente respecto a WCAG 2.2, y aplicar las mejoras propuestas ampliaría la audiencia, reduciría riesgo legal, reforzaría la marca y mejoraría el SEO de forma colateral.
El informe final está disponible en dos formatos. Por un lado, una versión en Excel generada directamente mediante la automatización con IA explicada en este proyecto, que estructura automáticamente los comentarios de Figma en un formato listo para análisis y seguimiento. Y por otro, una versión más visual pensada para stakeholders que necesitan una comprensión rápida y más interpretativa de los hallazgos. Si te interesa revisarlo en detalle, puedes ponerte en contacto conmigo y lo vemos juntos.
— Aprendizajes
Aprendizajes
Más allá de agilizar procesos con IA y aplicar todos mis conocimientos sobre accesibilidad en una auditoría real, este proyecto me confirmó algo que intento aplicar a cualquier flujo: la IA no sustituye el criterio, automatiza lo repetitivo para que puedas dedicarle tiempo a lo que sí lo requiere. La extracción a Excel puede parecer un output sencillo, pero abre la puerta a encadenar otras automatizaciones: análisis de patrones de error, priorización por gravedad, generación de tickets para desarrollo…
Y un segundo aprendizaje, menos técnico pero igual de importante: incluso empresas grandes y con marca consolidada como PortAventura tienen deudas importantes de accesibilidad. No es un problema de presupuesto ni de capacidad técnica, es un problema de prioridad. Lo que confirma que la accesibilidad sigue necesitando profesionales que la pongan sobre la mesa y herramientas que hagan ese trabajo más rápido y más difícil de ignorar.