El text alternatiu (o alt text) és un dels elements més simples però més poderosos per aconseguir una web accessible. Encara que molts l’associen només amb el SEO, la seva veritable funció és molt més important: El text alternatiu accessible serveix per garantir que totes les persones, incloses les que fan servir lectors de pantalla, puguin comprendre el contingut visual d’una pàgina. Però… Com saber què posar i què no? Aquesta guia pràctica, amb exemples clars, us ho explica pas a pas.
Què és el text alternatiu i qui el “llegeix”?
El text alternatiu és un atribut HTML que descriu el contingut d’una imatge. El “llegeixen” principalment:
- Lectors de pantalla, usats per persones cegues o amb baixa visió.
- Motors de cerca, com Google, per indexar correctament la imatge.
- Navegadors, quan la imatge no es carrega.
També és requerit per normatives com les WCAG (Web Content Accessibility Guidelines) i la 549 a Europa.
Al codi HTML, es veu així:
La Regla d’Or: Context, Context i Context
L’error més gran en escriure text alternatiu és descriure la imatge de forma literal i aïllada. El context ho és tot. Pensa: Què aporta aquesta imatge al contingut? Què cal saber l’usuari si no la pot veure?
Per exemple:
- Incorrecte: “Una dona amb portàtil somrient.”
- Correcte: “Dissenyadora revisant prototip en portàtil durant reunió d’equip.”
La segona opció contextualitza la imatge en relació amb el contingut del lloc.
Cas 1: Imatges informatives
Aquestes són imatges que comuniquen informació essencial: fotos de persones, gràfics de dades, il·lustracions explicatives.
Exemple 1: Foto d’equip
- Incorrecte: “Cinc persones dempeus.”
- Correcte: “Equip d’atenció al client posant a l’oficina principal.”
Exemple 2: Gràfic de vendes
- Incorrecte: “Gràfic de barres de colors.”
- Correcte: “Gràfic que mostra augment del 30% en vendes trimestrals del 2024.”
Consell clau: Sigues concís, però informatiu. Si la imatge és molt complexa, acompanyeu-la d’una descripció llarga al text principal o amb ària-describedby.
Cas 2: Imatges Funcionals
Aquestes no mostren informació visual, sinó que executen accions: botons, icones, enllaços.
Aquí no es descriu allò que es veu, sinó allò que fa.
Exemple 1: Icona de cerca
- Incorrecte: “Lupa”
- Correcte: “Cerca”
Exemple 2: Botó amb icona de sobre
- Incorrecte: “Sobre”
- Correcte: “Enviar missatge”
*Feu servir frases com: “Anar a l’inici”, “Descarregar informe”, “Tancar menú”.
Cas 3: Imatges Decoratives
Si una imatge no aporta informació i només és per estètica o farciment visual, no ha de tenir text alternatiu.
Exemple: adorns de fons, vores florals, ombres.
El correcte és:
Aquest alt=”” indica al lector de pantalla que la podeu ignorar, evitant confusió o redundància.
Checklist Ràpid per Avaluar el teu Text Alternatiu
Abans de publicar, fes-te aquestes 5 preguntes:
- Descriu el propòsit de la imatge, no només la seva aparença?
- Té sentit dins del context del contingut?
- És breu però informatiu (màxim 125 caràcters)?
- Evita frases com “imatge de…” o “foto de…” innecessàries?
- És diferent segons el tipus d’imatge (informativa, funcional o decorativa)?
Si respons “sí” a totes, vas per bon camí!
Conclusió
El text alternatiu no és només una casella tècnica que cal omplir: és una oportunitat per a crear una web més inclusiva i, de passada, millorar el teu posicionament a cercadors. Pensa en el context, en la intenció i en la persona que no pot veure la imatge però sí que vol entendre-la.
