Técnica Scripts de cliente WCAG 2.2

SCR20Programar cada acción para que funcione con el ratón y con el teclado

Nombre oficial en el W3C: Usar funciones de teclado junto con las específicas de otros dispositivos

En pocas palabras

Si un script responde a un evento de ratón, debe responder también al equivalente de teclado. Por ejemplo, junto a mouseover se usa focus, y junto a mousedown se usa keydown. Así cualquier función de la página se puede usar con ratón, con teclado o con otros dispositivos.

Por qué es importante

Muchas personas navegan solo con el teclado: personas ciegas, personas con temblores o movilidad reducida, o quien usa un pulsador o el control por voz.

Si un menú solo se abre al pasar el ratón, o una tarjeta de producto solo responde a un clic sobre un div, esas personas no pueden usarlos.

Cómo se hace

Siempre que pueda, use elementos nativos como <button> o <a href>. Con ellos, el evento click ya funciona con Intro o Espacio.
Empareje los eventos: mouseover con focus, mouseout con blur, mousedown con keydown y mouseup con keyup.
Si usa un elemento no nativo, dele tabindex="0", un role adecuado y responda a las teclas Intro y Espacio.
Evite acciones que solo existen con el ratón, como el doble clic o arrastrar, sin una alternativa.

Cómo comprobarlo

Haga una lista de todo lo interactivo: menús, botones, pestañas, carruseles, tarjetas.
Deje el ratón a un lado y recorra la página con Tab, Mayús + Tab, Intro, Espacio y las flechas.
Compruebe que puede llegar a cada elemento y usar todas sus funciones.

Ejemplo

Un elemento no nativo que responde al clic y a las teclas Intro y Espacio.

<div role="button" tabindex="0" id="filtrar">Filtrar resultados</div>
<script>
  const boton = document.getElementById("filtrar");
  boton.addEventListener("click", filtrar);
  boton.addEventListener("keydown", (e) => {
    if (e.key === "Enter" || e.key === " ") {
      e.preventDefault();
      filtrar();
    }
  });
</script>

Ver el texto completo del W3C (traducción al español)

Esta es una traducción no oficial al español de la técnica SCR20 de Techniques for WCAG 2.2, del W3C. Puede contener errores. El único documento oficial y normativo es la versión original en inglés, publicada en el sitio web del W3C.

Aplicabilidad

Se aplica a todo el contenido que utiliza scripts para implementar funcionalidad.

Descripción

El objetivo de esta técnica es ilustrar el uso conjunto de eventos específicos de teclado y eventos específicos de ratón en código que tiene una función de script asociada a un evento. Usar juntos los eventos específicos de teclado y los específicos de ratón garantiza que el contenido pueda manejarse con una amplia variedad de dispositivos. Por ejemplo, un script puede realizar la misma acción cuando detecta la pulsación de una tecla que cuando se hace clic con un botón del ratón. Esta técnica va más allá del requisito de acceso mediante teclado del criterio de conformidad, al incluir no solo el acceso mediante teclado sino también el acceso mediante otros dispositivos.

En JavaScript, algunos de los manejadores de eventos más utilizados son onblur, onchange, onclick, ondblclick, onfocus, onkeydown, onkeypress, onkeyup, onload, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onreset, onselect, onsubmit y onunload. Algunas funciones específicas de ratón tienen una función específica de teclado lógicamente equivalente (como «onmouseover» y «onfocus»). Debe proporcionarse un manejador de eventos de teclado que ejecute la misma función que el manejador de eventos de ratón.

La siguiente tabla sugiere manejadores de eventos de teclado con los que emparejar los manejadores de eventos de ratón.

Correspondencias entre manejadores de dispositivos
Use...	...junto con
`mousedown`	`keydown`
`mouseup`	`keyup`
`click` ^[1]	`keypress` ^[2]
`mouseover`	`focus`
`mouseout`	`blur`

¹ Aunque click es, en principio, un manejador de eventos de ratón, la mayoría de los agentes de usuario HTML también procesan este evento cuando se activa un control HTML nativo (p. ej., un botón o un enlace), con independencia de que se haya activado con el ratón o con el teclado. En la práctica, por tanto, no es necesario duplicar este evento al añadir manejadores a elementos HTML que pueden recibir el foco de forma nativa. Sin embargo, sí es necesario al añadir manejadores a otros eventos, como en el ejemplo 2 que figura más abajo.

² Dado que el manejador del evento keypress reacciona ante cualquier tecla, la función manejadora del evento debe comprobar primero que se ha pulsado la tecla Intro antes de continuar con el tratamiento del evento. De lo contrario, el manejador del evento se ejecutará cada vez que el usuario pulse cualquier tecla, incluso la tecla de tabulación para salir del control, lo que normalmente no es deseable.

Algunas funciones específicas de ratón (como dblclick y mousemove) no tienen una función específica de teclado equivalente. Esto significa que algunas funciones puede que tengan que implementarse de forma distinta para cada dispositivo (por ejemplo, incluyendo una serie de botones para ejecutar, mediante el teclado, el equivalente de las funciones específicas de ratón implementadas).

Ejemplos

En este ejemplo de un enlace con imagen, la imagen cambia cuando el usuario sitúa el puntero sobre ella. Para ofrecer una experiencia similar a los usuarios de teclado, la imagen también cambia cuando el usuario llega a ella con la tecla de tabulación.

<a href="menu.php" onmouseover="swapImageOn('menu')" onfocus="swapImageOn('menu')" 
   onmouseout="swapImageOff('menu')" onblur="swapImageOff('menu')"> 
   <img id="menu" src="menu_off.gif" alt="Menu"> 
</a>

Este ejemplo muestra un control de enlace personalizado en el que se pueden usar tanto el ratón como el teclado para activar la función. El evento onclick del ratón se duplica con un evento onkeypress de teclado adecuado. El atributo tabindex garantiza que el teclado tenga una parada de tabulación en el elemento span. Tenga en cuenta que, en este ejemplo, la función nextPage() debería comprobar que la tecla pulsada ha sido Intro; de lo contrario, responderá a todas las acciones de teclado mientras el span tenga el foco, lo que no es el comportamiento deseado.

<span onclick="nextPage();" onkeypress="nextPage();" role="link" tabindex="0">
  <img alt="Go to next page" src="arrow.gif">
</span>

Pruebas

Procedimiento

Localizar toda la funcionalidad interactiva.
Comprobar que se puede acceder a toda la funcionalidad interactiva usando únicamente el teclado.

Resultados esperados

La comprobación n.º 2 es verdadera.

Recursos

Overview of Creating Accessible JavaScript (introducción a la creación de JavaScript accesible, WebAIM)

Cómo lo comprobamos en ADDAW

En cada auditoría de ADDAW revisamos esta técnica página a página y le entregamos los errores con capturas y la forma de corregirlos.

Solicitar una auditoría

Basado en la técnica SCR20 del W3C (WCAG 2.2). Explicación y ejemplos: ADDAW. Traducción no oficial del texto del W3C © W3C, licencia de documentos del W3C. ¿Ha visto un error? Escríbanos.