Mejoras de accesibilidad en Mercado Libre y Mercado Pago

2024

Junio

Mercado Libre

Web

• Mejoramos la claridad de la etiqueta de texto e hicimos visible el foco en el filtro "Todas".

• Dejamos de enfocar elementos no visibles.

• Hicimos visible el foco en los elementos "Ir a la compra" y el ícono para adjuntar archivo en el chat con el vendedor.

• Corregimos la repetición del nombre de la marca y mejoramos la lógica de navegación por el carrusel de marcas.

• Corregimos el anuncio de los montos del filtro "Precios" y los montos de los cupones de descuentos.

• Corregimos el anuncio del monto de las cuotas y añadimos la verbalización de la cantidad de productos en cada filtro.

• Hicimos operables con teclado los elementos "Eliminar, Guardar, Modificar, Comprar ahora y Ver más productos del vendedor".

• Corregimos el elemento "Ver más productos del vendedor" para que no se anunciara como "En blanco" y lo hicimos enfocables con lector de pantalla.

• Corregimos el anuncio del precio de los envíos para que fuera correcto.

• Dejamos de enfocar el elemento decorativo que no aportaba valor.

• Añadimos una etiqueta de texto al botón cerrar en el Modal Modificar.

• Corregimos el mensaje de confirmación del código para que se anunciara correctamente una vez ingresado el código.

• Solucionamos la verbalización del mensaje de confirmación prematuro sin haber ingresado el código.

• Hicimos enfocables con teclado los elementos "Ver todas las características" y "Ver descripción completa" en las características y descripciones de la Remera y Samsung.

• Hicimos seleccionables con teclado las imágenes del producto.

• Habilitamos el scroll con teclado en la selección de Color y Talle.

• Hicimos enfocable con teclado el nombre del vendedor.

• Añadimos una etiqueta de texto al botón cerrar en el Modal Guía de Talles.

• Agregamos texto alternativo al gráfico Full.

• Hicimos enfocables los medios de pago con lector de pantalla.

Android

• Mejoramos la navegación en la tarjeta de producto para evitar la lentitud al enfocar elementos fragmentados.

• Indicamos la cantidad de filtros aplicados.

• Relacionamos el elemento "Grandes marcas" con su interruptor en la vista de resultados.

• Corregimos la verbalización del precio en dólares en la vista de resultados.

• Relacionamos el elemento "submenú sugerencia" con la sugerencia.

• Añadimos etiquetas de texto a los botones "Copiar" y "Editar" en "Datos de tu cuenta".

• Evitamos que dos botones diferentes posean la misma etiqueta de texto en "Datos de tu cuenta".

• Mejoramos la navegación lógica y secuencial al recibir mensajes en Contacto.

• Anunciamos el mensaje de error al ingresar mal la tarjeta en "Nueva tarjeta".

• Relacionamos el texto "Envío" con su monto en "Elegí/Revisa cuándo llega tu compra".

• Añadimos etiquetas de texto a los campos de edición en "Nueva tarjeta".

• Relacionamos los radiobutton con sus textos en "Mis domicilios".

• Relacionamos el interruptor de Mercado Pago con su texto en "¿Cómo querés pagar?".

• Corregimos la verbalización de los montos en dólares en "¿Cómo querés pagar?".

• Relacionamos el texto "Pagás" con su monto en "¿Cómo querés pagar?".

• Relacionamos la casilla de validación con su texto en "Confirma tu compra".

• Corregimos la verbalización de los montos en dólares en "Confirma tu compra".

• Relacionamos los textos y sus correspondientes montos en "Confirma tu compra".

• Evitamos enfocar un elemento no visible en la pantalla "Necesito que llegue" de "Estado de la compra".

• Excluimos del foco del lector el elemento visual que indica el tamaño de pantalla en "Características del producto" de PDP Samsung.

• Relacionamos los textos "Color" y "Talle" con la opción elegida.

• Evitamos que los subtítulos "¿Qué querés saber?" y "Últimas realizadas" se enfoquen por separado en "Preguntas y respuestas".

• Evitamos que solo se pueda salir del modal utilizando el gesto nativo de Talkback en la modal "Cantidad".

• Relacionamos el texto "ventas concretadas" con el número.

• Añadimos una etiqueta de texto al botón para agregar a favoritos.

• Añadimos texto alternativo a la imagen Full en "Stock disponible".

