Notas de Accesibilidad en UX: Creando Experiencias Inclusivas
“Creamos valor para nuestros usuarios”
Comienzo este blog resaltando uno de nuestros principios culturales fundamentales en Mercado Libre: “creamos valor para nuestros usuarios”. Reconocemos que no podemos referirnos en plural a “nuestros usuarios” sin tener en cuenta a cada una de las personas. Es por esta razón que la accesibilidad ocupa un lugar central en Mercado Libre.
Contexto general
Lamentablemente, cuando se hacen productos digitales, no se piensa en cómo implementar la accesibilidad desde la etapa de diseño y traspaso a desarrollo. Pero es allí donde muchos de los problemas se pueden evitar si se tiene un proceso y pautas que permitan a los equipos de diseño tener en cuenta la accesibilidad. Seguramente imaginarás que es mucho más sencillo, menos costoso y mejor para las personas que usan tu producto todos los días, hacer las cosas bien desde las primeras ideas en lugar de tener que corregir bugs de usabilidad sobre un producto que ya está en producción.
En nuestro caso, desde el equipo de accesibilidad, observamos que varios equipos de UX ya estaban documentando los diseños finales (handoff) con una perspectiva de accesibilidad. Esta documentación incluía etiquetas que indicaban cómo la interfaz debería funcionar al ser leída por lectores de pantalla principalmente.
El equipo identificó la oportunidad de estandarizar la manera de hacer esas aclaraciones, y convertirlo en un hito del proceso de diseño de experiencias para acompañar la estrategia de accesibilidad de Mercado Libre. Es decir, las disponibilizamos para todos los equipos junto a una definición precisa desde nuestro sistema de diseño. Y es en ese clave momento cuando entra en escena mi participación.
¿Handoff de accesibilidad?
Cuando recibí este proyecto, no entendía muy bien de qué se trataba, ya que nunca había escuchado algo similar, yo conocía lo básico de accesibilidad y una que otra herramienta.
La investigación
Con un poco más de información en mis manos, comencé el proceso de investigación. Ya existían varios equipos que estaban trabajando con estas notas.
Identificamos 3 equipos que ya estaban utilizando notas de accesibilidad, me reuní con estos equipos y durante estas entrevistas, les pregunte:
1. ¿Por qué utilizar notas de accesibilidad?
2. ¿Cuáles fueron sus fuentes de referencia al crear estas notas?
3. ¿Qué componentes conforman sus notas y qué necesidades aún no estaban cubiertas?
4. ¿Sus equipos de desarrollo comprenden estas notas y las emplean correctamente?
Los hallazgos
Este proceso fue realmente enriquecedor para mí, porque a pesar de ser un entusiasta de la accesibilidad, no sabía que algo así fuera posible, y nunca me imaginé una herramienta como esta.
Te cuento cuáles fueron mis hallazgos en estas entrevistas:
- Las notas de accesibilidad son un conjunto de etiquetas para que los diseñadores puedan documentar pantallas en la fase de hand-off y acompañar a los equipos de desarrollo en la implementación de mejores prácticas de accesibilidad.
- Las etiquetas están pensadas para ayudar a los usuarios de lectores de pantalla y otras tecnologías asistivas a entender más información sobre lo que es o hace un elemento en la interfaz.
- No encontramos referencias similares en la región.
- Las etiquetas tenian un solo uso para todos los casos, lo que podia llevar a confusiones y redundancias.
- Hubo algo de resistencia al principio por parte de los equipos de desarrollo, más que nada por desconocimiento. Pero después de un tiempo los desarrolladores tomaron las notas de accesibilidad como parte de sus flujos de trabajo.
- Muchos de los componentes que ofrecemos desde el sistema de diseño ya tenían una capa de accesibilidad por lo que no era necesario que los equipos de nuevo añadieran esa capa.
- Las notas de accesibilidad son cruciales para no dejar nada librado a la interpretación de la persona que tiene que desarrollar un diseño. Con las notas nos aseguramos la misma consistencia que buscamos desde lo visual, pero también para el contenido.
Estos primeros hallazgos me ayudaron a trazar una ruta por la cual avanzar.
Benchmark externo
Haciendo una investigación exhaustiva, no encontré mucha información en español acerca del uso de las notas de accesibilidad (por lo menos de manera pública). Toda la documentación actual y los recursos están en inglés, algo que desafortunadamente es una constante en nuestro campo. Sin embargo, encontré varios recursos que me dieron más claridad acerca de lo que son las notas de accesibilidad.
Estos son algunos de los recursos que se encuentran disponibles:
Microsoft — Accessibility Notation
Indeed — Annotation Kit
GitLab — Accessibility bluelines
Estos recursos me ayudaron a identificar lo siguiente:
- Las notas se deben adaptar a las necesidades de la compañía.
- Las etiquetas son muy diferentes de acuerdo a cada plataforma. Por ejemplo, en web las etiquetas de headings pueden ir desde H1 a H6, pero en mobile en algunos casos solo basta la etiqueta “Heading” para identificar los encabezados.
Iteraciones
“Estamos en Beta continuo”, este es otro de los principios culturales que vivimos en Mercado Libre. Nos sentimos cómodos con la incertidumbre y demostramos apertura a nuevas experiencias, formas de trabajo, herramientas y equipos.
Bajo este contexto me propuse crear una PoC (prueba de concepto) con el objetivo de aprender a través de la experimentación. Para esta primera prueba únicamente buscaba entender el uso real de las notas de accesibilidad, así que diseñé un grupo de siete etiquetas basándome en los hallazgos de la investigación.
Una primera prueba
Nadie en el equipo había hecho un handoff de accesibilidad, así que organice una sesión donde entre todos pudiéramos usar las etiquetas y hacernos todas las preguntas que surgieran en ese momento.
Fue una experiencia única y enriquecedora porque nos ayudó a comprender otros desafíos que hasta el momento no habíamos previsto a nivel visual.
Estos fueron los resultados de esa sesión:
Gracias a esta sesión y los comentarios del equipo logramos identificar:
- La forma y el color deberían reflejar el rol de cada etiqueta
- El diseño y estilo de las etiquetas deben contrastar y diferenciarse del resto de la interfaz.
Este fue el punto de inicio y las notas tuvieron cinco versiones más donde en cada iteración se añadió valor incremental, hasta llegar a un resultado que nos diera seguridad a todo el equipo.
Después de tener esta versión estable, vino la oportunidad de probar las notas con el equipo de accesibilidad. En esta sesión el desafío que nos propusimos fue documentar dos pantallas, una web desktop y una mobile. Los resultados fueron increíbles, pudimos usar todas las etiquetas y encontrar oportunidades de mejora.
El cambio desde la prueba de concepto hasta la versión estable, es abismal. Logramos darle un rol definido a cada etiqueta y que pudiera diferenciarse de los estilos y diseño de nuestra interfaz.
Obviamente, tuvimos más idas y venidas de feedback y ajustes, que nos permitieron avanzar al siguiente paso: validar con un grupo seleccionado de desarrolladores y diseñadores.
¿Y los desarrolladores que opinarán de esto?
Esa fue la pregunta que me hice cuando ya habíamos cerrado el diseño y uso de las etiquetas. Fue así que me di a la tarea de reclutar un grupo pequeño de desarrolladores que tuvieran experiencias de accesibilidad dentro de Mercado Libre, para invitarlos a la demostración de las notas. Esa sesión fue un éxito, los desarrolladores entendieron el uso de cada una de las etiquetas y como deberían implementarlas en sus proyectos.
¿Y los diseñadores?
Hicimos el mismo proceso y seleccionamos a algunos perfiles UX referentes de accesibilidad e hicimos la demostración de las notas. El feedback que nos dieron fue espectacular. Los diseñadores dieron esa última validación que necesitábamos.
Ya validadas las notas de accesibilidad con los equipos involucrados pude cerrar esta primera versión.
El resultado final
Esta primera versión de las notas de accesibilidad nos dio como resultado las siguientes etiquetas para documentar accesibilidad en la fase de handoff:
- Etiqueta general: Permite asignar o redefinir textos accesibles a diferentes elementos.
- Headings: para marcar los encabezados de una página.
- Buttons: para identificar elementos que ejecuten o permitan acciones por parte del usuario.
- Links: para identificar elementos que permitan dirigirnos a enlaces web.
- Announcements: para identificar una región o elemento que cambia o se actualiza en la interfaz o en mensajes emergentes.
- Group: para combinar elementos en un foco completo permitiendo que el usuario de lector de pantalla tenga mayor contexto y no haga foco en elementos individuales.
- Group/Button: para combinar elementos en un foco completo y con rol específico.
- Custom actions: para identificar acciones disponibles a lectores de pantalla .
- Ignore: para contenido que puede ser ignorado en la lectura del lector de pantalla
- Comment: para cuando se requiera dejar una nota aclaratoria para el desarrollador.
- Reference: para marcar un orden específico de lectura, diferente al habitual / lógico (arriba-abajo / izq- der) en los elementos de una pantalla.
- Reference/note: para dejar notas aclaratorias a las referencias en la pantalla.
Documentación y lanzamiento
Como todo buen sistema de diseño, Andes se caracteriza por generar la documentación respectiva de cada uno de los elementos que dispone. Así que fueron varias semanas para documentar cada una de las etiquetas, su utilización y detalles a tener en cuenta para usarlas en la fase de handoff al equipo de desarrollo. Y para los desarrolladores disponibilizamos una documentación donde mostramos a través de videos cortos con los lectores de pantalla cómo impactan estas etiquetas al ser implementadas en un producto, y de esta manera puedan ver los resultados de emplear bien las notas de accesibilidad.
Llego el día y finalmente lanzamos las “Accessibility Notes”.
Hoy la gran mayoría de los equipos de diseño usan las notas en sus iniciativas.
¡Todos ganamos!
Por último quiero compartirles que este es uno de los proyectos más interesantes de mi carrera, ya que me “sacó” de mi zona de confort, llevándome a investigar y abrazar la incertidumbre. Así mismo creo que es uno de los proyectos de mayor impacto en mi objetivo como diseñador de experiencia de usuario, entendiendo que desde el mismo sistema de diseño podemos impactar a múltiples equipos y productos que desarrollamos en Mercado Libre. Al ser más accesibles aportamos a “Democratizar el comercio y los servicios financieros en América Latina”.
Esto no es todo
Estamos trabajando en una segunda parte de este artículo donde les vamos a contar cómo es la experiencia en la adopción y utilización de estas notas de accesibilidad en los equipos
No sólo es documentar las acciones e interacciones que deben ser interpretadas por las tecnologías asistivas, es ponernos en diferentes perspectivas de los usuarios, a re contar nuestras historias cuestionandonos el por que de lo visual e incluso a eliminar nuestros propios sesgos a la hora de presentar un diseño.
