Text alternatiu en imatges

Què és el text alternatiu?

El text alternatiu —o atribut alt— és una descripció textual que s’associa a cada imatge del web. Quan un usuari fa servir un lector de pantalla, aquest llegeix el text alternatiu en lloc de mostrar la imatge. Quan la imatge no es carrega per problemes de connexió, el navegador mostra el text alt com a substitut visual.

El criteri WCAG 1.1.1 exigeix que tot contingut no textual —imatges, icones, gràfics, botons amb imatge— tingui una alternativa textual que transmeti la mateixa informació o funció.

Per què és important?

Una imatge sense text alternatiu és literalment invisible per a una persona que usa un lector de pantalla. El lector pot llegir el nom del fitxer («IMG_3847.jpg») o simplement dir «imatge» sense cap context. En una galeria de productes, un portfolio o una pàgina de serveis, això fa que el contingut sigui completament inaccessible.

A més de l’accessibilitat, el text alternatiu té un impacte directe en el SEO: Google indexa les imatges a través de l’atribut alt. Una imatge ben descrita apareix als resultats de cerca d’imatges i reforça el posicionament de la pàgina.

Quins tipus d’imatges existeixen?

No totes les imatges necessiten el mateix tractament:

Imatges informatives

Son imatges que transmeten informació rellevant que no apareix en el text adjacent. Necessiten un alt descriptiu i concís que expliqui el contingut. Exemple: una foto del personal de l’empresa necessita el nom i càrrec de la persona.

Imatges decoratives

Son imatges purament estètiques que no afegeixen informació al contingut. Han de tenir l’atribut alt buit (alt=»») per indicar al lector de pantalla que les ignori. Si no poses l’atribut, el lector llegirà el nom del fitxer, que és pitjor.

Imatges funcionals

Son imatges que fan una funció, com un botó amb icona o un logo que és un enllaç a l’inici. El text alt ha de descriure la funció, no l’aparença. El logo que porta a l’inici hauria de tenir alt=»Tornar a l’inici» o alt=»Logo NomEmpresa — Inici».

Imatges de text

Si una imatge conté text visible (com un banner promocional amb text), el text alt ha de reproduir exactament el text de la imatge. Millor opció: usar text HTML real en lloc d’imatge amb text.

Exemples pràctics

<!– Imatge informativa –>
<img src=»equip.jpg» alt=»L’equip de webaccessible.cat: Rubèn, dissenyador web, i Maria, consultora d’accessibilitat»>

<!– Imatge decorativa –>
<img src=»separator.png» alt=»»>

<!– Logo que és un enllaç –>
<a href=»/»><img src=»logo.png» alt=»webaccessible.cat — Inici»></a>

<!– MAL: sense alt –>
<img src=»foto-hotel.jpg»>

<!– MAL: alt poc descriptiu –>
<img src=»foto-hotel.jpg» alt=»imatge»>

Com detectar imatges sense text alternatiu

Hi ha diverses maneres de detectar aquest error:

• La més ràpida és usar l’eina d’autoevaluació de webaccessible.cat: introdueix la URL del teu web i en pocs segons obtens un informe amb totes les imatges sense alt, la seva ubicació a la pàgina i la gravetat del problema.
• També pots usar l’extensió WAVE del navegador, que marca amb una icona vermella totes les imatges sense text alternatiu. O obrir les DevTools del navegador i buscar elements img sense l’atribut alt.

Com corregir-ho a WordPress

A WordPress, pots afegir el text alternatiu des de la Biblioteca de Medis: selecciona la imatge, busca el camp «Text alternatiu» i escriu la descripció. Aquest valor s’aplica a totes les instàncies d’aquella imatge al web.

Si uses el bloc d’imatge de Gutenberg o el mòdul d’imatge de Divi, trobaràs el camp d’alt text directament a les opcions del bloc. Per a imatges en blocs HTML, has d’afegir l’atribut manualment.

Una cosa important: WordPress permet deixar el camp alt en blanc per a imatges decoratives, però has d’assegurar-te que l’atribut alt=»» estigui present al codi HTML. Si el camp és buit però l’atribut no existeix, el comportament depèn del tema.

Quant temps triga a corregir-se?

Depèn del nombre d’imatges del web. Afegir alt text a imatges noves és ràpid —pocs minuts per imatge—. La feina important és l’auditoria inicial: identificar totes les imatges existents sense alt i prioritzar les més rellevants per als usuaris.

Si tens centenars d’imatges, pots prioritzar:

1. Primer les imatges de productes o serveis.
2. Després les imatges de contingut.
3. Finalment les imatges de fons o decoració.