Auditoría de accesibilidad en Figma con IA
Implementación práctica de un flujo automatizado de auditoría de accesibilidad
— El problema
El problema
¿Cómo puede la IA ayudarnos a agilizar las auditorías?
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 (lo que aporta criterio humano) y una capa de automatización (lo que la IA puede resolver mejor que yo).
PASO 1
Auditoría asistida por IA como punto de partida: utilicé un agente de Copilot con 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
Análisis manual sistemático sobre Figma sobre las pantallas clave. Revisé flujos, estructura semántica, navegación por teclado, contrastes, jerarquía visual, estados interactivos, patrones de interacción… Cada hallazgo lo documenté como comentario en Figma asociado al componente correspondiente, indicando 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 trabajo de varias horas 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… Las posibilidades crecen pero siempre bajo una supervisión humana.