Imágenes en enlaces, botones, grupos y galerías

En la primera lección vimos que una imagen funcional se describe por su acción o su destino. En la práctica casi nunca aparece sola: comparte enlace con un titular, forma parte de un grupo de estrellas de valoración, es la miniatura de una galería o una diapositiva de un carrusel. Esta lección resuelve esos casos combinados, que son los que más fallos producen en las auditorías, con el código que conviene usar en cada uno.

Imagen y texto dentro del mismo enlace

Las tarjetas de noticias, productos o servicios suelen ser un único enlace que contiene una foto y un titular. Todo lo que hay dentro del enlace forma su nombre: si la imagen lleva un alt descriptivo, el lector de pantalla anunciará las dos cosas seguidas, y si el alt repite el titular, se oirá dos veces. La regla: cuando el texto del enlace ya explica el destino, la imagen lleva alt="".

<!-- Incorrecto: el enlace se anuncia como
     «Plan de asfaltado 2026 Plan de asfaltado 2026» -->
<a href="/noticias/asfaltado-2026">
  <img src="asfaltado.jpg" alt="Plan de asfaltado 2026">
  <h3>Plan de asfaltado 2026</h3>
</a>

<!-- Correcto: la imagen no añade nada al destino -->
<a href="/noticias/asfaltado-2026">
  <img src="asfaltado.jpg" alt="">
  <h3>Plan de asfaltado 2026</h3>
</a>

Hay una excepción: si la imagen aporta información que no está en el texto y que sirve para decidir si se sigue el enlace (un sello de «Agotado» sobre la foto de un producto, por ejemplo), esa información va en el alt o, mejor, como texto visible en la tarjeta.

Imagen y texto en enlaces separados al mismo destino

Otro patrón muy habitual: la miniatura es un enlace y el titular es otro enlace, los dos a la misma página. Quien navega con teclado pasa dos veces por el mismo destino en cada tarjeta, y quien usa lector de pantalla oye un enlace repetido o con nombre de fichero. La solución más limpia es unirlos en un solo enlace, como en el ejemplo correcto anterior.

Imagen como único contenido del enlace

Si la imagen es lo único que hay dentro del enlace, su alt es el nombre del enlace, y el criterio 2.4.4 Propósito de los enlaces (en contexto), de nivel A, exige que ese nombre permita saber adónde lleva. Casos típicos:

• Logotipo de la cabecera que enlaza a la portada: el nombre de la organización y, si se quiere, el destino: «Ayuntamiento de Molina de Segura, inicio». Nunca «logo».
• Logotipos de patrocinadores o entidades colaboradoras: el nombre de cada entidad, que es también el destino del enlace: «Fundación ONCE».
• Iconos de redes sociales: la red y la cuenta: «ADDAW en LinkedIn». Si los mismos iconos aparecen en la cabecera y en el pie, con el mismo texto en los dos sitios.
• Miniatura que abre la imagen ampliada: lo que muestra la imagen, porque el destino es ella misma: «Procesión del Viernes Santo por la calle Mayor, ampliar».

Botones con imagen

Un botón que es una imagen (con <input type="image"> o con una imagen dentro de <button>) recibe también su nombre del alt, que debe describir la acción: «Enviar solicitud», «Añadir a la cesta», «Cerrar».

<!-- Botón de imagen: el alt es obligatorio y es su nombre -->
<input type="image" src="enviar.png" alt="Enviar solicitud">

<!-- Imagen dentro de un botón -->
<button type="submit"><img src="lupa.svg" alt="Buscar"></button>

Si la imagen del botón contiene texto visible, entra en juego el criterio 2.5.3 Etiqueta en el nombre (nivel A): el nombre accesible debe contener el texto que se ve, preferiblemente al principio. Si el botón muestra «Comprar» y su alt es «Añadir el producto a la cesta», una persona que usa control por voz dirá «pulsar Comprar» y no ocurrirá nada. El alt correcto es «Comprar» (o «Comprar ahora», si es lo que se ve). Y, por 1.4.5 Imágenes de texto, lo mejor sería no usar una imagen: un botón con texto real, maquetado con CSS.

