Análisis de accesibilidad: WhatsApp Web

WhatsApp se ha convertido en una de las aplicaciones de mensajería más usadas en todo el mundo para comunicarnos.
Además de ser una de las más usadas, tanto en Android como en IOS hay una buena accesibilidad con los lectores de pantalla, aunque no podemos saber, las personas ciegas, qué hay en los Stikers, pero lo demás se puede usar muy bien.
Sin embargo, en WhatsApp Web, la versión para escritorio, hay problemas de accesibilidad. Sí, se puede usar, pero podría mejorar, y los problemas de accesibilidad se llevan desde hace años, y todavía no se han corregido. De hecho, uno de ellos es el que algunos botones estén sin etiquetar. Sí, muy fácil ponerles su nombre en inglés y luego en los otros idiomas, pero no lo han hecho.
Aquí le aremos un análisis de accesibilidad a WhatsApp Web con lectores de pantalla. ¡Empecemos!

EL COMIENZO: ESCANEAR EL CÓDIGO QR

Ya todos sabemos que la primera vez que vinculamos WhatsApp Web, o después de cerrar sesión y querer volver, debemos escanear un código QR. Bueno, dirás que es fácil. Sí, para todos es fácil ver el código y enfocar la cámara del teléfono hasta donde se ve el código en nuestra pantalla.

¿Pero qué sucede con las personas ciegas? Que no todas las personas ciegas podemos escanearlo a la primera. Bien porque no tenemos práctica para enfocar con la cámara, o bien porque podemos enfocar pero tenemos que buscar y buscar hasta dar con el código. En algunos casos se logra, sí, pero en otros es más fácil pedir ayuda.

Aquí el primer fallo: El método de autentificación, aunque es fácil y rápido, es puramente visual. Si el método fuera poner el número de teléfono, recibir un código por SMS y confirmarse con él, o algo similar, sería más fácil para nosotros.

LA INTERFAZ

eLa interfaz es exactamente la misma si usamos WhatsApp Web desde el navegador o descargando el ejecutable que pone WhatsApp entre las aplicaciones de nuestro sistema operativo. La única diferencia es que el WhatsApp Web que se instala permite navegar por los chats usando control+TAB (tecla tabulador) ya que en el navegador estos atajos ya se usan para moverse por las pestañas.

Ahora bien: Al principio de la página, los botones menú, estado y nuevo chat sí están etiquetados, y luego tenemos un cuadro de edición llamado buscar y empezar un nuevo chat, en el que podemos escribir el nombre del grupo o del contacto. Si lo escribimos tal como se escribe y el primero coincide, con pulsar enter el teclado estará listo para escribir el mensaje. Así mismo, el botón menú abre el menú donde están los ajustes y los elementos que ya conocemos. Esa parte sí es accesible.

Bien, los estados se pueden ver fácilmente, aunque al pulsar el botón estados los diferentes contactos aparecen como elementos cliqueables. Si bien los lectores de pantalla permiten activar los elementos cliqueables con el teclado, si fuera una tabla o una lista sería más cómodo. Al pulsar espacio o enter en el estado ya podemos, en nuestro caso, leer el texto, saber si hay una foto o reproducir el video.

LOS CHATS

En los chats nos vamos a centrar más, ya que aquí es donde hay más botones sin etiquetar y cierta dificultad al leer muchos mensajes.

El cuadro de edición es el único que hay. Cerca del cuadro está la etiqueta que sí se lee, escribe un mensaje aquí.

Los mensajes del chat aparecen con el respectivo texto que tengan y un botón con el nombre del contacto, o, si no lo tenemos registrado en el teléfono, el número en cuestión. Los mensajes de voz aparecen con un botón sin etiquetar, que debería decir reproducir. Al menos sabemos que es un mensaje de voz porque hay un texto justo después que indica la duración del audio. Y claro, el botón sin etiquetar también está en los videos y las fotos. En los adjuntos podemos saber que el elemento que descarga un archivo es un enlace, por suerte.

Para las acciones tales como información sobre el mensaje o el reenvío, después de cada mensaje hay un elemento sin nombre, donde el lector NVDA en Windows solo dice en blanco. Al pulsar enter en ese “en blanco” aparecen las opciones, pero claro, si no pulsas enter allí, no te enteras.

Al terminar los mensajes, tenemos otros botones sin etiquetar. Como en WhatsApp en Android e IOS sí están etiquetados tenemos una idea de lo que hacen, pero en WhatsApp Web no están etiquetados. Eso sí, el botón abrir panel de emojis sí está etiquetado, y suviendo con flecha arriba hasta el primer mensaje que aparezca ará visible el botón adjuntar, también etiquetado. Sí, los botones adjuntar y abrir panel de emojis están etiquetados, ¡pero faltaron los otros!

