F20Imágenes que cambian sin actualizar su texto alternativo

Por qué es importante

El texto alternativo debe poder sustituir a la imagen que se ve en ese momento. Si describe otra, ya no es una alternativa.

• Una persona ciega oye las ventas de septiembre mientras el gráfico ya muestra octubre.
• En una tienda en línea, al elegir el color rojo cambia la foto, pero el lector sigue diciendo «zapatilla azul».
• Un botón con icono pasa de «Reproducir» a «Pausar», pero su texto alternativo sigue diciendo «Reproducir».

Cómo evitarlo

1. Trate la imagen y su texto alternativo como una sola cosa: si cambia una, cambia la otra.
2. En los scripts, actualice alt (o aria-label) en el mismo momento en que cambia src.
3. En el gestor de contenidos, revise el texto alternativo cada vez que sustituya una imagen.
4. Si un gráfico se genera con datos automáticos, genere su texto alternativo con esos mismos datos.
5. En botones con icono que cambia de estado, actualice también el nombre del botón.

Cómo comprobarlo

1. Localice imágenes que cambian: carruseles, gráficos con datos actualizados, galerías de producto o botones con dos estados.
2. Provoque el cambio: elija otro color, pase la diapositiva o pulse el botón.
3. Inspeccione la imagen con F12 o escúchela con un lector de pantalla.
4. Compruebe que el texto alternativo describe la imagen nueva y no la anterior.

Ejemplo

Ficha de producto: al elegir otro color cambian a la vez la foto y su texto alternativo.

<img id="foto" src="zapatilla-azul.jpg" alt="Zapatilla deportiva azul">
<button type="button" id="rojo">Ver en rojo</button>
<script>
  rojo.addEventListener('click', () => {
    foto.src = 'zapatilla-roja.jpg';
    foto.alt = 'Zapatilla deportiva roja'; // a la vez que la imagen
  });
</script>