#210 Qué es un Handoff de accesibilidad
En este episodio entrevisto a MJ Bonafonte, diseñadora y especialista en accesibilidad digital que nos cuenta algunos de los fallos habituales en las entregas de diseño a desarrollo donde la accesibilidad muchas veces no se documenta o se documenta mal.
Aunque el equipo de diseño trabajan bien y conozca los principios básicos de accesibilidad, la realidad es que muchas veces acaban entregando un handoff donde la accesibilidad no se ha tenido en cuenta.
Puedes escuchar el episodio o si lo prefieres seguir leyendo.
¿Deseas ver la masterclass relacionada?
Únete a la membresía de tribUX y ve esta masterclass donde MJ profundiza en el tema.
Qué es el handoff accesible
El handoff es el traspaso de información de diseño a desarrollo. Los colores, las tipografías, los espaciados, los estados de los componentes, los prototipos en alta definición. Todo eso ya lo conoces.
El problema es que hay una capa entera que no viaja en ese traspaso: cómo va a funcionar el producto para personas que usan teclado, lector de pantalla, o que necesitan ampliar el texto.
Esa capa no se ve en un mockup estático. Y si nadie la escribe, nadie la construye.
La verdad es que no es culpa de desarrollo. Si no les dices cómo tiene que funcionar, lo resuelven como pueden. Y puede que lo hagan bien. Pero puede que no.
Qué tienes que documentar en tu handoff accesible
Esto es lo que suele quedarse fuera y que luego genera problemas:
Navegación por teclado
¿Cómo recorre la interfaz alguien que no usa el ratón? ¿En qué orden se mueve el foco —ese indicador visual que marca el elemento activo— por la pantalla? Si has reorganizado algo en el diseño, ese orden puede haber cambiado. Documéntalo. Desarrollo no puede adivinarlo mirando el Figma.
Comportamiento de los modales
Una ventana modal es esa ventana emergente que aparece encima del contenido, típicamente para confirmar una acción o mostrar información. Cuando se abre, ¿dónde va el foco? ¿Se queda dentro de la modal o sigue viajando por la página? ¿Cómo se cierra: con la X, con la tecla Escape, con las dos? ¿Y cuando se cierra, dónde vuelve el foco?
Son cuatro preguntas. Si no las respondes tú, alguien las va a improvisar.
Nombres accesibles de los elementos
Mira los iconos de tu diseño. Ese de la lupa, el del carrito, la papelera. ¿Tienen etiqueta de texto? Porque un lector de pantalla —el software que usan las personas con discapacidad visual para navegar por internet— no ve el icono. Lee lo que hay escrito. Si no hay nada escrito, el elemento no existe.
Decidir cómo se llama cada icono es una decisión de diseño. Y es tuya.
Interacciones con elementos interactivos
¿Este botón se activa con Enter o con la barra espaciadora? ¿Hay atajos de teclado? Parecen preguntas técnicas pero tienen respuesta en el diseño. Si no las respondes, desarrollo elige. Y no siempre elige lo mismo que habrías elegido tú.
Jerarquía de encabezados
Los encabezados no son solo una decisión visual. Son la estructura semántica de la página. Las personas que usan lector de pantalla navegan saltando de encabezado en encabezado, igual que tú escaneas visualmente los títulos de un artículo. Si la jerarquía está desordenada —un H3 antes que un H2, un H1 que aparece tres veces—, esa navegación se rompe.
Documenta qué nivel de encabezado tiene cada título. Es rápido y evita muchos problemas.
El zoom y el estado de foco
Dos de los grandes olvidados. El zoom: ¿funciona el diseño cuando alguien lo amplía al 200%? ¿Hay elementos que se solapan, texto que desaparece, botones que ya no se pueden pulsar? Pruébalo antes de entregar.
Y el estado de foco: ese borde visible que aparece alrededor del elemento que tiene el foco del teclado. Si lo has eliminado porque “quedaba raro visualmente”, has creado una barrera real. Sin ese indicador, quien navega con teclado no sabe dónde está.
Un momento clave
MJ nos cuenta que cuando “le haces un lazo al diseño y lo entregas”. Lo terminas y te desconectas. Tres meses después te enteras de cómo ha quedado cuando ya está en producción.
En ese escenario, la documentación es tu única herramienta. Si no está, la accesibilidad no viaja con el diseño.
La realidad es que remediar accesibilidad después de que algo está construido cuesta mucho más que documentarla desde el principio.
En tiempo, en dinero, y en negociaciones incómodas con el equipo de desarrollo. Trabajar con esa perspectiva de negocio también forma parte de nuestra responsabilidad como diseñadoras.
Por dónde empezar si esto es nuevo para ti
No tienes que convertirte en especialista en accesibilidad de golpe.
Empieza por hacerte preguntas en tu próximo proyecto.
- ¿Cómo va a navegar por esto alguien que no usa el ratón?
- ¿Qué nombre tiene este icono para quien no puede verlo?
- ¿Dónde va el foco cuando se abre este modal?
Esas preguntas son el primer paso, cuando empiezas a hacértelas, cambias la manera de mirar el diseño. Para siempre.
Si quieres ir más allá, en tribUX tenemos masterclasses de accesibilidad con MJ Bonafonte que van al detalle de todo esto: navegación por teclado, lectores de pantalla, cómo revisar lo que has diseñado antes de entregarlo.
¿Deseas ver la masterclass?
Si ya eres parte de la membresía, las tienes dentro. Y si todavía no conoces tribUX, pásate por escuelatribux.com 🙂
¿Ya documentas accesibilidad en tus handoffs? Si no lo haces todavía bien, únete a tribUX para aprender con MJ Bonafonte.