• Clarificamos la información sobre la cantidad de opiniones en "Al NN% le quedó como esperaba".

iOS

• Mejoramos la navegación en la tarjeta de producto para evitar la lentitud al enfocar elementos fragmentados.

• Agregamos la etiqueta de texto del botón "Buscar" en Search Supermercado.

• Relacionamos el elemento "Grandes marcas" con su interruptor en la vista de resultados.

• Verbalizamos automáticamente el número de resultados al realizar una búsqueda.

• Relacionamos el elemento "submenú sugerencia" con la sugerencia.

• Agregamos la etiqueta de texto del botón "Cerrar" en Contacto.

• Hicimos la navegación lógica y secuencial al recibir mensajes en Contacto.

• Mantuvimos el foco en el modal al navegar hacia atrás en "¿Cómo preferís conversar?".

• Mejoramos la navegación en "Opiniones del producto" para ser lógica y secuencial.

• Añadimos rol al elemento "Mostrar todas las opiniones".

• Evitamos que el precio se anuncie en dólares en "Llega hoy por $".

• Anunciamos cuando una variante no está disponible en el modal de selección.

• Añadimos una etiqueta de texto al botón "Editar" en "Elegí donde recibir tu tarjeta".

• Agregamos la etiqueta de texto del botón "Configuración".

• Evitamos la verbalización de un elemento "Eliminar" al enfocar cada notificación.

• Añadimos una etiqueta de rol a las opciones de pago.

• Relacionamos el texto "Envío" con su monto en "Elegí/Revisa cuándo llega tu compra".

• Relacionamos el radiobutton con su texto en "Mis domicilios".

• Añadimos rol al elemento "+ Agregar domicilio" en "Mis domicilios".

• Añadimos un texto alternativo al elemento "Full" en "Elegí/Revisa cuándo llega tu compra".

• Añadimos roles a las opciones "Enviar a domicilio" y "Retirar en un punto de entrega" en "Elegí la forma de entrega".

• Evitamos la selección de ambas fechas de entrega con lector de pantalla en "Elegí cuándo llega tu compra".

• Corregimos la verbalización del precio en dólares en "¿Cómo querés pagar?".

• Relacionamos el texto "Pagas" con su monto en "¿Cómo querés pagar?".

• Corregimos la verbalización de los montos en dólares en "¿En cuántas cuotas?".

Mercado Pago

Android

• Agregamos la etiqueta de texto del botón "Configuración".

• Anunciamos cuando el número de operación se copia al portapapeles.

• Verbalizamos correctamente el monto.

• Hicimos enfocables los elementos "Filtrar" y "Gratis" en los filtros.

• Anunciamos el día cuando el local está cerrado en los datos del local.

• Implementamos un anuncio de mensaje de error al ingresar mal la tarjeta en "Nueva tarjeta".

• Arreglamos la operabilidad de las opciones "Con celular, e-mail o nombre" y "Con CBU, CVU o alias (Argentina)". 

• Asignamos etiquetas de texto a los botones "Copiar" y "Editar".

• Diferenciamos las etiquetas de texto de dos botones diferentes.

iOS

• Agregamos la etiqueta de texto del botón "Configuración".

• Enfocamos correctamente el título "Nuevas notificaciones" una sola vez.

• Proporcionamos instrucciones para eliminar una notificación.

• Eliminamos la verbalización innecesaria del elemento "Eliminar" al enfocar cada notificación.

• Establecimos una navegación lógica y secuencial en "Nueva Tarjeta".

• Asignamos una etiqueta de texto al botón "Editar" en "Elegí dónde recibir tu tarjeta".

• Verbalizamos correctamente las direcciones en "Elegí dónde recibir tu tarjeta".

• Anunciamos los días que el local está cerrado en los datos del local.

• Evitamos que se enfoquen elementos no visibles en pantalla.

• Anunciamos cuando el número de operación se copia al portapapeles.

Mayo

Mercado Libre

iOS

• Se solucionaron problemas de foco de accesibilidad en la barra de navegación que impactaron en "Mis Compras" y "Ayuda", entre otras vistas, mejorando la interacción de títulos y botones.

• En la "página de producto", se trabajó en la relación correcta entre el texto "Vendido por" y el enlace del vendedor, la asignación de roles y etiquetas de texto en elementos clave como "Ver todas las tiendas oficiales", "Ver todas las preguntas", "Guía de talles", y "al 91% le quedó como esperaba", así como la corrección de verbalización de calificaciones y estados de elementos interactivos, la inclusión de texto alternativo en imágenes de tarjetas, y la operabilidad de algunos botones y modales, asegurando una mejor experiencia para usuarios de lectores de pantalla.

