spinner

Apps para todos: cómo los lectores de pantalla hacen tu aplicación más accesible

Imaginemos el siguiente escenario: estamos desarrollando una página web supermoderna, con sus elementos de formulario customizados y “superhipsters”, sus apartados bien definidos y los títulos de cada uno bien bonitos. Estamos motivadísimos porque la web tiene animaciones superchulas, con su menú lateral, lo que le da una apariencia de app pero, ¿has pensado en hacerla accesible para todos los usuarios? ¿has pensado que no todas las personas ven la información tal como la representas en esa app? Si lo primero que has pensado es: “Sí claro, he pasado un validador tipo aXe y no me ha presentado ‘no conformidades’” es que no lo has probado con ningún lector de pantalla.

Un validador te puede avisar de que no cumples con el contraste, o que en algún punto tu página no es semánticamente correcta (por ejemplo, meter un botón dentro de un botón) y cosas por el estilo, pero no te da una visión de cómo un usuario puede interactuar con estos lectores.

Lectores de pantalla

Los usuarios con discapacidad visual necesitan un asistente que les diga qué hace y qué contiene cada elemento de tu página web, por lo que se ayudan de un lector de pantalla para poder usar sus dispositivos. Los lectores de pantalla son aplicaciones que ayudan a estos usuarios a usar un ordenador o un dispositivo móvil.

Estos lectores permiten la navegación por la pantalla sin necesidad de saber en qué posición está el elemento, haciendo que el foco vaya saltando de un elemento a otro mediante tabs o gestos sobre la pantalla, describiendo en todo momento qué contiene el elemento donde está situado el foco o qué tipo de elemento es.

Estos lectores permiten a los usuarios navegar por encabezados, párrafos, botones, etc. Por lo que para que nuestras aplicaciones sean accesibles es importante conocer cómo funcionan y cómo un usuario invidente usaría nuestra aplicación. Una buena estructura de encabezados hace que el usuario navegue de manera más cómoda, saltando de uno a otro para acceder rápidamente al contenido de la misma.

Los más conocidos son JAWS y NVDA para entornos Windows, VoiceOver para MacOS y iOS y Talkback para Android. No vamos a entrar en detalle de cómo funciona cada uno pero vamos a ver el funcionamiento más básico en dispositivos móviles.

Funcionamiento básico de los lectores en móviles

Al activar el lector se situaría en un elemento de la pantalla y los gestos nativos como hacer tap, doble tap o deslizamientos, por ejemplo, tienen un comportamiento distinto. Ante esta situación no te vuelvas loco y ten paciencia: seguro que le pillas el truco enseguida.

Para navegar por los elementos de la pantalla habría que deslizar con el dedo de izquierda a derecha, si lo que queremos es pasar al siguiente elemento, y deslizar hacia el otro lado si queremos volver al elemento anterior. Por otro lado, si lo que pretendemos es pulsar el botón o enlace haremos un doble tap. Todos estos gestos se interpretan en cualquier lado de la pantalla.

En algunas ocasiones, si el usuario está familiarizado con la aplicación, podría tocar en alguna posición de la pantalla y el foco de accesibilidad pasaría a esa posición, diciendo qué contiene.

Un diseño limpio y simple es el mejor comienzo

Todo debería partir de un diseño simple y accesible. Si la web o los componentes aportan mucha información, puede que visualmente quede molona y sea superpotente, pero para los usuarios que usan el lector de pantalla puede ser muy tedioso y aburrido contar con descripciones largas, obvias y evidentes, así como que los elementos tengan muchos datos.

Vale, mi app no está preparada para los lectores de pantalla

Preparar la app para que estas herramientas la lean de forma adecuada es todo un arte, sobre todo cuando tenemos elementos interactivos como menús laterales, alertas y, en general, elementos que aparecen dinámicamente por la web conforme el usuario interactúa con ella.

Hay que pensar en que un botón que contiene únicamente un icono no va a decir nada al usuario (al igual que sucede con una imagen sin texto alternativo), por lo que debes pensar en qué debe cantar el lector cuando se sitúe en ese elemento. Por ejemplo, “Menú principal de la aplicación” podría ser una opción para el típico botón de menú con el icono de la “hamburguesa”. Al final es simplemente aplicar el sentido común y no hay mejor feedback que el que te va a dar una persona invidente para ver si estás en la dirección adecuada.

Cómo WAI-ARIA te puede salvar la situación

Wait! tengo un elemento que debe ser un botón, pero no es un botón… Keep calm and WAI-ARIA!

Para nada esto es un tutorial de WAI-ARIA, pero paso muy por encima para comentar que en este tipo de casos te puede salvar el pellejo. WAI te va a apoyar para que tu web sea accesible pero , ¡ojo, la mejor manera de usar WAI-ARIA es no usándolo! Si un elemento es un botón, haz un botón, y no lo “truques” con WAI para que sea un botón.

En BBVA Next Technologies estamos cada vez más comprometido con la accesibilidad de nuestras aplicaciones, ya que nos parece clave que todos los usuarios puedan usarlas fácilmente.

Hacer las aplicaciones accesibles no es algo trivial, pero debe ser el compromiso de todos. En siguientes artículos pondremos en práctica algunos fundamentos de accesibilidad y veremos cómo aplicarlos.

Imagen: pexels.com

Las opiniones vertidas por el autor son enteramente suyas y no siempre representan la opinión de BBVA Next Technologies.

¿Quieres saber que más cosas hacemos en BBVA Next Technologies?

Utilizamos cookies propias y de terceros para mejorar nuestros servicios, brindarle una grata experiencia y mostrar a los usuarios publicidad relacionada con sus preferencias mediante el análisis de sus hábitos de navegación. Si continúa navegando por este sitio web, consideramos que acepta su uso. Puede cambiar la configuración u obtener más información accediendo a nuestra política de cookies aquí.