En esta ocasión me gustaría mostrarte en primera persona como hacer testing y encontrar errores de accesibilidad en app móvil. Para ello, te voy a listar los errores que más me he encontrado, el porqué es necesario que sean solventados y en que perjudica a los usuarios. Para ello, te voy a adjuntar unas capturas de pantalla y a grabar unos vídeos «muy caseros», pero que seguro que te ayudan a comprender.
¿Empezamos?
Índice de contenidos
Navegación con teclado conectado con blueethoot
Este es un ejemplo de defecto encontrado en accesibilidad: La no correcta navegación por teclado conectado con bluetooth. En muchas aplicaciones no han revisado cómo se comporta esa navegación con teclado. En concreto, suelen incumplir las siguientes normas: 2.1.1 Teclado, 2.1.2 Sin trampas para el foco del teclado. ¿Por qué? Pues porque no se puede navegar por los elementos «interaccionables» de la app. En general, hay trampas de teclado que impiden llegar a algunos elementos.
En el siguiente ejemplo, se puede observar como no se puede acceder al buscador, ni al icono de escanear código de barras, ni a los botones de: Hombre, Mujer, Niños y bebés.
En el siguiente ejemplo, en una red social se presentan KOS por otras normas: 2.4.3 Orden del foco y 2.4.7 Foco visible. En primer lugar, nos encontramos una perdida de foco, donde se pierde el orden, ya que al acceder a las ventanas emergentes, se pierde el foco y sigue navegando por la pantalla principal. Esto no puede ocurrir, el foco no puede salir de la ventana emergente hasta su cierre. Además, al cerrar, debe volver a elemento que desencadena la apertura de la ventana.
Por otro lado, observamos que el foco no es visible para algunos elementos. En este punto se debe tener en cuenta que, a veces, la tecnología no permite definir un foco a medida. Si fuera este el caso, no tendríamos un KO, porque quedan eximidos al no poder crear la visualización adecuada del foco.
¿A quién afecta estos defectos? A personas que necesitan de forma habitual o puntual el acceso con teclado o con otro tpo de interruptores.
Errores de accesibilidad en app móvil: No gira la pantalla de la app
A continuación, te muestro varios ejemplos en el siguiente vídeo, en el que se puede observar varias apps que no cumplen con la norma WCGA 1.3.4 de Orientación. ¿Qué nos dice esta norma? Que las aplicaciones se deben poder visualizar y operar en cualquier orientación del dispositivo. En otras palabras, que si situamos un móvil o tablet en posición horizontal (o viceversa), el contenido de la app se debe ajustar a esa posición y debe permitir ser usado con normalidad. Esta norma está marcada como esencial por la WCGA, ya que hay usuarios que pueden tener el dispositivo en una posición fija, y que no disponen de movilidad.
Navegación con Talkback: ¿Buena o deficiente?
En función de la aplicación en la que nos encontremos, los usuarios de talkback tendrán más o menos facilidad para acceder al contenido. En el primer ejemplo, navegación por Linkedin, podemos observar que está bastante bien. Es muy intuitiva la navegación con lector de pantalla, yo le daría un 9. A destacar que:
- Al acceder al contenido del feed informa correctamente de la información relevante de un post en concreto: nombre del perfil, seguidores, cuando fue publicado, texto, número de reacciones, número de compartidos y e indicaciones de cómo acceder a ñas acciones.
- Informa de cuando actualiza el feed, y se añaden elementos.
- En funcionamiento del buscador es muy claro. Informa de los resultados mostrados, del número de ellos.
- Al acceder a la vista preliminar de un contacto, se puede acceder a todos los elementos interaccionadles.
A mejorar:
- En las acciones disponibles de un post: informa de la lista, pero no indica en qué número de la lista estamos dentro de ella.
- Algo similar pasa en el resultado de la búsqueda: inicialmente indica que es una lista, pero luego no indica en qué elemento dentro del orden estamos.
En segundo lugar, vamos a revisar la implementación de accesibilidad en la app de facebook. Tras hacer testing de accesibilidad tengo las siguientes conclusiones:
En primer lugar, veamos los errores de accesibilidad en app móvi:
- La navegación por el listado de historias no hay forma de saltarla. Tenemos un listado de unas 80 historias. Tendría que ver alguna implementación que nos permita saltar el listado.
- Al seleccionar en un espacio entre una publicación y otra te indica la opción de hacer opciones. Esto es un poco confuso.
- En los reels, al acceder a cada uno de los elementos, no especifica lo que es (cierto es que al ser un vídeo es muy posible que no lo puedan «disfrutar»), pero al menos tendría que tener una descripción de lo que es.
A continuación, cabe destacar, la correcta implementación en los siguientes puntos. Por lo poco que he podido ver, yo le daría un notable:
- La navegación por los elementos de la cabecera es bastante intuitiva, indica el nombre-función de los botones y posteriormente el de la lista de pestañas.
- La lectura de la publicación es muy completa, indicando toda la información relevante. Tanto en publicación estándar, como en interacciones.
- Te informa del elemento en el que estamos dentro del actual feed. También de los que se muestran actualmente dentro de la pantalla. Ejemplo: Mostrando de 7 a 9 elementos de 16.
- En el acceso a una publicación también lee muy bien de la estructura y los elementos interaccionables de la misma.
¿Qué normas incumplimos con estos errores? Varias: La de los 2.1.1 Mecanismos de entrada, 2.1.1 Sin trampa de foco, 2.4.3 Orden de foco, y en algunos casos 1.3.2 Secuencia significativa, porque en ocasiones no tiene sentido el orden de lectura del código.
Contenido que se pierde o genera confusión en el aumento del tamaño de fuente
A continuación, te muestro una serie de ejemplos de apps Android, donde al aumentar el tamaño de fuente y el zoom al máximo no permite ver el contenido de forma correcta. ¿Quién está afectado por ello? Las personas con poca visibilidad. Estos errores incumple la norma 1.4.4 cambio de tamaño de texto o la de 1.4.10 Reflow. A continuación, cuento más en detalle los puntos:
:En primer luigar, en este listado de productos de una tienda online se observa como se oculta el texto de «Filtrar y clasificar. Por otro lado, se monta el texto de Modelo y de artículos de forma que no se puede entender. Después de eso, el detalle de los puntos suspensivos en el nombre del producto no sería un KO, ya que algo de información muestra, aunque lo ideal es que ocupara al menos 2 líneas.
A continuación, en este detalle de productos, se pierde información también la palabra «Ahorro», que parcialmente oculta. De esta forma no tenemos contexto de lo que nos quiere expresar. Nos puede surgir la duda de si dice «ahora» o «ahorro».
En esta otra aplicación podemos observar los siguientes errores de accesibilidad en app móvil: hay textos superpuestos, textos ocultos parcialmente: «Oferta….?», «Válido en todas las ?» Y el menú inferior no se puede entender.
En este apartado de la misma app, se oculta el porcentaje de descuentos en los productos y los botones superiores también quedan ocultos de forma parcial. Los textos se deberían adaptar de forma responsive.
En esta cesta de productos, se oculta la etiqueta que muestra «El nº 1 más…» por la parte inferior, aunque permite un desplazamiento lateral para ver el contenido de la derecha.
En último lugar, tenemos esta app donde podemos observar que no se ve completo el intervalo de fechas de la búsqueda y además los textos del menú principal (o accesos directos) queda también parcialmente oculto. Una persona mayor, sin mucha experiencia podría despistarse.
Conclusión: Debemos trabajar juntos para reducir errores de accesibilidad en app móvil
Es importante que los gestores, diseñadores, UX, desarrolladores, QA/QC se impliquen en un desarrollo accesible para que la tecnología pueda ser accesible para todos. Por ello, es fundamental comenzar desde las primeras acciones en un proyecto a tener en cuenta los errores de accesibilidad en app móvil más frecuentes, para acatarlos desde un principio. ¿Te apuntas?
Si te ha gustado este post, déjame un comentario o suscríbete al blog y estarás al tanto de todas las novedades.
Quizás te puede interesar
