Texto en imágenes e imágenes de fondo: carteles, banners y CSS

En la primera lección presentamos el criterio 1.4.5 Imágenes de texto con una regla sencilla: si el texto se puede maquetar con HTML y CSS, no se pone en una imagen. Esta lección explica por qué esa regla protege a muchas más personas de las que usan lector de pantalla, qué casos quedan fuera, cómo resolver los dos patrones que más se repiten (carteles y banners) y qué ocurre con las imágenes que se colocan como fondo con CSS.

Por qué el texto en imagen excluye a tanta gente

Un buen alt resuelve el problema para quien usa lector de pantalla, pero no para el resto de personas que necesitan adaptar el texto:

• Baja visión con zoom. Al ampliar, el texto de una imagen se pixela y se vuelve borroso; el texto real se redibuja nítido a cualquier tamaño (1.4.4 Cambio de tamaño del texto).
• Reflujo. Con zoom al 400 % o en un móvil, el texto real se reorganiza en una columna; el de una imagen se queda como está y se hace diminuto u obliga a desplazarse en horizontal (1.4.10 Reajuste de los elementos).
• Personalización. No se puede cambiar la tipografía, el interlineado ni el espaciado (1.4.12 Espaciado del texto), ni los colores, ni usar el modo de lectura del navegador.
• Dificultades de lectura. Las herramientas de lectura en voz alta, los diccionarios y los resaltadores que usan muchas personas con dislexia no funcionan sobre una imagen.
• Traducción, búsqueda y copia. El traductor del navegador no traduce el texto de una imagen, Ctrl + F no lo encuentra y no se puede copiar un teléfono o una dirección.
• Mantenimiento. Cambiar una fecha obliga a rehacer la imagen.

Criterio	Nivel	Qué exige
1.1.1 Contenido no textual	A	Si hay texto en una imagen, la alternativa textual lo incluye
1.4.5 Imágenes de texto	AA	Usar texto real, salvo que la imagen sea personalizable o su presentación sea esencial
1.4.9 Imágenes de texto (sin excepciones)	AAA	Solo imágenes de texto para pura decoración o cuando la presentación es esencial

Lo que no cuenta como imagen de texto

No todo texto que aparece en una imagen incumple 1.4.5:

• Logotipos. El texto que forma parte de un logotipo o de un nombre de marca se considera esencial. El logotipo puede ser una imagen; su alt, eso sí, debe contener el nombre.
• Texto dentro de una fotografía con otro contenido visual significativo. La definición de «imagen de texto» de WCAG excluye expresamente este caso: el rótulo de una tienda en una foto de la calle, el dorsal de una corredora, una pancarta en una manifestación. No incumple 1.4.5, aunque si ese texto es relevante debe figurar en el alt (1.1.1).
• Presentación esencial. Una muestra de una tipografía, el facsímil de un documento histórico o la captura que documenta cómo era una pantalla concreta.
• Imágenes personalizables. Las que la persona puede adaptar a sus necesidades (tamaño, color, tipografía). Son muy raras.

Carteles, programas y banners

El cartel como único contenido

Es el patrón más repetido en las webs municipales: el programa de fiestas, el cartel de un concierto o la campaña de vacunación se publican solo como un JPG o un PDF escaneado. Toda la información (fechas, horarios, lugares, precios, cómo inscribirse) queda encerrada en una imagen. La buena práctica tiene tres partes:

1. Publica la información en HTML: título, fechas, horarios y lugares en una lista o una tabla, con los enlaces de inscripción y un contacto.
2. Usa el cartel como complemento visual, con un alt breve que lo identifique («Cartel de la Semana Cultural 2026, del 4 al 10 de mayo; programa completo a continuación»).
3. Haz lo mismo al difundirlo: en redes y boletines, el texto esencial acompaña siempre a la imagen, como verás en el curso sobre redes sociales, correo y documentos cotidianos.

