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.
Este uso (o uso excesivo) de JavaScript ha generado muchas tendencias alarmantes, como tiempos de carga largos 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. Y es posible que no tengas seguridad sobre cómo la accesibilidad se ajusta a 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 que mejora JavaScript, así como soluciones para los problemas de accesibilidad que surgen del uso de frameworks de JavaScript.
Activa eventos
Los eventos de JavaScript permiten que los usuarios interactúen con el contenido web y realicen una acción específica. Muchas personas, como los usuarios de lectores de pantalla, las personas con discapacidades de motricidad fina, las personas sin mouse o panel táctil, entre otras, dependen de la compatibilidad con el teclado para interactuar con la Web. Es fundamental que agregues compatibilidad con el teclado a tus acciones de JavaScript, ya que 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>, incluye de forma natural 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 para detectar la tecla Intro o Espacio. A menudo, se olvida agregar eventos activadores a los elementos no semánticos. Lamentablemente, cuando se olvida, el resultado es un componente al que solo se puede acceder con el mouse. Los usuarios que solo usan el teclado no tienen 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 indica 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 controlas los títulos de página. Esto es especialmente importante para las aplicaciones 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 implican volver a cargar la página. Cada vez que un usuario carga una página nueva en un SPA, el título no cambiará de forma predeterminada.
En el caso de las SPA, el valor document.title se puede agregar de forma manual o con un paquete de ayuda (según el framework de JavaScript). Anunciar los títulos de las páginas actualizados a un usuario de lector de pantalla puede requerir trabajo adicional, pero la buena noticia es que tienes opciones, como el 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 según 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 mensaje: "Ya accediste".
Puedes usar el elemento innerHTML para establecer el contenido:
document.querySelector("#banner").innerHTML = '<p>You are now signed in</p>';
Puedes aplicar CSS de una 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 en HTML y CSS se ha usado de forma inadecuada para crear contenido inaccesible. Estos son algunos de los usos inadecuados más comunes:
| Posible uso inadecuado | Uso correcto |
|---|---|
| Renderiza grandes fragmentos de HTML no semántico | Renderiza fragmentos más pequeños de HTML semántico |
| No permitir tiempo para que la tecnología de accesibilidad reconozca el contenido dinámico | Usar una demora de tiempo setTimeout() para permitir que los usuarios escuchen el mensaje completo |
Cómo aplicar atributos de estilo para onFocus() de forma dinámica |
Usa :focus para los elementos relacionados en tu hoja de estilo CSS. |
| Aplicar estilos intercalados puede provocar que los usuarios no lean correctamente las hojas de estilo. | Mantén tus estilos en archivos CSS para mantener la coherencia del tema. |
| Creación de archivos JavaScript muy grandes que ralentizan el rendimiento general del sitio | Usa menos JavaScript. Es posible que puedas realizar funciones similares en CSS (como animaciones o navegación fija), que se analizan más rápido y tienen un mejor rendimiento. |
En el caso del 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 clases para ocultar y mostrar contenido de HTML dinámico. Si necesitas usar JavaScript para agregar contenido de forma dinámica a tu página, asegúrate de que sea simple y conciso, y, por supuesto, accesible.
Administración de focos
En el módulo de enfoque del teclado, abordamos el orden de enfoque y los estilos de indicadores. La administración del enfoque consiste en saber cuándo y dónde atrapar el enfoque y cuándo no debería atraparse.
La administración de enfoque es fundamental para los usuarios que solo usan el teclado.
Nivel del componente
Puedes crear trampas del 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 queda atascado en un componente o cuando no se mantiene el enfoque cuando debería.
Uno de los patrones más comunes en los que los usuarios experimentan problemas de administración de enfoque es en un componente modal. Cuando un usuario que solo usa el teclado encuentra un diálogo modal, debería poder usar la tecla TAB para moverse entre los elementos prácticos del diálogo modal, pero nunca debería poder salir del diálogo modal sin descartarlo de forma explícita. JavaScript es esencial para capturar correctamente este enfoque.
Nivel de la página
El enfoque también se debe mantener cuando un usuario navega de una página a otra. Esto es así, en especial, en los SPA, donde no hay actualización del 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 dentro de tu aplicación, el enfoque se mantiene en el mismo lugar o se coloca en otro lugar por completo.
Cuando se realiza la transición entre páginas (o en el enrutamiento), el equipo de desarrollo debe decidir dónde se enfocará cuando se cargue la página.
Existen varias técnicas para lograrlo:
- Enfoca el contenedor principal con un anuncio
aria-live. - Vuelve a enfocar un vínculo para saltar al contenido principal.
- Mueve el enfoque al encabezado de nivel superior de la página nueva.
El lugar en el que decidas enfocarte dependerá del framework que uses y del contenido que quieras mostrar a tus 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 de estados, o cuando el estado visual actual de un componente o una página se transmite a un usuario de tecnología de accesibilidad para personas con visión reducida, ciegas o sordas.
A menudo, el estado de un componente o una página se administra a través de atributos ARIA, como se presenta en el módulo ARIA y HTML. Repasemos algunos de los tipos más comunes de atributos ARIA que se usan para ayudar a gestionar el estado de un elemento.
Nivel del componente
Según el contenido de tu página y la información que necesitan tus usuarios, hay muchos estados ARIA que debes tener en cuenta cuando le transmites 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án expandidos o contraídos.
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 la página
Los desarrolladores suelen usar un área oculta visualmente llamada región activa de ARIA para anunciar cambios en la pantalla y enviar 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 los cambios dinámicos en la página sin necesidad de que se vuelva a cargar toda la página.
Históricamente, JavaScript ha tenido dificultades para anunciar contenido en aria-live y regiones de alerta debido a su naturaleza dinámica. Agregar contenido de forma asíncrona al DOM dificulta que el AT detecte 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, y 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 "presentador en vivo" que hace todo el trabajo por ti y es totalmente accesible. No es necesario que te preocupes por crear una región activa y lidiar con los problemas que se describen 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
El JavaScript moderno es un lenguaje potente que permite a los desarrolladores web crear aplicaciones web sólidas. Esto, a veces, genera una ingeniería excesiva y, por extensión, patrones inaccesibles. Si sigues los patrones y las sugerencias de JavaScript que se incluyen en este módulo, puedes hacer que tus apps sean más accesibles para todos los usuarios.
Verifica tu comprensión
Pon a prueba tus conocimientos sobre JavaScript
¿Cuál es la mejor manera de cambiar el estilo de un elemento con JavaScript?
¿Todas las acciones de JavaScript son compatibles con los usuarios del teclado?