Técnica Scripts de cliente WCAG 2.2

SCR20Usar funciones de teclado junto con las específicas de otros dispositivos

En resumen

Esta técnica explica cómo emparejar cada manejador de eventos de ratón (mouseover, mousedown, click...) con su equivalente de teclado (focus, keydown, keypress...) para que toda la funcionalidad programada con scripts se pueda manejar sin ratón. Beneficia a quienes usan solo el teclado, lectores de pantalla u otros dispositivos de entrada, y debe aplicarse siempre que un script responda a acciones del puntero.

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 las auditorías de accesibilidad de ADDAW revisamos cada criterio de conformidad siguiendo este catálogo de técnicas: comprobamos si la web aplica una técnica suficiente y documentamos cada fallo común con capturas y el código afectado, para que el equipo de desarrollo sepa exactamente qué corregir. Los informes siguen la metodología del Observatorio de Accesibilidad y la norma UNE-EN 301 549.

Solicitar una auditoría

Fuente y licencia

Traducción al español, no oficial, realizada por ADDAW a partir de la técnica SCR20 del documento «Techniques for WCAG 2.2» del W3C (versión del repositorio público del W3C a 22/10/2026). Copyright © W3C® (MIT, ERCIM, Keio, Beihang). Se publica conforme a la licencia de documentos del W3C. El texto normativo de referencia es el original en inglés; si detecta un error en la traducción, escríbanos.