Grupos de imágenes

A veces varias imágenes transmiten una sola información. El ejemplo clásico son las estrellas de una valoración: cinco imágenes que juntas significan «4 de 5». Si cada una lleva su alt («estrella llena», «estrella llena»… «estrella vacía»), la persona tiene que contar. Lo correcto es que una imagen lleve la alternativa del conjunto y las demás vayan vacías o, mejor todavía, ofrecer la valoración como texto.

<!-- Grupo de imágenes: una sola alternativa para el conjunto -->
<img src="estrella-llena.svg" alt="Valoración: 4 de 5 estrellas">
<img src="estrella-llena.svg" alt="">
<img src="estrella-llena.svg" alt="">
<img src="estrella-llena.svg" alt="">
<img src="estrella-vacia.svg" alt="">

Lo mismo ocurre con un collage de fotos que forma una sola composición: una alternativa para el conjunto. En cambio, en una galería cada foto es una imagen independiente y necesita su propio alt, distinto de las demás (el error de repetir «Galería de fotos del evento» en todas lo vimos en la segunda lección).

Carruseles, visores y mapas de imagen

• Carruseles: cada diapositiva se trata según su función. Si es un enlace con texto, la imagen va con alt=""; si la imagen informa, lleva su alt. Los controles (anterior, siguiente, pausa, puntos de navegación) son botones que necesitan nombre: «Diapositiva anterior», «Ir a la diapositiva 3 de 5». Si el carrusel avanza solo, debe poder pausarse (2.2.2 Poner en pausa, detener, ocultar). El patrón completo lo verás en el nivel 3, en el curso de componentes interactivos.
• Visores ampliados (lightbox, la capa que muestra la foto grande sobre la página): la imagen ampliada necesita la misma alternativa que la miniatura, y el pie de foto, si existe, debe mostrarse también en el visor.
• Mapas de imagen (<map> y <area>): la imagen lleva un alt que la identifica en conjunto y cada zona activa lleva su propio alt con el destino.

<img src="mapa-comarcas.png" usemap="#comarcas"
     alt="Mapa de la Región de Murcia por comarcas">
<map name="comarcas">
  <area shape="poly" coords="…" href="/comarcas/noroeste" alt="Comarca del Noroeste">
  <area shape="poly" coords="…" href="/comarcas/altiplano" alt="Comarca del Altiplano">
</map>

Tabla resumen de casos

Situación	Alternativa de la imagen	Por qué
Imagen y titular en el mismo enlace	alt=""	El titular ya da nombre al enlace
Imagen sola en un enlace	El destino del enlace	Es el nombre del enlace (2.4.4)
Botón con una imagen de texto	El mismo texto visible	2.5.3 Etiqueta en el nombre
Estrellas de valoración	Una con «4 de 5 estrellas», el resto vacías	El grupo transmite un solo dato
Fotos de una galería	Un alt distinto por foto	Cada foto es independiente
Zona de un mapa de imagen	El destino de cada <area>	Cada zona es un enlace

Resumen

• Imagen y texto en el mismo enlace: alt="", salvo que la imagen aporte información adicional relevante; une en un solo enlace la miniatura y el titular que van al mismo sitio.
• Imagen sola en un enlace: el alt es el nombre del enlace y debe indicar el destino (2.4.4).
• Botones con imagen: el alt describe la acción y, si la imagen muestra texto, lo contiene (2.5.3).
• Grupos de imágenes que forman un solo dato: una alternativa para el conjunto; fotos de una galería: una alternativa distinta por foto.
• Carruseles, visores y mapas de imagen: cada imagen según su función y todos los controles y zonas con nombre.