Accesibilidad desde el diseño: convertir Figma en el punto de partida de productos digitales inclusivos
La accesibilidad digital no debería comenzar cuando una web o una aplicación ya está desarrollada. Incorporarla únicamente en las fases finales del proyecto puede implicar detectar problemas cuando las decisiones de diseño y desarrollo ya están tomadas, haciendo que su corrección sea más compleja y costosa.
En MTP entendemos la accesibilidad como un requisito transversal que debe estar presente durante todo el ciclo de vida de un producto digital. Por ello, ofrecemos un servicio especializado de revisión y anotación de accesibilidad sobre diseños en Figma, orientado a conseguir que los distintos equipos dispongan, antes del desarrollo, de las pautas necesarias para construir interfaces accesibles. Incluso, cuando el producto aún se está concibiendo, también acompañamos a los equipos de diseño en esas primeras decisiones.
De la auditoría al diseño accesible desde el origen
Tradicionalmente, una parte importante de la accesibilidad se ha abordado mediante auditorías realizadas sobre productos ya desarrollados. Estas evaluaciones siguen siendo fundamentales, pero existe una oportunidad mucho más temprana para prevenir numerosos problemas: el momento en el que se diseñan las pantallas, componentes y patrones de interacción.
Antes de que un desarrollador convierta un componente de Figma en HTML, CSS, JavaScript o en un componente nativo de una aplicación, ya se han tomado muchas decisiones que condicionarán su futura accesibilidad: colores, arquitectura de la información y jerarquía visual, navegación, comportamiento y estados de los elementos interactivos o el diseño de formularios, desde sus instrucciones, pasando por su estructura, hasta sus mensajes de error.
El servicio de MTP actúa precisamente en este punto.
Nuestros especialistas en accesibilidad, con amplia experiencia en UX, revisan componentes, pantallas y flujos completos, para luego documentar directamente sobre Figma las consideraciones de accesibilidad que deberán tenerse en cuenta durante su implementación. De esta forma, el diseño deja de mostrar únicamente cómo debe verse la interfaz y comienza también a transmitir cómo debe comportarse y construirse para resultar accesible.
Así, UX/UI, QA y desarrollo, trabajan sobre una referencia común de accesibilidad.
¿Qué aportan las anotaciones de accesibilidad?
Un diseño estático no siempre puede expresar todos los requisitos que posteriormente necesita implementar el equipo de desarrollo. Un botón puede parecer perfectamente definido visualmente, por ejemplo, pero el diseño por sí solo no determina necesariamente cuál debe ser su nombre accesible, cómo debe recibir el foco, qué comportamiento debe presentar mediante teclado o cómo debe anunciarse a las tecnologías de asistencia.
Las anotaciones realizadas por los expertos de MTP permiten trasladar al equipo técnico este tipo de consideraciones.
Partiendo de los componentes y analizando cómo interactúan en cada pantalla y flujo, la revisión puede abordar aspectos como:
- arquitectura de la información, encabezados y relaciones entre contenidos;
- Nombre, función y propósito de los elementos interactivos;
- textos alternativos e imágenes;
- uso del color y contraste;
- tamaño y características de los elementos de interacción;
- navegación y operabilidad mediante teclado;
- orden gestión e indicadores visibles del foco;
- formularios, etiquetas, instrucciones y tratamiento de errores;
- componentes interactivos y sus diferentes estados;
- ventanas modales, desplegables, pestañas, carruseles y otros patrones de interacción;
- mensajes dinámicos y cambios de contenido;
- consideraciones para lectores de pantalla y otras tecnologías de asistencia;
- comportamiento esperado de los componentes en web y aplicaciones móviles.
El objetivo no es convertir a los desarrolladores en especialistas en normativa de accesibilidad, sino proporcionarles indicaciones técnicas suficientemente claras para que puedan implementar correctamente lo que ha definido el equipo de diseño.
Un puente entre UX/UI y desarrollo
Uno de los principales valores del servicio es precisamente su capacidad para conectar disciplinas.
Un diseñador conoce profundamente la experiencia que quiere proporcionar al usuario. Un desarrollador conoce la arquitectura y las posibilidades tecnológicas necesarias para construirla. Y un especialista en accesibilidad conoce las implicaciones que determinadas decisiones de diseño e implementación pueden tener para personas que utilizan, por ejemplo, navegación mediante teclado, lectores de pantalla, ampliación, reconocimiento de voz u otros productos de apoyo.
Las anotaciones de accesibilidad permiten trasladar ese conocimiento especializado a los equipos de diseño y desarrollo de una manera práctica y directamente vinculada a cada componente, pantalla y flujo, lo que facilita comprender qué requisito afecta a cada elemento y cuál debe ser su comportamiento.
En lugar de entregar únicamente un documento independiente con requisitos generales, las indicaciones se contextualizan sobre las propias pantallas que posteriormente deberán desarrollarse. Esto facilita comprender qué requisito afecta a cada elemento y cuál debe ser su comportamiento accesible esperado.
Prevenir antes que corregir
Incorporar la accesibilidad desde Figma tiene una ventaja especialmente importante: permite detectar determinados problemas antes de que lleguen al código.
Modificar un diseño antes del desarrollo suele resultar mucho más sencillo que rediseñar y volver a implementar posteriormente componentes ya integrados en un producto. La revisión temprana reduce iteraciones innecesarias y ayuda a que diseño, desarrollo y QA compartan desde el principio los mismos criterios de accesibilidad.
Esto no sustituye a una posterior auditoría del producto desarrollado. Hay requisitos de accesibilidad que solamente pueden verificarse correctamente sobre una implementación funcional. Ambos servicios son, en realidad, complementarios:
Diseño accesible → Anotaciones en Figma → Desarrollo accesible → Pruebas y validación → Auditoría de accesibilidad
De esta forma, la auditoría final deja de ser el momento en el que se descubre por primera vez una gran cantidad de problemas y pasa a funcionar como un verdadero mecanismo de verificación de la accesibilidad del producto construido.
La experiencia de MTP aplicada desde la primera pantalla
El valor diferencial de este servicio reside, sobre todo, en quién realiza las revisiones.
MTP dispone de experiencia especializada en accesibilidad de sitios web y aplicaciones móviles, trabajando con metodologías de evaluación basadas en referencias como la UNE-EN 301 549, WCAG y WCAG-EM, y prestando servicios que combinan auditoría, asesoramiento técnico y acompañamiento a equipos responsables de productos digitales. Además, actualizamos nuestra metodología a medida que evolucionan estos estándares, como la reciente WCAG-EM 2.0, que amplía la evaluación más allá de las webs a aplicaciones y otros productos digitales.
Esta experiencia permite trasladar al diseño el conocimiento obtenido del análisis de productos digitales reales: qué problemas aparecen posteriormente durante las auditorías, qué componentes suelen presentar mayores dificultades y qué información necesita un equipo de desarrollo para implementar correctamente una solución accesible.
Además, MTP trabaja la accesibilidad tanto en el ámbito de organizaciones privadas como de Administraciones Públicas. Nuestros servicios para el sector público contemplan auditorías, asesoramiento a equipos de desarrollo y formación especializada, con el objetivo de contribuir al cumplimiento del Real Decreto 1112/2018 y de la UNE-EN 301 549.
Diseñar pensando en todas las personas
La accesibilidad no consiste únicamente en superar una auditoría o cumplir una lista de criterios. Esos criterios son el mínimo; nuestro objetivo es conseguir que la experiencia digital pueda ser utilizada por el mayor número posible de personas, independientemente de sus capacidades o de la tecnología mediante la que interactúan.
Por eso, cuanto antes se incorpore al ciclo de diseño y desarrollo, más natural será el resultado.
Con el servicio de revisión y anotación de accesibilidad en Figma de MTP, las organizaciones pueden integrar ese conocimiento experto directamente en sus procesos de UX/UI, proporcionando a los equipos de desarrollo una guía práctica para transformar los diseños en interfaces accesibles.
Porque la mejor forma de corregir un problema de accesibilidad es, siempre que sea posible, evitar que llegue a desarrollarse.
Dalia Sánchez
Silvia Saborido
Diseño UX y expertas en accesibilidad
