JavaScript

JavaScript desempeña un papel muy importante en casi todo lo que creamos, desde modelos más componentes dinámicos a productos completos que se ejecutan en un framework de JavaScript, como React o Angular.

Este uso (o excesivo) de JavaScript ha provocado muchas tendencias alarmantes, como tiempos de carga largos debido a grandes cantidades de código, uso de HTML no semántico y la inyección de HTML y CSS a través de JavaScript. Es posible que no estás seguro de cómo encaja la accesibilidad en cada una de estas piezas.

JavaScript puede tener un gran impacto en la accesibilidad de tu sitio. En este compartiremos algunos patrones generales de accesibilidad que se mejoran por JavaScript, así como soluciones para los problemas de accesibilidad que surgen de con 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, personas con discapacidades motrices finas, personas sin mouse ni panel táctil, y otros, 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 naturalmente la funcionalidad del mouse y del teclado. Sin embargo, La funcionalidad del teclado no se aplica automáticamente cuando se produce un evento onClick(). se agrega a un elemento no semántico, como un <div> genérico.

Qué no debes hacer
<div role="button" tabindex="0" onclick="doAction()">Click me!</div>
Qué debes hacer
<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, Evento keydown/keyup para detectar cuando se presiona la tecla Intro o la barra espaciadora. Agrega eventos de activación a los elementos no semánticos a menudo se olvidan. Por desgracia, cuando lo olvidan, el resultado es un componente al que solo se puede acceder con el mouse. Solo teclado los usuarios quedan sin acceso a las acciones asociadas.

Títulos de página

Como aprendimos en el módulo Document, el título de la página es esencial para los usuarios de lectores de pantalla. Les dice a los usuarios qué página y si navegaron a una página nueva.

Si usas un framework de JavaScript, debes considerar cómo manejar las páginas títulos. Esto es especialmente importante Aplicaciones de una sola página (SPA) que se cargan desde un archivo index.html único, como transiciones o rutas (página cambios) no implicará volver a cargar la página. Cada vez que un usuario carga una página nueva en una SPA, el título no cambiará de forma predeterminada.

Para las SPA, el archivo document.title el valor se puede agregar manualmente o con un paquete auxiliar (según el framework de JavaScript). Anunciar el títulos de páginas actualizados a un usuario de lector de pantalla puede requerir un poco de trabajo adicional, pero la buena noticia es tienes opciones, como 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 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 se transmita el mensaje: "Ya accediste".

Puedes usar el elemento innerHTML para configurar el contenido:

document.querySelector("#banner").innerHTML = '<p>You are now logged in</p>';

Puedes aplicar CSS de forma similar, con setAttribute:

document.querySelector("#banner").setAttribute("style", "border-color:#0000ff;");

Un gran poder conlleva una gran responsabilidad. Lamentablemente, JavaScript la inyección de HTML y CSS se ha utilizado históricamente para crear imágenes inaccesibles contenido. A continuación, se mencionan 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 dar tiempo para que la tecnología de accesibilidad reconozca el contenido dinámico Se usa 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
Aplicar estilos intercalados puede causar que las hojas de estilo del usuario no se lean correctamente Mantén tus estilos en archivos CSS para mantener la coherencia del tema
Cómo 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 analizan más rápido y tienen mejor rendimiento.

Para CSS, activa o desactiva las clases de CSS, en su lugar, agrega estilos intercalados, ya que esto permite la reutilización y la simplicidad. Usar contenido oculto en la página y activar o desactivar 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, así que 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 enfoque los estilos del indicador y del orden. La administración del enfoque consiste en saber cuándo y dónde atrapar enfoque y cuándo no debería quedar atrapado.

La administración del enfoque es fundamental para los usuarios de solo teclado.

Nivel de componente

Puedes crear trampas de teclado cuando el enfoque de un componente no se administra de forma adecuada. Una trampa de teclado se produce cuando un usuario que solo usa el teclado se bloquea en un componente. el enfoque no se mantiene cuando debería ser.

