Text en imatges i imatges de fons: cartells, bàners i CSS

A la primera lliçó vam presentar el criteri 1.4.5 Imatges de text amb una regla senzilla: si el text es pot maquetar amb HTML i CSS, no es posa en una imatge. Aquesta lliçó explica per què aquesta regla protegeix moltes més persones que les que fan servir un lector de pantalla, quins casos en queden fora, com resoldre els dos patrons que més es repeteixen (cartells i bàners) i què passa amb les imatges que es col·loquen com a fons amb CSS.

Per què el text en imatge exclou tanta gent

Un bon alt resol el problema per a qui fa servir un lector de pantalla, però no per a la resta de persones que necessiten adaptar el text:

• Baixa visió amb zoom. En ampliar, el text d'una imatge es pixela i es torna borrós; el text real es redibuixa nítid a qualsevol mida (1.4.4 Canvi de mida del text).
• Reajustament. Amb zoom al 400 % o en un mòbil, el text real es reorganitza en una columna; el d'una imatge es queda com està i es fa diminut o obliga a desplaçar-se horitzontalment (1.4.10 Reajustament dels elements).
• Personalització. No es pot canviar la tipografia, l'interlineat ni l'espaiat (1.4.12 Espaiat del text), ni els colors, ni fer servir el mode de lectura del navegador.
• Dificultats de lectura. Les eines de lectura en veu alta, els diccionaris i els marcadors que fan servir moltes persones amb dislèxia no funcionen sobre una imatge.
• Traducció, cerca i còpia. El traductor del navegador no tradueix el text d'una imatge, Ctrl + F no el troba i no es pot copiar un telèfon o una adreça.
• Manteniment. Canviar una data obliga a refer la imatge.

Criteri	Nivell	Què exigeix
1.1.1 Contingut no textual	A	Si hi ha text en una imatge, l'alternativa textual l'inclou
1.4.5 Imatges de text	AA	Fer servir text real, tret que la imatge sigui personalitzable o que la seva presentació sigui essencial
1.4.9 Imatges de text (sense excepcions)	AAA	Només imatges de text per a pura decoració o quan la presentació és essencial

El que no compta com a imatge de text

No tot el text que apareix en una imatge incompleix 1.4.5:

• Logotips. El text que forma part d'un logotip o d'un nom de marca es considera essencial. El logotip pot ser una imatge; el seu alt, això sí, ha de contenir el nom.
• Text dins d'una fotografia amb un altre contingut visual significatiu. La definició d'«imatge de text» de les WCAG exclou expressament aquest cas: el rètol d'una botiga en una foto del carrer, el dorsal d'una corredora, una pancarta en una manifestació. No incompleix 1.4.5, tot i que si aquest text és rellevant ha de figurar a l'alt (1.1.1).
• Presentació essencial. Una mostra d'una tipografia, el facsímil d'un document històric o la captura que documenta com era una pantalla concreta.
• Imatges personalitzables. Les que la persona pot adaptar a les seves necessitats (mida, color, tipografia). Són molt rares.

Cartells, programes i bàners

El cartell com a únic contingut

És el patró més repetit als webs municipals: el programa de festes, el cartell d'un concert o la campanya de vacunació es publiquen només com un JPG o un PDF escanejat. Tota la informació (dates, horaris, llocs, preus, com inscriure-s'hi) queda tancada en una imatge. La bona pràctica té tres parts:

1. Publica la informació en HTML: títol, dates, horaris i llocs en una llista o una taula, amb els enllaços d'inscripció i un contacte.
2. Fes servir el cartell com a complement visual, amb un alt breu que l'identifiqui («Cartell de la Setmana Cultural 2026, del 4 al 10 de maig; programa complet a continuació»).
3. Fes el mateix quan el difonguis: a les xarxes i als butlletins, el text essencial acompanya sempre la imatge, com veuràs al curs sobre xarxes socials, correu i documents quotidians.

Bàners amb text

