Imatges en enllaços, botons, grups i galeries

A la primera lliçó vam veure que una imatge funcional es descriu per la seva acció o la seva destinació. A la pràctica gairebé mai no apareix sola: comparteix enllaç amb un titular, forma part d'un grup d'estrelles de valoració, és la miniatura d'una galeria o una diapositiva d'un carrusel. Aquesta lliçó resol aquests casos combinats, que són els que produeixen més errors a les auditories, amb el codi que convé fer servir en cadascun.

Imatge i text dins del mateix enllaç

Les targetes de notícies, productes o serveis solen ser un únic enllaç que conté una foto i un titular. Tot el que hi ha dins de l'enllaç forma el seu nom: si la imatge porta un alt descriptiu, el lector de pantalla anunciarà les dues coses seguides, i si l'alt repeteix el titular, se sentirà dues vegades. La regla: quan el text de l'enllaç ja explica la destinació, la imatge porta alt="".

<!-- Incorrecte: l'enllaç s'anuncia com a
     «Pla d'asfaltatge 2026 Pla d'asfaltatge 2026» -->
<a href="/noticias/asfaltado-2026">
  <img src="asfaltado.jpg" alt="Pla d'asfaltatge 2026">
  <h3>Pla d'asfaltatge 2026</h3>
</a>

<!-- Correcte: la imatge no afegeix res a la destinació -->
<a href="/noticias/asfaltado-2026">
  <img src="asfaltado.jpg" alt="">
  <h3>Pla d'asfaltatge 2026</h3>
</a>

Hi ha una excepció: si la imatge aporta informació que no és al text i que serveix per decidir si se segueix l'enllaç (un segell d'«Exhaurit» sobre la foto d'un producte, per exemple), aquesta informació va a l'alt o, millor, com a text visible a la targeta.

Imatge i text en enllaços separats a la mateixa destinació

Un altre patró molt habitual: la miniatura és un enllaç i el titular és un altre enllaç, tots dos a la mateixa pàgina. Qui navega amb el teclat passa dues vegades per la mateixa destinació a cada targeta, i qui fa servir un lector de pantalla sent un enllaç repetit o amb nom de fitxer. La solució més neta és unir-los en un sol enllaç, com a l'exemple correcte anterior.

Imatge com a únic contingut de l'enllaç

Si la imatge és l'únic que hi ha dins de l'enllaç, el seu alt és el nom de l'enllaç, i el criteri 2.4.4 Propòsit dels enllaços (en context), de nivell A, exigeix que aquest nom permeti saber on porta. Casos típics:

• Logotip de la capçalera que enllaça a la portada: el nom de l'organització i, si es vol, la destinació: «Ajuntament de Molina de Segura, inici». Mai «logo».
• Logotips de patrocinadors o entitats col·laboradores: el nom de cada entitat, que és també la destinació de l'enllaç: «Fundació ONCE».
• Icones de xarxes socials: la xarxa i el compte: «ADDAW a LinkedIn». Si les mateixes icones apareixen a la capçalera i al peu, amb el mateix text als dos llocs.
• Miniatura que obre la imatge ampliada: el que mostra la imatge, perquè la destinació és ella mateixa: «Processó del Divendres Sant pel carrer Major, ampliar».

Botons amb imatge

Un botó que és una imatge (amb <input type="image"> o amb una imatge dins de <button>) també rep el nom de l'alt, que ha de descriure l'acció: «Enviar la sol·licitud», «Afegir a la cistella», «Tancar».

<!-- Botó d'imatge: l'alt és obligatori i és el seu nom -->
<input type="image" src="enviar.png" alt="Enviar la sol·licitud">

<!-- Imatge dins d'un botó -->
<button type="submit"><img src="lupa.svg" alt="Cercar"></button>

