Técnica Scripts de cliente WCAG 2.2
SCR2Usar manejadores de eventos redundantes de teclado y de ratón
En resumen
Muchos efectos (cambiar una imagen al pasar el ratón, resaltar un elemento) se programan solo con eventos de ratón, así que quien navega con teclado nunca los ve. Esta técnica duplica cada manejador de ratón con su equivalente de teclado: onmouseover con onfocus y onmouseout con onblur, de modo que el comportamiento sea idéntico con cualquier dispositivo de entrada. Úsela siempre que un script reaccione al ratón.
Aplicabilidad
HTML con soporte de scripts.
Descripción
El objetivo de esta técnica es mostrar el uso de eventos independientes del dispositivo para cambiar una imagen decorativa en respuesta a un evento de ratón o de foco. Use los eventos onmouseover y onmouseout para cambiar una imagen decorativa cuando el ratón se sitúa sobre un elemento de la página o se aleja de él. Además, use los eventos onfocus y onblur para cambiar la imagen cuando el elemento recibe y pierde el foco.
El ejemplo siguiente tiene una imagen decorativa delante de un elemento de anclaje (enlace). Cuando el usuario pasa el ratón sobre la etiqueta de anclaje, la imagen decorativa situada delante del anclaje cambia. Cuando el ratón se aleja del anclaje, la imagen vuelve a su versión original. El mismo efecto de cambio de imagen se produce cuando el usuario da el foco del teclado al elemento de anclaje. Al recibir el foco la imagen cambia y, al perderlo, la imagen vuelve a su estado original. Esto se consigue asociando al elemento de anclaje manejadores de los eventos onmouseover, onmouseout, onfocus y onblur. El manejador de eventos es una función JavaScript llamada updateImage(), que cambia el atributo src de la imagen. updateImage() se llama en respuesta a los eventos onmouseover, onmouseout, onfocus y onblur.
A cada imagen se le asigna un id único. Este id único se pasa a updateImage() junto con un valor booleano que indica qué imagen debe usarse: updateImage(imgId, isOver);. El valor booleano true se pasa cuando el ratón está sobre el elemento de anclaje o este tiene el foco. Se pasa el valor false cuando el ratón se aleja del elemento de anclaje o este pierde el foco. La función updateImage() usa el id de la imagen para cargarla y después cambia el atributo src en función del valor booleano. Tenga en cuenta que, como la imagen tiene fines decorativos, su atributo alt es nulo.
Es recomendable usar imágenes de tamaño similar y especificar los atributos height y width en el elemento de imagen. Así se evita cualquier cambio en la maquetación de la página cuando se actualiza la imagen. Este ejemplo usa imágenes de tamaño idéntico.
Ejemplos
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Changing Image Source in a Device Independent Manner</title>
<script>
/* This function will change the image src of an image element.
* param imgId - the id of the image object to change
* param isOver - true when mouse is over or object has focus,
false when mouse move out or focus is lost
*/
function updateImage(imgId, isOver) {
var theImage = document.getElementById(imgId);
if (theImage != null) {
if (isOver) {
theImage.setAttribute("src","yellowplus.gif");
}
else {
theImage.setAttribute("src","greyplus.gif");
}
}
}
</script>
</head>
<body>
<p>Mouse over or tab to the links below and see the image change.</p>
<a href="https://www.w3.org/WAI/"
onmouseover="updateImage('wai', true);" onfocus="updateImage('wai', true);"
onmouseout="updateImage('wai',false);" onblur="updateImage('wai',false);">
<img alt="" id="wai" src="greyplus.gif">
W3C Web Accessibility Initiative</a> &
<a href="https://www.w3.org/International/" onmouseover="updateImage('i18n', true);"
onfocus="updateImage('i18n',true);" onmouseout="updateImage('i18n',false);"
onblur="updateImage('i18n',false);">
<img alt="" id="i18n" src="greyplus.gif">
W3C Internationalization</a>
</body>
</html>Pruebas
Procedimiento
Cargar la página web y probar los eventos con el ratón y con el teclado.
- Comprobar que la imagen «estándar» se muestra como se espera al cargar la página web.
-
Con el ratón:
- Mover el ratón sobre el elemento que contiene los manejadores de eventos (en este ejemplo es un elemento de anclaje). Comprobar que la imagen cambia a la imagen esperada.
- Alejar el ratón del elemento. Comprobar que la imagen vuelve a ser la imagen «estándar».
-
Con el teclado:
- Usar el teclado para situar el foco en el elemento que contiene los manejadores de eventos. Comprobar que la imagen cambia a la imagen esperada.
- Usar el teclado para quitar el foco del elemento (generalmente moviendo el foco a otro elemento). Comprobar que la imagen vuelve a ser la imagen «estándar».
- Verificar que la maquetación de los demás elementos de la página no se ve afectada cuando cambia la imagen.
Resultados esperados
- Todos los pasos de las comprobaciones anteriores son verdaderos.
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.
Fuente y licencia
Traducción al español, no oficial, realizada por ADDAW a partir de la técnica SCR2 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.