Banners con texto

Los banners de portada combinan una foto con un mensaje («Rebajas de hasta el 50 %»). La solución es separar las dos capas: la foto como imagen (decorativa si no aporta nada) y el mensaje como texto real colocado encima con CSS.

<!-- Incorrecto: todo el mensaje está dentro del JPG
     y el alt solo recoge una parte -->
<a href="/rebajas">
  <img src="banner-rebajas.jpg" alt="Rebajas">
</a>

<!-- Correcto: foto decorativa y mensaje en texto real -->
<section class="banner">
  <img src="abrigo-invierno.jpg" alt="">
  <h2>Rebajas de hasta el 50 %</h2>
  <p>Hasta el 31 de enero. Envío gratuito.</p>
  <a href="/rebajas">Ver las rebajas</a>
</section>

Al colocar texto sobre una foto hay que garantizar el contraste en todas las zonas en las que puede caer el texto (1.4.3 Contraste (mínimo)), por ejemplo con una capa semitransparente o un fondo sólido detrás del texto. Lo verás en el curso de color, contraste y tipografía.

Imágenes de fondo con CSS

Las imágenes que se colocan con la propiedad background-image de CSS no forman parte del contenido: la tecnología de apoyo no las anuncia y no admiten alt. Para una imagen decorativa es perfecto. El problema aparece cuando la imagen de fondo transmite información: WCAG lo recoge como un fallo documentado de 1.1.1 (el fallo F3, usar CSS para incluir imágenes que transmiten información importante). Además, esas imágenes desaparecen cuando la persona desactiva los estilos, usa el modo de lectura o aplica sus propias hojas de estilo.

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

<!-- Incorrecto: la información solo está en la imagen de fondo -->
<div class="aviso-obras"></div>

<!-- Correcto: la información está en el HTML como texto -->
<div class="aviso-obras">
  <p>Corte de tráfico en la avenida de la Constitución
     del 3 al 7 de marzo.</p>
</div>

Si una imagen informa, ponla con <img> y su alt, o asegúrate de que la misma información está como texto en el HTML. Recurrir a role="img" con aria-label en el elemento con fondo funciona con los lectores de pantalla actuales, pero es más frágil y no ayuda a nadie más: déjalo como último recurso. Y cuando haya texto sobre una imagen de fondo, define también un color de fondo de respaldo, para que el texto siga siendo legible si la imagen no carga.

Imágenes adaptables con <picture>

Con <picture> y varias fuentes (<source>), el alt se escribe una sola vez, en el <img>, y vale para todas las versiones. Si el diseño usa recortes distintos (en el móvil solo se ve la cara de la persona; en el ordenador, el grupo completo), comprueba que la alternativa es válida para todas.

Capturas de texto: tablas, documentos y código

• Tablas en imagen: además del texto, se pierde la estructura de filas y columnas (1.3.1 Información y relaciones). Publícalas como tablas HTML, que estudiarás en el nivel 3.
• Documentos escaneados: un PDF que es solo una imagen no tiene texto que leer. Necesita reconocimiento de caracteres y etiquetado, como verás en el curso de PDF accesible del nivel 6; mejor aún, publica el contenido en HTML.
• Código y comandos: siempre como texto en un bloque <pre>, nunca como captura.

Resumen

• El texto en imagen afecta a quien amplía, usa reflujo, personaliza el texto, traduce o busca; el alt cubre 1.1.1, pero no 1.4.5.
• No son imágenes de texto los logotipos ni el texto que aparece dentro de una fotografía con otro contenido visual; sí lo son menús, titulares y banners maquetados como imagen.
• Carteles y programas: información en HTML y cartel como complemento con alt breve; banners: foto e información separadas, con buen contraste.
• Las imágenes de fondo con CSS son solo para decorar; si informan, se usa <img> con alt o texto en el HTML.
• Tablas, documentos escaneados y código se publican como texto real, no como capturas.