JavaScript desempeña un papel fundamental 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 abuso) de JavaScript ha generado muchas tendencias alarmantes, como tiempos de carga prolongados debido a grandes cantidades de código, el uso de elementos HTML no semánticos y la inyección de HTML y CSS a través de JavaScript. Y es posible que no sepas 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 con JavaScript, así como soluciones para los problemas de accesibilidad que surgen del 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 o panel táctil, y 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>, se 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 presión de la tecla Intro o Espacio. 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 un mouse. Los usuarios que solo usan el teclado no pueden acceder a las acciones asociadas.
Títulos de páginas
Como aprendimos en el módulo Documento, el título de la página es fundamental para los usuarios de lectores de pantalla. 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 tener en cuenta cómo controlas los títulos de las páginas. Esto es especialmente importante para las apps de una sola página (SPA) que se cargan desde un único archivo index.html, ya que las transiciones o las rutas (cambios de página) no implican 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 de 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 un trabajo adicional, pero la buena noticia es que tienes opciones, como el contenido dinámico.
Contenido dinámico
Una de las funcionalidades 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 el comportamiento 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 diga: "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 manera similar, con setAttribute:
document.querySelector("#banner").setAttribute("style", "border-color:#0000ff;");
Un gran poder conlleva una gran responsabilidad. Lamentablemente, la inserción de HTML y CSS con JavaScript se ha utilizado de forma incorrecta para crear contenido inaccesible. A continuación, se indican algunos usos inadecuados 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 que la tecnología de accesibilidad reconozca el contenido dinámico | Usar una demora de tiempo de 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 las hojas de estilo del usuario no se lean correctamente | Mantén tus estilos en archivos CSS para mantener la coherencia del tema |
| Crear 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 de CSS, alterna 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 clases de activación 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, 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 administración del enfoque consiste en saber cuándo y dónde atrapar el enfoque, y cuándo no se debe atrapar.
La administración del enfoque es fundamental para los usuarios que solo usan el teclado.
Nivel del componente
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 queda atascado en un componente o cuando no se mantiene el enfoque cuando debería hacerlo.
Uno de los patrones más comunes en los que los usuarios experimentan problemas de administración del enfoque se da en un componente modal. Cuando un usuario que solo usa el teclado se encuentra con un modal, debe poder presionar la tecla Tab para desplazarse entre los elementos que se pueden accionar del modal, pero nunca se le debe permitir salir del modal sin descartarlo de forma explícita. JavaScript es fundamental para atrapar correctamente este enfoque.
A nivel de la página
También se debe mantener el enfoque cuando un usuario navega de una página a otra. Esto es especialmente cierto en las SPA, en las que 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 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 el enrutamiento), el equipo de desarrollo debe decidir a dónde se dirige el enfoque cuando se carga la página.
Existen varias técnicas para lograrlo:
- Enfoca el contenedor principal con un anuncio de
aria-live. - Vuelve a enfocar un vínculo para saltar al contenido principal.
- Mueve el foco al encabezado de nivel superior de la página nueva.
El lugar en el que decidas poner el enfoque dependerá del framework que uses y del contenido que quieras ofrecer 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, es decir, cuando el estado visual actual de un componente o una página se transmite a un usuario de tecnología de accesibilidad con visión reducida, ciego o sordo-ciego.
A menudo, el estado de un componente o una página se administra a través de atributos ARIA, como se presentó en el módulo de ARIA y HTML. Revisemos algunos de los tipos más comunes de atributos ARIA que se usan para ayudar a administrar 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 de ARIA que debes tener en cuenta cuando 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.
O bien, puedes usar aria-pressed para indicar que se presionó un botón.
Es importante ser selectivo al aplicar atributos ARIA. Piensa en el flujo del usuario para comprender qué información crítica se debe transmitir al usuario.
A 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 mensajes de alerta a los usuarios de tecnología de accesibilidad (TA). Esta área se puede combinar con JavaScript para notificar a los usuarios los cambios dinámicos en la página sin necesidad de volver a cargar toda la página.
Históricamente, JavaScript ha tenido dificultades para anunciar contenido en las regiones de aria-live y de alerta debido a su naturaleza dinámica. Agregar contenido de forma asíncrona al DOM dificulta que las TA detecten la región y la anuncien.
Para que el contenido se lea correctamente, la región de alerta o en vivo 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 "anunciador en vivo" que hace todo el trabajo por ti y es completamente accesible. No es necesario preocuparse por crear una región activa ni por los problemas que se describen en la sección anterior.
Estos son algunos paquetes en vivo para frameworks de JavaScript comunes:
- 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. A veces, esto lleva a un exceso de ingeniería y, por extensión, a patrones inaccesibles. Si sigues los patrones y las sugerencias de JavaScript que se incluyen en este módulo, podrás hacer que tus apps sean más accesibles para todos los usuarios.