Els bàners de portada combinen una foto amb un missatge («Rebaixes de fins al 50 %»). La solució és separar les dues capes: la foto com a imatge (decorativa si no aporta res) i el missatge com a text real col·locat a sobre amb CSS.

<!-- Incorrecte: tot el missatge és dins del JPG
     i l'alt només en recull una part -->
<a href="/rebajas">
  <img src="banner-rebajas.jpg" alt="Rebaixes">
</a>

<!-- Correcte: foto decorativa i missatge en text real -->
<section class="banner">
  <img src="abrigo-invierno.jpg" alt="">
  <h2>Rebaixes de fins al 50 %</h2>
  <p>Fins al 31 de gener. Enviament gratuït.</p>
  <a href="/rebajas">Veure les rebaixes</a>
</section>

En col·locar text sobre una foto cal garantir el contrast a totes les zones on pot caure el text (1.4.3 Contrast (mínim)), per exemple amb una capa semitransparent o un fons sòlid darrere del text. Ho veuràs al curs de color, contrast i tipografia.

Imatges de fons amb CSS

Les imatges que es col·loquen amb la propietat background-image de CSS no formen part del contingut: la tecnologia de suport no les anuncia i no admeten alt. Per a una imatge decorativa és perfecte. El problema apareix quan la imatge de fons transmet informació: les WCAG ho recullen com un error documentat de 1.1.1 (l'error F3, fer servir CSS per incloure imatges que transmeten informació important). A més, aquestes imatges desapareixen quan la persona desactiva els estils, fa servir el mode de lectura o aplica els seus propis fulls d'estil.

/* CSS */
.aviso-obras { background-image: url(corte-trafico.png); }

<!-- Incorrecte: la informació només és a la imatge de fons -->
<div class="aviso-obras"></div>

<!-- Correcte: la informació és a l'HTML com a text -->
<div class="aviso-obras">
  <p>Tall de trànsit a l'avinguda de la Constitució
     del 3 al 7 de març.</p>
</div>

Si una imatge informa, posa-la amb <img> i el seu alt, o assegura't que la mateixa informació és com a text a l'HTML. Recórrer a role="img" amb aria-label a l'element amb fons funciona amb els lectors de pantalla actuals, però és més fràgil i no ajuda ningú més: deixa-ho com a últim recurs. I quan hi hagi text sobre una imatge de fons, defineix també un color de fons de reserva, perquè el text continuï sent llegible si la imatge no es carrega.

Imatges adaptables amb <picture>

Amb <picture> i diverses fonts (<source>), l'alt s'escriu una sola vegada, a l'<img>, i val per a totes les versions. Si el disseny fa servir retalls diferents (al mòbil només es veu la cara de la persona; a l'ordinador, el grup complet), comprova que l'alternativa sigui vàlida per a tots.

Captures de text: taules, documents i codi

• Taules en imatge: a més del text, es perd l'estructura de files i columnes (1.3.1 Informació i relacions). Publica-les com a taules HTML, que estudiaràs al nivell 3.
• Documents escanejats: un PDF que és només una imatge no té text per llegir. Necessita reconeixement de caràcters i etiquetatge, com veuràs al curs de PDF accessible del nivell 6; encara millor, publica el contingut en HTML.
• Codi i ordres: sempre com a text en un bloc <pre>, mai com a captura.

Resum

• El text en imatge afecta qui amplia, fa servir el reajustament, personalitza el text, tradueix o cerca; l'alt cobreix 1.1.1, però no 1.4.5.
• No són imatges de text els logotips ni el text que apareix dins d'una fotografia amb un altre contingut visual; sí que ho són els menús, els titulars i els bàners maquetats com a imatge.
• Cartells i programes: informació en HTML i cartell com a complement amb alt breu; bàners: foto i informació separades, amb un bon contrast.
• Les imatges de fons amb CSS són només per decorar; si informen, es fa servir <img> amb alt o text a l'HTML.
• Les taules, els documents escanejats i el codi es publiquen com a text real, no com a captures.