• “Login”: corrección del foco del lector de pantalla en el botón "Mostrar contraseña", la inclusión de encabezados en las pantallas de ingreso de clave y de datos de usuario, y la redefinición del texto "Reportar un problema" como botón, garantizando una mejor experiencia de navegación.

• En "Search Supermercado" se soluciono que la cifra verbalizada corresponde a los comentarios de usuarios. 

• Se solucionaron problemas en la accesibilidad del proceso de "Checkout", incluyendo la adición de encabezados en las pantallas, la agrupación de información de entrega en bloques, la asignación de roles a las opciones de cuotas, la relación correcta entre textos y montos, la correcta verbalización de cifras y precios, la inclusión de texto alternativo en el elemento "Full", y la corrección del enfoque de precios, etiquetas de texto en inglés en el botón "Cerrar" del Modal Full y la navegación lógica y secuencial en el formulario de nueva tarjeta.

• En la vista de “Carrito”, la claridad de la etiqueta de texto del botón para modificar la cantidad del producto y la inclusión de texto alternativo en las imágenes de los productos y el elemento "Full".

• Se solucionaron problemas de accesibilidad en "Ayuda", incluyendo el enfoque de elementos no visibles en pantalla en diversas secciones de "Contactanos", el enfoque de una imagen decorativa en el chat y la verbalización de sugerencias de búsqueda en la página principal de Ayuda.

Android

• Se soluciona el problema de accesibilidad en el elemento "Ubicación" en Home, asegurando que la etiqueta de texto sea clara.

• Se solucionaron problemas de accesibilidad en "Login", asegurando que no se enfoquen elementos no visibles en pantalla y que se anuncie el mensaje de error al no marcar la casilla de verificación de términos y condiciones en "Crear Cuenta", además de añadir una etiqueta de texto al botón "Mostrar contraseña" en "Ingresar". Además se resolvió el enfoquen elementos no visibles en pantalla en diversas secciones del proceso de creación de cuenta.

• En "Productos de supermercado", se corrigieron los enfoques de elementos no visibles en pantalla, se añadió una etiqueta de texto al botón "Cerrar" del elemento emergente "Agregado al carrito", se ajustó el foco para que no se dispare al header al seleccionar "Agregar al carrito" y se añadió la verbalización del mensaje de estado al eliminar la última unidad de un producto.

• En "Checkout", se corrigió parte de la verbalización de cifras y montos en cuotas, se eliminaron anuncios en dólares, se añadieron encabezados a varias pantallas, se añadió una etiqueta de texto clara al botón "Cerrar" del Modal Full, se agregó texto alternativo al elemento "Full", se clarificó la etiqueta del botón "Atrás" y se relacionaron correctamente los radiobuttons con su texto.

• En "Carrito", se añadieron textos alternativos a las imágenes de los productos y al elemento "Full", se corrigió el enfoque de la barra de progreso, se ajustó la verbalización del monto faltante para el envío gratis para que no se anuncie en dólares, se clarificó la etiqueta de texto del botón para modificar la cantidad del producto, y se asignaron roles correctos a los elementos "Eliminar" y "Guardar".

Web

• En el menú de navegación principal se soluciona el problema que impedía eliminar notificaciones con el teclado.

• En "Ayuda - Contactanos - Asistente Virtual", se añadió la notificación para informar cuando llega un nuevo mensaje.

• En "Search - Vista de Resultados", se mejoró el acceso a las subcategorías con teclado y se simplificó la navegación por las categorías de supermercados.

Mercado Pago

iOS

• En "Transferencias", se añadió una etiqueta de rol al elemento accionable "Tu CVU".

Android

• En "Reservas", se soluciono el ingreso a las reservas realizadas con lectores de pantalla.

Web

• En "Transferencias", las listas accionables de opciones de transferencias ahora son operables con teclado.

• En "Creación de cuenta", se corrigió el nombre del enlace "Contáctanos".

Abril

• Solucionamos varios problemas en la sección de Carrito de nuestra aplicación. Los botones "Ver Carrito" y "Comprar Carrito" ahora son operables con lectores de pantalla y tienen etiquetas de rol. Actualizamos la etiqueta del botón "Buscar" para que sea más clara y cambiamos el anuncio del monto a moneda local. Además, identificamos encabezados en la pantalla para mejorar la navegación del contenido (Android / iOS).

