JavaScript desempeña un papel importante en casi todo lo que creamos, desde componentes dinámicos más pequeños hasta productos completos que se ejecutan en un framework de JavaScript, como React o Angular.
El uso (o el uso excesivo) de JavaScript dio lugar a muchas tendencias alarmantes, como los tiempos de carga prolongados debido a grandes cantidades de código, el uso de elementos HTML no semánticos y la inserción de HTML y CSS a través de JavaScript. Además, es posible que no estés seguro de cómo encaja la accesibilidad en cada una de estas partes.
JavaScript puede tener un gran impacto en la accesibilidad de tu sitio. En este módulo, compartiremos algunos patrones generales de accesibilidad mejorados por JavaScript, así como soluciones para los problemas de accesibilidad que surgen por el uso de frameworks de JavaScript.
Eventos de activación
Los eventos de JavaScript permiten a los usuarios interactuar con el contenido web y realizar una acción específica. Muchas personas, como los usuarios de lectores de pantalla, las personas con discapacidades motrices finas, las personas sin mouse ni panel táctil, y otras, dependen de la compatibilidad del teclado para interactuar con la Web. Es fundamental que agregues compatibilidad con el teclado a las acciones de JavaScript, ya que esto afecta a todos estos usuarios.
Veamos un evento de clic.
Si se usa un evento onClick() en un elemento HTML semántico, como <button> o <a>, naturalmente se incluye la funcionalidad del mouse y el teclado. Sin embargo, la funcionalidad del teclado no se aplica automáticamente cuando se agrega un evento onClick() a un elemento no semántico, como un <div> genérico.
<div role="button" tabindex="0" onclick="doAction()">Click me!</div>
<button onclick="doAction()">Click me!</button>
Obtén una vista previa de esta comparación en CodePen.
Si se usa un elemento no semántico para un evento activador, se debe agregar un evento keydown/keyup a fin de detectar la pulsación de la tecla Intro o la tecla espaciadora. A menudo, se olvida agregar eventos de activación a elementos no semánticos. Lamentablemente, cuando se olvida, el resultado es un componente al que solo se puede acceder con el mouse. Los usuarios de solo teclado se quedan sin acceso a las acciones asociadas.
Títulos de página
Como aprendimos en el módulo de Documentos, el título de la página es esencial para los usuarios de lectores de pantalla. Les dice a los usuarios en qué página se encuentran y si navegaron a una página nueva.
Si usas un framework de JavaScript, debes considerar cómo manejas los títulos de las páginas. Esto es muy importante para las apps de una sola página (SPA) que se cargan desde un solo archivo index.html, ya que las transiciones o rutas (cambios de página) no implicarán volver a cargar la página. Cada vez que un usuario carga una página nueva en una SPA, el título no cambia de forma predeterminada.
En el caso de las SPA, el valor document.title se puede agregar de forma manual o con un paquete auxiliar (según el framework de JavaScript). Anunciar los títulos de página actualizados a un usuario de lector de pantalla puede requerir trabajo adicional, pero la buena noticia es que tienes opciones, como contenido dinámico.
Contenido dinámico
Una de las funciones más potentes de JavaScript es la capacidad de agregar HTML y CSS a cualquier elemento de la página. Los desarrolladores pueden crear aplicaciones dinámicas basadas en las acciones o los comportamientos de los usuarios.
Supongamos que necesitas enviar un mensaje a los usuarios cuando acceden a tu sitio web o app. Quieres que el mensaje se destaque del fondo blanco y transmita el siguiente mensaje: “Ya accediste a tu cuenta”.
Puedes usar el elemento innerHTML para configurar el contenido:
document.querySelector("#banner").innerHTML = '<p>You are now logged in</p>';
Puedes aplicar CSS de manera similar, con setAttribute:
document.querySelector("#banner").setAttribute("style", "border-color:#0000ff;");
Un gran poder conlleva una gran responsabilidad. Lamentablemente, la inserción de JavaScript y HTML y CSS siempre se usaba de forma inadecuada para crear contenido inaccesible. A continuación, se indican algunos usos inadecuados comunes:
| Posible uso inadecuado | Uso correcto |
|---|---|
| Cómo procesar grandes fragmentos de código HTML no semántico | Renderiza partes más pequeñas de HTML semántico |
| No dar tiempo para que la tecnología de accesibilidad reconozca el contenido dinámico | Usar un retraso de setTimeout() para permitir que los usuarios escuchen el mensaje completo |
Cómo aplicar atributos de estilo para onFocus() de forma dinámica |
Utiliza :focus para los elementos relacionados en tu hoja de estilo CSS. |
| La aplicación de estilos intercalados puede causar que las hojas de estilo del usuario no se lean correctamente | Guarda tus estilos en archivos CSS para mantener la coherencia del tema. |
| Crear archivos JavaScript muy grandes que lentifiquen el rendimiento general del sitio | Usa menos JavaScript. Es posible que puedas realizar funciones similares en CSS (como animaciones o navegación fija), que realizan análisis más rápido y tienen un mejor rendimiento. |
En el caso de CSS, activa o desactiva las clases de CSS en lugar de agregar estilos intercalados, ya que esto permite la reutilización y la simplicidad. Usa contenido oculto en la página y activa o desactiva las clases para ocultar y mostrar contenido de HTML dinámico. Si necesitas usar JavaScript para agregar contenido a tu página de forma dinámica, asegúrate de que sea simple, conciso y, por supuesto, accesible.
Administración de focos
En el módulo de enfoque del teclado, abordamos el orden del enfoque y los estilos de los indicadores. La gestión del foco consiste en saber cuándo y dónde trabar el enfoque y cuándo no debe estar atrapado.
La administración del enfoque es fundamental para los usuarios que solo usan teclados.
Nivel de los componentes
Puedes crear trampas de teclado cuando el enfoque de un componente no se administra correctamente. Una trampa de teclado ocurre cuando un usuario que solo usa el teclado se atasca en un componente o no se mantiene el enfoque cuando debería estarlo.
Uno de los patrones más comunes en los que los usuarios experimentan problemas de administración del enfoque se encuentra en un componente modal. Cuando un usuario que solo usa el teclado encuentra una ventana modal, el usuario debería poder usar tabulación entre los elementos accionables de la modal, pero nunca se deberían permitir fuera de ella sin descartarla de forma explícita. JavaScript es esencial para capturar correctamente este enfoque.
Nivel de página
El enfoque también debe mantenerse cuando un usuario navega de una página a otra. Esto es especialmente cierto en las SPA, donde no se actualiza el navegador y todo el contenido cambia de forma dinámica. Cada vez que un usuario hace clic en un vínculo para ir a otra página de tu aplicación, el enfoque se mantiene en el mismo lugar o posiblemente en otro.
Durante la transición entre páginas (o enrutamiento), el equipo de desarrollo debe decidir dónde se colocará el enfoque cuando se cargue la página.
Existen varias técnicas para lograrlo:
- Enfócate en el contenedor principal con un anuncio de
aria-live. - Vuelve a enfocar un vínculo para ir al contenido principal.
- Mueve el enfoque al encabezado de nivel superior de la página nueva.
El enfoque que elijas dependerá del framework que uses y del contenido que quieras entregar a los usuarios. Puede depender del contexto o de la acción.
Administración de estado
Otra área en la que JavaScript es fundamental para la accesibilidad es la administración del estado o cuando el estado visual actual de un componente o una página se retransmite a un usuario de tecnología de accesibilidad, ciego o con visión reducida.
A menudo, el estado de un componente o una página se administra mediante los atributos ARIA, como se introdujo en el módulo ARIA y HTML. Repasemos algunos de los tipos más comunes de atributos ARIA que se usan para ayudar a administrar el estado de un elemento.
Nivel de los componentes
Según el contenido de tu página y la información que necesiten los usuarios, hay muchos estados de ARIA que debes tener en cuenta cuando se retransmite información sobre un componente al usuario.
Por ejemplo, puedes usar un atributo aria-expanded para indicarle al usuario si un menú desplegable o una lista está expandido o contraído.
También puedes usar aria-pressed para indicar que se presionó un botón.
Es importante ser selectivo cuando se aplican atributos ARIA. Piensa en el flujo de usuarios para comprender qué información fundamental se debe transmitir al usuario.
Nivel de página
Los desarrolladores suelen usar un área visualmente oculta llamada región en vivo ARIA para anunciar cambios en la pantalla y mensajes de alerta a los usuarios de tecnología de accesibilidad (AT). Esta área se puede vincular con JavaScript para notificar a los usuarios sobre cambios dinámicos en la página sin necesidad de que se vuelva a cargar toda la página.
Históricamente, JavaScript tiene problemas para anunciar contenido en aria-live y alertar regiones debido a su naturaleza dinámica. Agregar contenido al DOM de forma asíncrona dificulta que AT recoja la región y la anuncie.
Para que el contenido se lea correctamente, la región activa o de alerta debe estar en el DOM durante la carga; luego, el texto se puede intercambiar de forma dinámica.
Si usas un framework de JavaScript, la buena noticia es que casi todos tienen un paquete de "anuncio en vivo" que hace todo el trabajo por ti y es totalmente accesible. No es necesario preocuparse de crear una región live y resolver los problemas descritos en la sección anterior.
Estos son algunos paquetes activos para frameworks comunes de JavaScript:
- React: react-aria-live y react-a11y-announcer
- Angular:
LiveAnnouncer - Vue: vue-a11y-utils
JavaScript moderno es un lenguaje potente que permite a los desarrolladores web crear aplicaciones web sólidas. Esto a veces lleva a un exceso de ingeniería y, por extensión, a patrones inaccesibles. Si sigues los patrones y las sugerencias de JavaScript en este módulo, puedes hacer que tus apps sean más accesibles para todos los usuarios.
Verifica tus conocimientos
Pon a prueba tus conocimientos sobre JavaScript
¿Cuál es la mejor forma de cambiar el estilo de un elemento con JavaScript?
¿Todas las acciones de JavaScript admiten usuarios de teclado?