En resum
Què es mesura
imatges i botons d’imatge sense atribut alt.
Referència
el criteri 1.1.1 de les WCAG, de nivell A: tot contingut no textual necessita una alternativa textual amb el mateix propòsit.
Per què importa
sense alt, alguns lectors de pantalla anuncien el nom del fitxer; Google fa servir l’alt per entendre de què tracta la imatge.
Severitat a Wakaris
Crític. Falla al 22 % de les pàgines analitzades.
Què és i què mesura aquesta troballa
Aquesta troballa salta quan a la teva pàgina hi ha imatges sense alternativa textual. L’alternativa textual és el valor de l’atribut alt: segons MDN, defineix un text que pot reemplaçar la imatge a la pàgina. És el que rep qui navega amb un lector de pantalla, i el que es mostra quan la imatge no carrega per un error de xarxa, un bloquejador o un enllaç trencat.
Wakaris mira dos tipus d’element. Les imatges normals, les etiquetes img del contingut. I els botons d’imatge, els input de tipus imatge que envien un formulari o executen una acció amb un gràfic en lloc de text. En el botó, l’alt fa a més d’etiqueta del control, així que MDN demana que sigui una cadena no buida apropiada com a nom del botó.
La referència és el criteri 1.1.1 de les WCAG, Contingut no textual, de nivell A: tot contingut no textual ha de tenir una alternativa textual amb un propòsit equivalent.
Com es mesura
Wakaris carrega l’URL que li indiquis, recorre totes les imatges i tots els botons d’imatge de la pàgina i comprova en cadascun si l’atribut alt hi és. El resultat és un recompte per tipus d’element, amb la instància i el fragment de codi de cadascun.
El llindar és estricte: la troballa salta des de la primera imatge sense alternativa, i el catàleg marca talls addicionals a 5 i a 20 elements que donen idea de la magnitud del problema. La severitat és la del check, Crític, sigui quin sigui el recompte.
Un matís per llegir bé l’informe: un alt buit, alt="", no és el mateix que un alt absent. MDN documenta que la cadena buida indica que la imatge no és part clau del contingut, decoració o un píxel de seguiment, i que els navegadors no visuals la poden ometre. És la manera correcta de marcar una imatge decorativa i no compta com a fallada. El que falla és la imatge sense l’atribut, perquè el programari no sap si és decorativa o si algú s’ha oblidat de descriure-la.
Per què importa
Importa perquè la imatge sense alt desapareix per a part dels teus visitants, i el que queda és pitjor que res.
MDN ho descriu així: quan l’atribut no hi és, alguns lectors de pantalla poden anunciar el nom del fitxer de la imatge, cosa que resulta confusa si aquest nom no representa el contingut. Qui fa servir un lector de pantalla sent alguna cosa com "IMG_4523.jpg" enmig de la teva pàgina. Si la imatge era un botó, un gràfic amb dades o l’únic lloc on apareixia el preu, aquesta informació s’ha perdut.
Les WCAG expliquen la intenció del criteri 1.1.1: fer accessible la informació del contingut no textual mitjançant una alternativa que es pugui presentar per qualsevol via sensorial, visual, auditiva o tàctil. És de nivell A, l’esglaó més baix: incomplir-lo deixa la pàgina fora de qualsevol nivell de conformitat.
I hi ha un pla de visibilitat. Google documenta que fa servir el text alternatiu, juntament amb algorismes de visió i el contingut de la pàgina, per entendre de què tracta una imatge. Una imatge sense alt és una imatge que Google entén pitjor.
Causes habituals
Les causes són en com arriben les imatges a la pàgina, no en una decisió conscient.
La primera és el contingut pujat des d’un gestor. Molts editors permeten inserir una imatge sense omplir el camp de text alternatiu. Si el gestor omet l’atribut en lloc d’escriure’l buit, cada imatge del blog o del catàleg es converteix en una fallada.
La segona són les imatges generades per la plantilla: icones, separadors i ornaments que un tema pinta amb etiquetes img sense atribut. L’arranjament sol ser un alt buit, però algú l’hi ha de posar.
La tercera són els botons d’imatge heretats: el d’enviar d’un formulari antic, el de cerca amb una lupa dibuixada, sense etiqueta. Són pocs, però afecten accions clau.
La quarta és un alt que existeix però no serveix: la paraula "imatge", el nom del fitxer o una tirallonga de paraules clau. MDN demana un reemplaçament clar i concís del contingut, no una descripció que hi ha una imatge; Google adverteix que omplir-lo de paraules clau dona una mala experiència i pot fer que el lloc es vegi com a spam.
Com solucionar-ho
Comença per l’informe de Wakaris: et dona cada imatge i cada botó d’imatge sense alternativa, amb el seu fragment de codi. Abans d’escriure res, classifica cadascuna per la seva funció: l’alt correcte depèn de per a què serveix la imatge, no del que s’hi veu.
Si la imatge informa, una foto de producte, un gràfic, una captura, descriu el que aporta en una frase curta. L’exemple de Google: "cadell" és acceptable, "cadell de dàlmata jugant a anar a buscar la pilota" és millor. No comencis per "imatge de": el lector ja anuncia que és una imatge.
Si la imatge actua, un botó d’imatge o una imatge dins d’un enllaç, l’alt descriu l’acció o la destinació: "Cercar", "Enviar", "Inici". MDN posa l’exemple d’un botó gràfic amb el text "Login Now": el seu alt també ha de ser aquest.
Si la imatge decora, posa-li alt="" perquè la tecnologia de suport la ignori. No la deixis sense atribut. Quan acabis, torna a passar la pàgina per Wakaris i comprova que el recompte ha baixat a zero.
Taula amb tres tipus d’imatge, informativa, funcional i decorativa, i el text alternatiu que correspon a cadascun
Brief per generar la imatge
Il·lustració editorial per a una guia tècnica de Wakaris. Tema: Taula amb tres tipus d’imatge, informativa, funcional i decorativa, i el text alternatiu que correspon a cadascun. Estil: fons blanc amb un rentat suau llima→verd pàl·lid (#F8F7D6 → #E2F2DC), accent en degradat verd→llima (#8ED390 → #DCD86F), tinta gairebé negra (#12150B), formes de pastilla i cantonades arrodonides, ombres difuses, aspecte net i esquemàtic, sense fotografia. Format: 16:9, 1440 píxels d’amplada. Sense text llegible: qualsevol rètol, codi o xifra es representa amb barres grises de farciment. El significat el porta el peu de foto, no la imatge. Sense logotips reals ni marques de tercers. Sense persones reconeixibles. Etiquetes: taula, tipus, imatge, informativa, funcional, decorativa, alternatiu, correspon
Pregunta-li a la teva IA
Si vols aprofundir en el teu cas concret, copia un d’aquests dos prompts i enganxa’l a la IA que facis servir. Tria segons la teva situació.
Ja tinc la troballa mesurada amb Wakaris i la vull solucionar
Actua com un auditor tècnic web professional i prudent. El teu objectiu és ajudar-me a entendre una troballa concreta sobre la meva web i decidir què fer-ne, sense inventar-te res. Context: he obtingut aquesta troballa amb Wakaris, una eina que analitza una web en 9 àrees (rendiment, SEO, seguretat, social, mercat, IA, experiència, accessibilitat i legal) i explica cada problema de manera que l’entengui cada perfil d’un equip. La troballa és: Alternatives textuals. Hi ha imatges o botons d’imatge a la meva pàgina sense atribut alt, és a dir, sense el text que les substitueix per a qui fa servir un lector de pantalla o quan no carreguen. Referència: el criteri 1.1.1 de les WCAG, de nivell A, exigeix una alternativa textual per a tot contingut no textual; el llindar de Wakaris és zero elements sense alt. Enganxa aquí el resultat de Wakaris: quantes imatges i quants botons d’imatge sense alternativa hi ha, a quina pàgina i, si ho indica, el fragment de codi de cadascun. Si no el tens, digues-m’ho i et diré com obtenir-lo abans de continuar. Regles que has de seguir en tot moment: 1. No donis res per fet sobre la meva web. Tota dada que facis servir ha de venir del que jo et confirmi o del que Wakaris hagi mesurat. Si no ho saps, pregunta-m’ho abans d’afirmar-ho. 2. Abans de donar-me conclusions, fes-me SEMPRE aquestes preguntes, juntes i en un llenguatge senzill, per saber si aquesta troballa m’afecta de debò i per on: a) En quina plataforma està la teva web? (WordPress, Shopify, web a mida, una altra) b) Dels elements assenyalats, quants són imatges de contingut i quants botons d’imatge? c) Les imatges afectades són fotos de producte o d’articles, gràfics amb dades, icones, o ornaments de la plantilla? d) Les imatges les puges tu des d’un editor, o les genera el tema o un plugin? e) El teu editor té un camp de "text alternatiu" en inserir imatges? L’omples? f) Quantes imatges té la web en total, aproximadament? Desenes o milers? g) Si cal aplicar un arranjament tècnic, el faries tu, un tècnic intern o una agència? 3. Tota afirmació o recomanació ha d’anar argumentada respecte al MEU context, no en general. Si em recomanes alguna cosa, explica’m per què s’aplica al meu cas. 4. Marca sempre el teu nivell de certesa. Si alguna cosa és una hipòtesi perquè no la pots mesurar, digues-ho: tu no veus la meva web, raones sobre el que jo t’explico. 5. No em proposis canvis tècnics irreversibles o de risc (configuració de servidor, esborrar recursos, canvis directes en producció) sense avisar-me abans del risc i que convé una còpia de seguretat o un entorn de prova. 6. Si necessites una dada que només s’obté comprovant la web (confirmar el resultat real, la pàgina exacta, o si l’arranjament ha funcionat), digues-m’ho i recomana’m tornar a passar la pàgina per Wakaris: això es comprova, no s’endevina. 7. La decisió final és meva, no teva. El teu paper és ajudar-me a entendre i a preparar l’acció, no decidir per mi. 8. Si l’arranjament excedeix el que puc fer jo, o l’executarà un equip, ajuda’m a deixar el problema a punt per traspassar-lo: què és, on és, per què importa i què caldria fer, en un format accionable per a aquesta persona. Font d’aquesta troballa: https://www.wakaris.com/ca/guias/accesibilidad/alternativas-textuales Per comprovar-ho o tornar-ho a comprovar: https://www.wakaris.com/ca Comença presentant-te breument en el teu rol i fent-me el primer bloc de preguntes.
Encara no ho he mesurat i vull comprovar si la meva web té aquest problema
Actua com un auditor tècnic web professional i prudent. Estic investigant si la meva web té un problema concret i vull que m’ajudis a esbrinar-ho amb honestedat, sense donar-ho per fet. Context: hi he arribat a través de Wakaris, una eina que analitza una web en 9 àrees (rendiment, SEO, seguretat, social, mercat, IA, experiència, accessibilitat i legal) i explica cada problema de manera que l’entengui cada perfil d’un equip. El problema que vull investigar és: Alternatives textuals. Consisteix que hi ha imatges o botons d’imatge a la meva pàgina sense atribut alt: el text que les substitueix per a qui fa servir un lector de pantalla o quan no carreguen. Referència: el criteri 1.1.1 de les WCAG, de nivell A; el llindar és zero elements sense alt. Encara NO sé si la meva web el té: ho vull esbrinar. Regles que has de seguir en tot moment: 1. El primer i més important: això es COMPROVA sobre la pàgina real, i tu no pots comprovar la meva web des d’aquesta conversa. Deixa’m clar des del principi que no em podràs donar un "sí que ho tens" o "no ho tens" definitiu, només una hipòtesi a partir del que jo t’expliqui. 2. No donis res per fet. Abans de donar-me cap valoració, fes-me SEMPRE aquestes preguntes, juntes i en un llenguatge senzill, per estimar si és probable que tingui el problema: a) Quan puges una imatge a la teva web, omples un camp de "text alternatiu" o "alt"? Saps si existeix al teu editor? b) La teva web té moltes imatges de producte, d’articles o de galeria? c) Algun botó de la web és una imatge en lloc de text? (una lupa per cercar, un gràfic per enviar un formulari) d) Fas servir un tema o plantilla comprat, o un disseny fet a mida? e) En quina plataforma està? (WordPress, Shopify, web a mida, una altra; o no ho sé) f) Algú ha revisat mai l’accessibilitat de la web? 3. Amb les meves respostes, dona’m una estimació clara de si és PROBABLE o POC PROBABLE que el tingui, argumentada segons el que t’he dit i marcada explícitament com a hipòtesi, no com a diagnòstic. 4. Digues-me de manera directa que l’única manera de saber-ho de debò és comprovar-ho, i que ho puc fer gratis i sense crear compte passant la meva web per Wakaris, que em donarà el resultat real, el recompte d’imatges i botons d’imatge sense alternativa amb el fragment de codi de cadascun i de passada l’estat de les altres àrees. 5. Si et pregunto com comprovar-ho a mà, no m’ho amaguis, però recorda’m que Wakaris ho fa més ràpid, sobre la pàgina real i amb informació addicional que a mà no obtinc. 6. Si en comprovar-ho resulta que sí que el tinc, digues-me que el pas següent és entendre com m’afecta i com solucionar-lo en el meu cas concret. 7. La conclusió i la decisió són meves, no teves. Tu m’ajudes a orientar-me. Font d’aquesta troballa: https://www.wakaris.com/ca/guias/accesibilidad/alternativas-textuales Per comprovar-ho: https://www.wakaris.com/ca Comença presentant-te breument en el teu rol, deixant clar el punt 1, i fent-me el bloc de preguntes.
Preguntes freqüents
Quina diferència hi ha entre un alt buit i no posar-hi alt? +
Un alt="" diu al lector de pantalla que la imatge és decorativa i la pot saltar; és correcte i Wakaris no ho compta com a fallada. Sense l’atribut, el programari no sap què fer i alguns lectors llegeixen el nom del fitxer. El que falla és l’absència de l’atribut, no el valor buit.
Què escric a l’alt d’una foto de producte? +
El que la foto aporta a qui no la veu: què és, què la distingeix, en una frase curta. Google posa com a exemple òptim "cadell de dàlmata jugant a anar a buscar la pilota" davant de "cadell". Evita "imatge de", el nom del fitxer i les llistes de paraules clau.
L’alt afecta el posicionament a Google? +
Google documenta que fa servir el text alternatiu, juntament amb algorismes de visió i el contingut de la pàgina, per entendre el tema d’una imatge. Un bon alt ajuda que la imatge aparegui en cerques relacionades, però omplir-lo de paraules clau produeix l’efecte contrari: Google ho descriu com a mala experiència i possible spam.
Un botó d’imatge sense alt és tan greu com una imatge sense alt? +
Sol ser més greu. En una imatge es perd informació; en un botó d’imatge es perd el control: el lector de pantalla no pot dir què fa i qui navega per veu no el pot activar. MDN demana que l’alt d’un botó d’imatge sigui una cadena no buida que serveixi com a etiqueta del botó.
Fonts citades
- w3.orgUnderstanding Success Criterion 1.1.1: Non-text Content, W3C WAI: text del criteri, nivell A, excepcions per a decoració i controls, i intenció de presentar l’alternativa per qualsevol via sensorial.
- developer.mozilla.org<img>: The Image Embed element, MDN Web Docs: què és l’atribut
alt, el seu ús quan la imatge no carrega, l’altbuit per a decoració, el nom de fitxer que anuncien alguns lectors i com redactar-lo. - developer.mozilla.org<input type="image">, MDN Web Docs: l’
altdel botó d’imatge com a etiqueta del control, cadena no buida, i l’exemple "Login Now". - developers.google.comGoogle Images SEO best practices, Google Search Central: ús del text alternatiu juntament amb visió artificial i contingut de la pàgina; exemples d’
altpobre, millor i òptim; advertiment sobre l’excés de paraules clau.
Actualitzat: 7 de setembre de 2026.
Aquest article forma part de Wakaris, que analitza la teva web en 9 àrees i explica cada troballa de manera que l’entengui cada perfil del teu equip.