• En las pantallas crear cuenta de Mercado Libre agregamos etiquetas de texto claras en los botones "Editar" y "Atrás". Implementamos anuncios de error para informar cuando se ingresa un email inválido. Además, identificamos encabezados en la pantalla de escaneo de DNI para mejorar la navegación (Android / iOS).

• Solucionamos la interacción en las opciones de contacto del portal de Ayuda (Web / Android / iOS)

• En la pantalla de inicio de sesión de nuestra aplicación agregamos encabezados a las diferentes pantallas para facilitar la navegación. Además, añadimos una etiqueta de texto al botón "Mostrar contraseña" para mejorar su comprensión. En la sección de recuperación de contraseña, incorporamos mensajes de error que se anuncian cuando se ingresa un código incorrecto (Android / iOS).

• Implementamos varias mejoras en las páginas de productos. Los elementos accionables de cada marca ahora son enfocados correctamente para facilitar su interacción. Agregamos etiquetas de rol a las opciones de talle y color, y se soluciono la lectura de las medidas del pecho al seleccionar un talle. Eliminamos los íconos decorativos que interferían con el lector de pantalla. El elemento "Ver más imágenes" y el gráfico "Recomendado" ahora tienen el rol adecuado, al igual que el elemento "Color" (Android / iOS).

Marzo

• Solucionamos la experiencia del formulario de carga de nueva tarjetas en Mercado Pago (Android / iOS).

• Mejoramos la interacción con teclado del formulario de selección de direcciones en el proceso de compra de un producto (Web).

• Identificamos encabezados en las páginas de productos para permitir una mejor navegación con lectores de pantalla (Android / iOS).

• Agregamos etiquetas adicionales para indicar de forma más clara la dirección actual seleccionada en Mercado Libre (Android / iOS).

Febrero

• Aumentamos algunos contrastes de color en el menú de navegación principal de Mercado Libre (Web).

• Agregamos texto discernible para lectores de pantalla en los enlaces "Saltar al contenido" y "Comentarios de accesibilidad" del menú de navegación principal de Mercado Libre y Mercado Pago (Web).

2023

• Mejoramos la lectura de valores y monedas para lectores de pantalla.

• En las pantallas de mayor tráfico, mejoramos componentes para navegación por teclado y lectores de pantalla. Botones y enlaces: incorporamos etiquetas de nombre faltantes. Íconos e imágenes: incorporamos etiquetas de nombre faltantes. Encabezados: los implementamos y jerarquizamos en secciones. Carruseles: mejoramos navegación y accesos. Ventanas de diálogo: mejoramos navegación y accesos. Menús desplegables: mejoramos navegación y accesos.

• Continuamos optimizando nuestro sistema de diseño, la librería de más de 37 componentes y 8 patrones que usamos para diseñar nuestras apps y sitios web.

• Generamos el marco de definiciones para implementar “reduce motion”, que respeta la configuración de animaciones elegida por la persona usuaria.

• Creamos un “focus indicator” único, consistente y de alto contraste para navegación por teclado.

• Agregamos atajos de navegación en nuestros sitios web para que las personas usuarias puedan saltar al contenido principal con teclado o lectores de pantalla.

• Agregamos un formulario para que las personas usuarias que navegan por teclado o lectores de pantalla puedan dejarnos comentarios.

• Desarrollamos guías y procesos internos para seguir optimizando nuestro trabajo con enfoque de accesibilidad digital.

• Seguimos capacitando y formando a nuestros equipos. Incluimos capítulos de accesibilidad en contenidos visuales y verbales en las tres ediciones del Bootcamp UX para nuevos ingresos de 2023. Entrenamos a desarrolladores web y de aplicaciones. Capacitamos a nuestro equipo de Social Media para usar textos alternativos en imágenes de redes sociales.

• Entrevistamos en vivo a personas usuarias que navegan con lectores de pantalla para aprender de su experiencia con nuestras aplicaciones.

• Trabajamos y seguimos dando seguimiento a problemas auditados en nuestras aplicaciones y sitios web, tanto manuales como automatizados.

• Participamos en espacios gubernamentales de protección de usuarios.

• Participamos en conferencias y otros eventos de IT contando nuestra experiencia y aprendiendo de otros actores de la comunidad.