Text alternatiu d'imatges

Què comprova aquesta auditoria

Compta els elements <img> i quants tenen l’atribut alt no buit. Reporta la ràtio.

Per què importa

El text alternatiu serveix a tres audiències:

• Els lectors de pantalla llegeixen el text alternatiu en veu alta als usuaris cecs i amb visió baixa. Sense ell, l’usuari sent “imatge” o el nom del fitxer: inútil. Això també és legalment obligatori a la UE sota la Llei d’Accessibilitat (juny de 2025).
• Google Images posiciona les imatges parcialment en funció del text alternatiu. Un alt ben escrit és un dels senyals més forts per a la visibilitat a la cerca d’imatges.
• Els rastrejadors d’IA no poden (encara) entendre el contingut de les imatges de manera fiable. Depenen del text alternatiu per saber què mostra la imatge.

També n’hi ha un quart: quan una imatge no es carrega, l’alt és el que veu el teu usuari en lloc d’una icona d’imatge trencada.

Com solucionar-ho

Afegeix un alt descriptiu a cada imatge significativa:

<img src="/hero.webp" alt="Informe d'auditoria de MetricSpot mostrant una puntuació de 87/100 amb desglossament per mòdul" />

Regles:

• Descriu què hi ha a la imatge, no “imatge de”. Els lectors de pantalla ja anuncien “imatge”.
• Sigues específic. alt="informe" és inútil. alt="Informe PDF de MetricSpot amb puntuació 87" és útil.
• Salta el keyword stuffing. No escriguis alt="auditoria SEO eina SEO informe SEO". Google ho penalitza i els lectors de pantalla ho odien.
• Per a imatges decoratives, fes servir alt="" (buit, no absent). Els lectors de pantalla salten els alts buits. Això s’aplica a patrons de fons, icones de separadors, etc.

Ajudes per framework:

• Next.js <Image>: alt és una prop obligatòria.
• MDX/Markdown: l’alt va entre claudàtors: ![aquest és l'alt](imatge.jpg).

Preguntes freqüents

I els logos?

Els logos que també són enllaços (p. ex., logo a la capçalera enllaçant a la home) haurien de descriure la destinació: alt="Inici de MetricSpot" o alt="MetricSpot". Els logos solitaris al peu poden fer servir alt="Logo de MetricSpot".

Hauria d’afegir alt a imatges de fons CSS?

Les imatges de fons CSS no són accessibles als lectors de pantalla, en absolut. Si la imatge transmet informació, fes servir un <img> amb alt. Si és purament decorativa, el fons CSS està bé.

L’atribut title és un substitut?

No. title apareix com a tooltip en passar per sobre, però els lectors de pantalla l’ignoren en la majoria de casos i molts dispositius tàctils també. Fes servir sempre alt.