Si la imatge del botó conté text visible, entra en joc el criteri 2.5.3 Etiqueta en el nom (nivell A): el nom accessible ha de contenir el text que es veu, preferiblement al principi. Si el botó mostra «Comprar» i el seu alt és «Afegir el producte a la cistella», una persona que fa servir el control per veu dirà «prémer Comprar» i no passarà res. L'alt correcte és «Comprar» (o «Comprar ara», si és el que es veu). I, per 1.4.5 Imatges de text, el millor seria no fer servir una imatge: un botó amb text real, maquetat amb CSS.

Grups d'imatges

De vegades diverses imatges transmeten una sola informació. L'exemple clàssic són les estrelles d'una valoració: cinc imatges que juntes volen dir «4 de 5». Si cadascuna porta el seu alt («estrella plena», «estrella plena»… «estrella buida»), la persona ha de comptar. El correcte és que una imatge porti l'alternativa del conjunt i les altres vagin buides o, encara millor, oferir la valoració com a text.

<!-- Grup d'imatges: una sola alternativa per al conjunt -->
<img src="estrella-llena.svg" alt="Valoració: 4 de 5 estrelles">
<img src="estrella-llena.svg" alt="">
<img src="estrella-llena.svg" alt="">
<img src="estrella-llena.svg" alt="">
<img src="estrella-vacia.svg" alt="">

El mateix passa amb un collage de fotos que forma una sola composició: una alternativa per al conjunt. En canvi, en una galeria cada foto és una imatge independent i necessita el seu propi alt, diferent dels altres (l'error de repetir «Galeria de fotos de l'esdeveniment» a totes el vam veure a la segona lliçó).

Carrusels, visors i mapes d'imatge

• Carrusels: cada diapositiva es tracta segons la seva funció. Si és un enllaç amb text, la imatge va amb alt=""; si la imatge informa, porta el seu alt. Els controls (anterior, següent, pausa, punts de navegació) són botons que necessiten nom: «Diapositiva anterior», «Anar a la diapositiva 3 de 5». Si el carrusel avança sol, s'ha de poder posar en pausa (2.2.2 Posar en pausa, aturar, amagar). El patró complet el veuràs al nivell 3, al curs de components interactius.
• Visors ampliats (lightbox, la capa que mostra la foto gran sobre la pàgina): la imatge ampliada necessita la mateixa alternativa que la miniatura, i el peu de foto, si n'hi ha, també s'ha de mostrar al visor.
• Mapes d'imatge (<map> i <area>): la imatge porta un alt que la identifica en conjunt i cada zona activa porta el seu propi alt amb la destinació.

<img src="mapa-comarcas.png" usemap="#comarcas"
     alt="Mapa de la Regió de Múrcia per comarques">
<map name="comarcas">
  <area shape="poly" coords="…" href="/comarcas/noroeste" alt="Comarca del Noroeste">
  <area shape="poly" coords="…" href="/comarcas/altiplano" alt="Comarca de l'Altiplano">
</map>

Taula resum de casos

Situació	Alternativa de la imatge	Per què
Imatge i titular en el mateix enllaç	alt=""	El titular ja dona nom a l'enllaç
Imatge sola en un enllaç	La destinació de l'enllaç	És el nom de l'enllaç (2.4.4)
Botó amb una imatge de text	El mateix text visible	2.5.3 Etiqueta en el nom
Estrelles de valoració	Una amb «4 de 5 estrelles», la resta buides	El grup transmet una sola dada
Fotos d'una galeria	Un alt diferent per foto	Cada foto és independent
Zona d'un mapa d'imatge	La destinació de cada <area>	Cada zona és un enllaç

Resum

• Imatge i text en el mateix enllaç: alt="", tret que la imatge aporti informació addicional rellevant; uneix en un sol enllaç la miniatura i el titular que van al mateix lloc.
• Imatge sola en un enllaç: l'alt és el nom de l'enllaç i ha d'indicar la destinació (2.4.4).
• Botons amb imatge: l'alt descriu l'acció i, si la imatge mostra text, el conté (2.5.3).
• Grups d'imatges que formen una sola dada: una alternativa per al conjunt; fotos d'una galeria: una alternativa diferent per foto.
• Carrusels, visors i mapes d'imatge: cada imatge segons la seva funció i tots els controls i zones amb nom.