Después del cuadro de edición para escribir tenemos otro botón sin etiquetar. Es el botón que debería etiquetarse como gravar mensaje de voz. Al pulsarlo, si es la primera vez en el navegador la página pedirá permiso para usar el micrófono, y luego estaremos gravando con el micrófono configurado en Windows o la configuración del navegador. Mientras gravamos, estará un texto que indicará la duración del audio hasta el momento, y luego otros dos botones sin etiquetar. Sabemos, eso sí, que el último botón es el que termina y envía el mensaje.

 He aquí la importancia de etiquetar los objetos. Se puede observar claramente que en WhatsApp Web con un lector de pantalla, mientras estemos en un chat, encontraremos puro botón, botón, botón, botón y más botón. Además, los mensajes aparecen en puro texto y botones sin usar una tabla, lista o árbol que los ponga dentro. Esto significa que no podemos usar las teclas de navegación rápida del lector de pantalla para navegar directamente a alguna parte. El único recurso que tenemos para buscar algo en específico, y solo en los mensajes, es la opción buscar texto del navegador o lector de pantalla, que suele ser control+f o Control+tecla para comandos del lector de pantalla +f (por su puesto, puede ser diferente comando en Voice Over en Mac OS). Además, si el foco del teclado se va al cuadro de edición para escribir de golpe mientras estábamos leyendo, algo que puede pasar en WhatsApp Web con lector de pantalla activo, perdemos el hilo. Y claro, a buscar de nuevo, sumándose a que ese puro texto con botones es algo dinámico y se va desplazando. Cómodo para el mouse (ratón) y el scroll, pero es que al usar el teclado usamos flecha abajo para desplazarnos y eso siendo dinámico puede incomodarnos cuando hay muchos mensajes.

CONCLUSIÓN

Aquí termina el análisis de WhatsApp Web y su accesibilidad. Como puedes ver, el principal problema son los botones sin etiquetar.

Un simple cambio en el código, que se trata solo de ponerle nombre a los botones, hace la diferencia. Pero en el caso de WhatsApp Web, también sería útil reemplazar los elementos cliqueables por botones, y agrupar los mensajes en una lista, tabla o árbol. También se podría poner cada mensaje en un punto de referencia (véase Twitter.com, cada tuit está con un punto de referencia artículo). Si se observan por dentro aplicaciones web como Gmail, Hangouts, Skype y otras, se pueden ver las mejoras que allí están para los lectores de pantalla, y que en WhatsApp Web podrían servir.

De hecho, hay países en los que se establece que ciertos servicios y más deben cumplir con las pautas de accesibilidad. No hemos hablado de eso por aquí aún, pero puedes ver en el siguiente enlace del blog de Olga Carreras las legislaciones que hay al respecto y más artículos y libros sobre normas de accesibilidad y contenido que profundiza en esos temas. Eso sí, en algunos países donde hay estas legislaciones hay servicios que no las cumplen como tiene que ser.

En Octubre del 2019, se realizó en otro blog, accesibilidad y tecnología, una guía completa sobre WhatsApp Web con los lectores de pantalla JAWS y NVDA en Windows. Haz clic en el siguiente enlace para ir a la guía de WhatsApp Web con lectores de pantalla.

Y para terminar, una nota importante: Si alguien está pensando en reportar los errores de accesibilidad expuestos aquí al soporte de WhatsApp, ya voy diciendo que no es buena idea. Para el soporte de WhatsApp usan un bot que responde automáticamente los mensajes, y no sabe nada sobre accesibilidad, así que responderá hablando de cualquier otra cosa o van a entrar con lo típico de constantemente realizamos mejoras a WhatsApp y WhatsApp Web, con los enlaces al blog y al centro de ayuda.

Y si por otro lado alguien piensa hacer un script que mejore la accesibilidad de WhatsApp Web usando extensiones como GreaseMonkey y similares en los navegadores, que sepa que deberá estar al pendiente de los cambios que se hagan. En 2016 salió a la luz F123 Access, una extensión que permitía crear scripts para mejorar la accesibilidad de páginas web, pero desde el año pasado ya no se mantiene y se recomendó quitarla.

Saludos.

Publicado por Carlos Esteban Martínez Macías

Soy Carlos Esteban Martínez Macías, una persona ciega. Actualmente tengo 16 años, soy pianista y me interesan mucho los temas sobre tecnología y accesibilidad.

3 comentarios sobre “Análisis de accesibilidad: WhatsApp Web

  1. Actualizaciones:
    1. El botón abrir panel de emojis está etiquetado.
    2. En WhatsApp Web desde cualquier navegador o el programa para escritorio, al navegar con el modo formularios, examen o modo foco de los lectores de pantalla, un modo que pasa las teclas directamente a la aplicación, ya no lee los nombres de los chats con flecha abajo, cosa que antes sucedía. Ahora, para que se devuelva ese comportamiento, hay una solución solo para usuarios que tengan Windows 10: Irse a la Microsoft Store, que se encuentra entre todas las aplicaciones, buscar WhatsApp e instalar WhatsApp Desktop. Nota, se requiere cuenta Microsoft para esto (si tienes un correo que termina en hotmail u outlook ya la tienes).

    Me gusta

  2. Varias cosas: WhatsApp Web ha mejorado su accesibilidad en ciertas partes. Es recomendable usar el modo foco de los lectores de pantalla para ver cómo podemos reproducir un audio directamente con la barra espaciadora, o pulsar flecha derecha para responder, reenviar, etc. Así que ará falta hacerle una actualización a este análisis. Pronto habrán novedades para el blog en general. Disculpas por no publicar entradas desde hace varios meses.

    Me gusta

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Salir /  Cambiar )

Google photo

Estás comentando usando tu cuenta de Google. Salir /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Salir /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Salir /  Cambiar )

Conectando a %s

Crea tu sitio web con WordPress.com
Empieza ahora
A %d blogueros les gusta esto: