Atribut alt segons la funció de la imatge
Una imatge informativa necessita una descripció breu d’allò rellevant. Una imatge purament decorativa sol utilitzar alt="" perquè les tecnologies d’assistència puguin ignorar-la. Ometre l’atribut no equival a deixar-lo buit.
Si una imatge és l’únic contingut d’un enllaç, l’alternativa n’ha d’expressar el propòsit. Si un text adjacent ja comunica la mateixa informació i la imatge no hi afegeix res, evita repetir-la innecessàriament. La mateixa fotografia pot necessitar alternatives diferents en pàgines amb objectius diferents.
Exemples de redacció
Exemples hipotètics: en una fitxa de mobiliari, «Taula plegable amb les potes recollides sota el tauler» explica una característica visible. En canvi, «taula barata comprar taula oferta millor taula» no descriu la imatge i en dificulta la lectura.
<img src="taula-plegada.jpg"
alt="Taula plegable amb les potes recollides sota el tauler">Per a un ornament sense informació:
<img src="ornament.svg" alt="">Aquests noms de fitxer són il·lustratius. Tria l’alternativa segons allò que existeix a la imatge real; no inventis materials, ubicacions o resultats que no es poden reconèixer o no estan documentats.
Gràfics, text en imatges i descripcions llargues
Un gràfic complex pot necessitar un alt que n’identifiqui la finalitat i una explicació propera amb les dades i conclusions rellevants. No intentis comprimir una taula sencera dins l’atribut. Oferir dades com a text permet consultar-les sense dependre de la imatge.
Si una imatge conté paraules essencials que no apareixen enlloc més, l’alternativa n’ha de conservar la informació. Sempre que sigui viable, publica el text com a HTML llegible en lloc d’incrustar-lo en una imatge. L’atribut title no substitueix l’alt.
Com revisar el resultat
Pregunta’t què es perd si la imatge desapareix. Llegeix el text alternatiu al costat del contingut proper i comprova si aporta informació útil, repeteix el mateix o deixa una acció sense explicar. No hi ha una longitud universal que garanteixi una bona alternativa: busca prou brevetat i context.
Revisa també que el fitxer carregui, tingui dimensions adequades i no distorsioni el contingut en mòbil. La fitxa d’a href explica els enllaços; la guia de contingut SEO ajuda a integrar text i imatges.
Estàs preparant una galeria d’imatges o un catàleg? A Disseny web Barcelona pots veure un exemple de galeria i conèixer com plantegem la presentació del contingut. T’ajudarà a valorar el conjunt de la pàgina, a més de redactar el text alternatiu de cada imatge.