Escriu text alternatiu d'imatge amb sentit

Què comprova aquesta auditoria

Recorre cada element <img> de la pàgina i inspecciona l’atribut alt. La comprovació falla quan l’alt és un d’aquests: un nom de fitxer (IMG_2837.jpg, hero-final-v2.png), un placeholder genèric (image, picture, photo, img, imatge, foto), un sol caràcter (x, .) o comença per “Imatge de” / “Foto de”, perquè la tecnologia assistiva ja anuncia el rol com a “gràfic”, i posar-li al davant la descripció és soroll redundant.

Aquesta és la comprovació germana de text alternatiu d’imatges, que només comprova la presència. Aquesta avalua la qualitat.

Per què importa

Un alt dolent perjudica activament l’experiència.

Els usuaris de lector de pantalla el senten en lloc de veure la imatge. “IMG guió baix dos vuit tres set punt jay peg” és el pitjor resultat possible: la tecnologia assistiva llegeix el nom del fitxer lletra per lletra.
Els motors de cerca utilitzen l’alt com a senyal de posicionament per a la cerca d’imatges. Els noms de fitxer com a alt malbaraten l’espai.
Els extractors d’IA (LLM multimodals que escanegen una pàgina) citen el text alt quan descriuen la pàgina. Una pàgina on tots els alts són hero.jpg es percep com a feina mal feta tant pels humans com per la IA.

La solució no és “posar més paraules”. És “descriu la imatge, en context, en llenguatge clar”.

Com solucionar-ho

Obre cada imatge marcada i reescriu l’alt per descriure el que comunica la imatge en el context on apareix. La mateixa imatge en pàgines diferents pot tenir alts diferents, és normal.

Imatges decoratives (vores de logo, divisors, patrons del hero), alt buit:

<img src="/divider.svg" alt="">

alt="" indica als lectors de pantalla “salta’t això; no aporta significat”. No ometis l’atribut del tot: l’absència de alt fa que alguns lectors caiguin a anunciar el nom del fitxer.

Imatges informatives, descriu la funció o el contingut:

<!-- Malament -->
<img src="/charts/q3.png" alt="gràfic">
<img src="/team/jane.jpg" alt="IMG_2837.jpg">
<img src="/screenshot.png" alt="Imatge del dashboard">

<!-- Bé -->
<img src="/charts/q3.png" alt="Ingressos del Q3 puja un 38% respecte del Q2, impulsat pel tier enterprise">
<img src="/team/jane.jpg" alt="Jane Patel, CTO">
<img src="/screenshot.png" alt="Dashboard de MetricSpot mostrant cinc comprovacions correctes">

Imatges enllaçades, descriu el destí de l’enllaç, no la foto:

<a href="/docs/">
  <img src="/icons/book.svg" alt="Documentació">
</a>

Imatges complexes (gràfics, infografies), descriu les dades i enllaça fora:

<img src="/q3-funnel.png" alt="Embut de conversió: 1.000 visites → 230 registres → 28 de pagament (2,8%).">
<a href="/q3-funnel-full.txt">Taula de dades completa</a>

Patrons de CMS / framework.

WordPress, Biblioteca multimèdia → clica qualsevol imatge → camp “Text alternatiu”. Audita les entrades existents via Eines → Estat del lloc → Imatges sense text alternatiu.
Astro / Next.js Image, <Image alt={...} /> és obligatori al nivell de tipus; TypeScript no compilarà sense ell.
React, escriu una regla de lint petita (jsx-a11y/alt-text d’eslint-plugin-jsx-a11y) i fes fallar el CI quan faltin alts o siguin noms de fitxer.

Audita’t a tu mateix. Obre la consola de DevTools i executa:

[...document.images]
  .filter(i => !i.alt || /^(image|img|picture|photo|imatge|foto|\.|x)$/i.test(i.alt.trim()) || /\.(jpg|jpeg|png|gif|webp|svg)$/i.test(i.alt))
  .map(i => i.src);

Qualsevol cosa que aparegui a la llista és un alt brossa.

Preguntes freqüents

Cal que totes les imatges tinguin alt?

Sí, però pot ser buit (alt="") per a les decoratives. L’atribut en si ha d’estar present; l’absència és el que les eines marquen com a violació.

Quant d’extens ha de ser l’alt?

Tan llarg com calgui, tan curt com es pugui. Una frase és el típic; un gràfic pot necessitar-ne dues. Evita el “límit” dels 125 caràcters que pots veure citat: és un rumor sobre el buffer dels lectors de pantalla, no una restricció real.

He d’incloure la paraula “imatge”?

No. Els lectors de pantalla ja anuncien el rol (“gràfic”). Dir “Imatge d’un gos” fa que el lector digui “gràfic, imatge d’un gos”. Escriu simplement “Cadell de golden retriever mossegant una sabata”.