Uno de los patrones más comunes en los que los usuarios experimentan problemas de administración de enfoque está en un componente modal. Cuando un usuario que solo usa el teclado se encuentra con una ventana modal, debería poder tabular entre los elementos accionables de la ventana modal, nunca se deben permitir fuera de la ventana modal sin descartarla explícitamente. JavaScript es esencial para atrapar correctamente este enfoque.

Qué no debes hacer
Qué debes hacer

Nivel de página

También se debe mantener el enfoque cuando un usuario navega de una página a otra. Este es especialmente en las SPA, donde no hay sin actualizar 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 o colocarse en otro lugar.

Al hacer la transición entre páginas (o enrutamiento), el equipo de desarrollo debe decidir en que se enfoca 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 ir al contenido principal.
  • Mueve el enfoque al encabezado de nivel superior de la nueva página.

El lugar en el que decidas enfocarte dependerá del framework que uses y el contenido que quieres ofrecer a los usuarios. Puede ser contextual o que dependen 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 transmite a un usuario de tecnología de asistencia con visión reducida, ciego o sordociego.

A menudo, el estado de un componente o página se administra a través de atributos de ARIA, como que se presentó en el módulo ARIA y HTML. Repasemos algunos de los tipos más comunes de atributos de ARIA que se usan para ayudar administrar el estado de un elemento.

Nivel de componente

Según el contenido de tu página y la información que necesiten tus usuarios, hay muchos estados de ARIA a tener en cuenta al transmitir información sobre un componente al usuario.

Por ejemplo, puedes usar un aria-expanded para indicarle al usuario si un menú desplegable o una lista se expandieron o contraída.

O puedes usar aria-pressed para indicar que se presionó un botón.

Es importante ser selectivo cuando se aplican atributos de ARIA. Piensa en las del usuario para comprender qué información crítica debe transmitirse al usuario.

Nivel de página

Los desarrolladores suelen usar un área visualmente oculta llamada Región en vivo de ARIA para anunciar cambios en la pantalla y enviar mensajes de alerta a la tecnología de asistencia (AT). Esta área se puede vincular con JavaScript para notificar a los usuarios sobre cambios en la página sin que se deba volver a cargar toda la página.

Históricamente, JavaScript ha tenido dificultades para anunciar contenido en aria-live y alertan sobre las regiones debido a su naturaleza dinámica. Agregar contenido de forma asíncrona en el DOM hace que sea difícil para AT registrar la región y anunciarla. Para que el contenido se lea correctamente, la región activa o de alerta debe estar en DOM durante la carga, el texto se puede intercambiar de forma dinámica.

Si usas un framework de JavaScript, la buena noticia es que casi todos tienen "locutor en vivo" que hace todo el trabajo por ti y está completamente accesible. No es necesario preocuparse por crear una región activa ni lidiar con los problemas descritos en la sección anterior.

Estos son algunos paquetes activos para frameworks comunes de JavaScript:

JavaScript moderno es un lenguaje potente que permite a los desarrolladores web crear aplicaciones web robustas. Esto a veces lleva a demasiada ingeniería y, al extensión, patrones inaccesibles. Si sigues los patrones y las sugerencias de JavaScript En este módulo, podrás 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?

Usa JavaScript para aplicar estilo dinámico directamente en un elemento HTML.
Esto genera archivos JavaScript sobrecargados y es ineficiente.
Usa JavaScript para activar o desactivar la clase de un elemento y agregar el estilo a tu hoja de estilo CSS.
Conserva tu estilo en la hoja de estilo CSS y usa JavaScript ligero para cambiar el nombre de la clase.

¿Todas las acciones de JavaScript pueden admitir usuarios de teclado?

Sí, pero tal vez tengas que hacer un poco de trabajo adicional.
El código HTML semántico admite usuarios de teclado de forma predeterminada, pero los elementos no semánticos con acciones necesitan JavaScript adicional.
Sí, todas las acciones admiten automáticamente a los usuarios del teclado.
Solo el HTML semántico admite automáticamente el foco del teclado.
No, solo puedes admitir usuarios de teclado con HTML semántico.
Todos los elementos HTML pueden admitir usuarios de teclado.