Errores de accesibilidad que deben evitarse al desarrollar una SPA

29 agosto, 2024

Experiencia de Usuario para empresas, Noticias MTP

Explicamos en este post qué es una SPA (Single Page Application) y las ventajas que tiene, pero también advertimos de algunos problemas que para la accesibilidad pueden surgir en su desarrollo.

[contact-form-7 id="22307" title="Formulario Blog"]

Tabla de contenidos

Resumen

Explicamos en este post algunos errores que pueden cometerse al desarrollar una SPA en materia de accesibilidad digital.

Una SPA (Single Page Application) es un tipo de aplicación web que se caracteriza por cargar una sola página HTML inicial y luego actualizar su contenido de manera dinámica sin necesidad de cargar páginas adicionales desde el servidor, como sucede en las MPA (Multi Page Application).

En lugar de realizar una solicitud completa al servidor cada vez que el usuario navega a una nueva sección o realiza una acción, una SPA utiliza tecnologías como JavaScript para cargar y mostrar nuevos datos de manera fluida y rápida en la misma página, proporcionando una experiencia de usuario más ágil y similar a la de una aplicación de escritorio. Debido a esto, este tipo de páginas webs ofrecen varias ventajas, tanto en el desarrollo como en experiencia de usuario.

Desgraciadamente, también hay algún inconveniente; es muy fácil cometer errores al desarrollar una SPA y generar barreras de accesibilidad que afectan a los usuarios que utilizan un lector de pantallas.

Las barreras más comunes de este tipo de sitios son la falta de cambio de títulos, la falta de información al actualizar contenidos y la falta de control del foco de teclado. Las desglosaremos a continuación.

Falta de cambio de títulos

En un sitio web tradicional de múltiples páginas (MPA), cada página que se visualiza tiene su propio título, el cual se encuentra especificado en la etiqueta <title> dentro del <head>. Por otro lado, como ya hemos visto, en una Aplicación de Página Única (SPA), solo existe una página inicial que cambia su contenido de forma dinámica sin cargar nuevas páginas desde el servidor.
Por esta razón, es esencial que el título de la página se actualice automáticamente para reflejar el contenido actual en la etiqueta <title> del <head>. De lo contrario, los usuarios que hagan uso de lectores de pantallas pueden tener problemas para saber donde se encuentran con exactitud.

Falta de información al actualizar contenidos

Cuando se realiza una acción que modifica el contenido en una MPA, los lectores de pantalla tienen la capacidad de notificar al usuario que se ha cargado nuevo contenido, ya que generalmente esto implica un cambio en la URL y el navegador puede informar sobre el inicio y la finalización del proceso de carga.

Sin embargo, en el caso de una SPA, como hemos discutido previamente, no se produce una carga de una nueva URL. Por lo tanto, la respuesta que experimenta el usuario que utiliza tecnologías de asistencia es un completo silencio, lo que puede generar la impresión errónea de que no ha ocurrido ningún cambio y que la página web no funciona correctamente. El usuario de lector de pantalla debe explorar la web de forma activa para detectar los cambios que se han realizado.

Este problema puede solucionarse incluyendo mensajes de estado y marcándolos correctamente con los atributos aria correspondientes. Por ejemplo, podría utilizarse un <div aria-live=”polite” id=”estadocarga”></div> en el cuál insertemos los mensajes o animaciones de carga. De esta forma, cuando el contenido de este <div> cambie los lectores de pantallas leerán dichos cambios.
No basta con anunciar que el contenido ha cambiado. Debe anunciarse también que el contenido se está modificando. Por ejemplo:

– El usuario pulsa un botón de enviar.

– El formulario comienza a realizar con los datos las acciones requeridas.

– El contenido del div con id “estadocarga” cambia a <p>Enviando datos.</p>

– La página se actualiza.

– El contenido del div con id “estadocarga” cambia a <p>El contenido se ha actualizado</p> o un mensaje similar que indique el fin del proceso de carga.

Falta de control del foco de teclado

Cuando se actualiza el contenido de una SPA es probable que el foco de teclado quede perdido por la web. Esto puede ser debido a varios factores, como la desaparición del elemento en el que se ha pulsado para realizar una acción. El cambio del foco del teclado debería adaptarse al tipo de cambio de contenido.
Si el usuario pulsa en una opción del menú de la SPA, el foco deberá moverse al primer enlace de la etiqueta <body>, que debería ser el salto al contenido. De esta forma, el usuario de teclado no se perderá por la web y podrá navegar eficientemente.

Si el usuario pulsa un elemento de interacción que cambia parte del contenido, el foco debería permanecer en el elemento que ha disparado esta acción, al menos que el elemento disparador desaparezca, en cuyo caso debería moverse, como en el caso anterior, al enlace de salto al contenido.

Teniendo en cuenta estas tres barreras principales, podremos mejorar bastante la accesibilidad de las SPA. Por supuesto, no podemos olvidarnos de los criterios de las WCAG, pues las páginas que conforman una SPA deben cumplirlos igualmente si queremos que nuestro sitio web sea accesible para los distintos perfiles de usuario que navegan por la red.

MTP, con sus especialistas en accesibilidad de web y apps, puede ayudar a solucionar estos posibles problemas en los desarrollos. MTP también cuenta con un servicio de certificación de accesibilidad, DInclusive, con el que se detecta y acredita el diferente nivel de accesibilidad que puede tener un servicio digital.