Addaw, ir a inicio Donar

Técnica Scripts de cliente WCAG 2.2

SCR2Cambiar una imagen decorativa tanto con el ratón como con el teclado

Nombre oficial en el W3C: Usar manejadores de eventos redundantes de teclado y de ratón

En pocas palabras

A veces un enlace cambia una imagen decorativa al pasar el ratón por encima. Ese mismo cambio debe ocurrir cuando el enlace recibe el foco con el teclado. Para ello, los eventos de ratón se acompañan de sus equivalentes de teclado: focus y blur.

Por qué es importante

Muchas personas no usan ratón: personas con movilidad reducida, personas ciegas o quien navega con el tabulador. Si un efecto solo responde al ratón, esas personas reciben una experiencia distinta o incompleta.

Además, el cambio visual al recibir el foco ayuda a ver dónde está el teclado en cada momento.

Cómo se hace

  1. Aplique el efecto sobre un elemento que reciba el foco, como un enlace <a href> o un botón.
  2. Junto a mouseover, use focus. Junto a mouseout, use blur. Ambos deben llamar a la misma función.
  3. Si la imagen es decorativa, déjela con alt="" para que el lector de pantalla la ignore.
  4. Use imágenes del mismo tamaño para que la página no se mueva.
  5. Hoy, muchas veces basta con CSS: combine :hover y :focus-visible en la misma regla.

Cómo comprobarlo

  1. Pase el ratón por el enlace y observe el cambio de imagen.
  2. Recargue la página y llegue al mismo enlace con el tabulador.
  3. Compruebe que la imagen cambia igual al recibir el foco y vuelve a su estado al salir.

Ejemplo

Un mismo cambio de imagen para ratón y teclado.

const enlace = document.getElementById("enlace-agenda");
const icono = document.getElementById("icono-agenda");
function activar() { icono.src = "agenda-activa.png"; }
function desactivar() { icono.src = "agenda.png"; }
enlace.addEventListener("mouseover", activar);
enlace.addEventListener("focus", activar);
enlace.addEventListener("mouseout", desactivar);
enlace.addEventListener("blur", desactivar);
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 SCR2 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

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> &amp;
    <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.

  1. Comprobar que la imagen «estándar» se muestra como se espera al cargar la página web.

  2. Con el ratón:

    1. 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.
    2. Alejar el ratón del elemento. Comprobar que la imagen vuelve a ser la imagen «estándar».

  3. Con el teclado:

    1. 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.
    2. 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».
  4. 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 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 SCR2 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.