WCAG 1.4.5: Imágenes de texto

Qué significa esta regla

WCAG 1.4.5 — Imágenes de texto (Nivel AA) establece que, si se puede lograr la misma presentación visual usando texto real, se debe usar texto real en lugar de una imagen que contenga texto. Una imagen de texto es cualquier imagen en la que los caracteres de texto sean el contenido principal que se transmite; por ejemplo, un JPEG de un encabezado, un banner PNG con un eslogan o un logotipo GIF que deletrea un nombre de marca con una tipografía estilizada.

La distinción entre cumplimiento y fallo es sencilla: si la información pudiera transmitirse marcando caracteres reales en HTML y dándoles estilo con CSS para lograr el mismo aspecto, entonces usar una imagen en su lugar es un fallo. La regla no trata sobre imágenes decorativas o fotografías que contienen texto de forma incidental en la escena (como una señal de tráfico en una foto). Se centra en imágenes en las que el propio texto es el contenido previsto.

WCAG define dos excepciones oficiales en las que se permiten imágenes de texto:

• Excepción esencial: La presentación visual concreta es esencial para la información que se transmite. El ejemplo clásico es un logotipo, donde la representación específica de las formas de las letras es inseparable de la identidad de la marca. Un logotipo de empresa en el que las formas de las letras estilizadas SON la marca puede seguir siendo una imagen.
• Excepción personalizable: La imagen de texto puede personalizarse visualmente según los requisitos de la persona usuaria. Esto significa que la persona puede cambiar la fuente, el tamaño, el color y el fondo del texto en la imagen. En la práctica, esta excepción casi nunca se cumple en implementaciones reales, porque la mayoría de las imágenes no pueden volver a representarse dinámicamente según las preferencias de la persona usuaria.

Es importante señalar lo que este criterio NO exige: no prohíbe todas las imágenes que contienen texto. Una fotografía de un documento histórico, una captura de pantalla usada como evidencia o una imagen de un gráfico donde las etiquetas de los ejes forman parte de la visualización de datos no son el objetivo principal de esta regla, aunque el texto alternativo (WCAG 1.1.1) debe seguir describiendo su contenido. El foco está en los casos en los que una persona diseñadora decidió representar texto con estilo como una imagen ráster o vectorial por motivos puramente estéticos cuando CSS podría lograr el mismo resultado.

Los elementos HTML que con más frecuencia se ven implicados en fallos incluyen etiquetas <img> usadas para encabezados, banners, botones de llamada a la acción, etiquetas de navegación, citas destacadas de testimonios y texto promocional. Los archivos SVG que incrustan texto como trazados (en lugar de elementos <text>) también son motivo de preocupación, ya que esos caracteres no pueden ser seleccionados, redimensionados ni redistribuidos por el navegador.

Por qué es importante

Cuando el texto se incrusta dentro de una imagen ráster, se convierte en un mapa de bits fijo. El navegador puede escalar la imagen hacia arriba o hacia abajo, pero no puede redistribuir el texto, cambiar su fuente, aumentar su grosor ni alterar su contraste de color más allá de lo que ya está fijado en los píxeles. Esto crea barreras significativas para varios grupos de personas con discapacidad.

Las personas con baja visión suelen depender del zoom del navegador, del escalado de texto del sistema operativo o de software de magnificación dedicado. El texto real se escala con nitidez a cualquier nivel de zoom; una imagen de texto se vuelve borrosa y pixelada, lo que la hace ilegible con una gran magnificación. Aproximadamente 2,2 mil millones de personas en todo el mundo tienen algún tipo de discapacidad visual, y muchas de ellas usan el zoom o la magnificación como su estrategia principal de adaptación en lugar de un lector de pantalla.

Las personas con dislexia u otras discapacidades de lectura usan con frecuencia extensiones de navegador o tecnología de apoyo para sustituir fuentes, aumentar el espaciado entre letras y cambiar a esquemas de color de alto contraste. Ninguna de estas personalizaciones funciona en imágenes de texto: los píxeles son inmutables. Una persona que necesita OpenDyslexic o una fuente sans-serif con espaciado amplio simplemente no puede aplicarla a un encabezado representado como un PNG.

Las personas que dependen de esquemas de color personalizados, incluidas aquellas con fotofobia, trastornos de migraña o sensibilidades al contraste, pueden configurar su sistema operativo en modo de alto contraste o colores invertidos. El texto en CSS responde a estas anulaciones a nivel de sistema; el texto en imágenes no lo hace, y puede volverse aún más difícil de leer cuando los colores se invierten de forma inesperada.

Considere un escenario concreto: un sitio turco de comercio electrónico representa los encabezados de sus campañas promocionales como imágenes JPEG para preservar la fuente de exhibición personalizada usada en la guía de estilo de la marca. Una persona con baja visión amplía el navegador al 200%. Las imágenes de productos se escalan de forma aceptable, pero el encabezado de la campaña —una imagen— se convierte en una mancha borrosa de píxeles. La persona no puede leer la promoción y se pierde la oferta. Si la misma fuente se hubiera entregado mediante @font-face y se hubiera aplicado a un elemento <h2> real, el texto seguiría siendo nítido a cualquier nivel de zoom, porque la representación de fuentes vectoriales se escala de forma infinita.

Más allá de la accesibilidad, usar texto real tiene beneficios medibles de SEO. Los rastreadores de motores de búsqueda indexan directamente los nodos de texto; no pueden extraer de forma fiable el contenido textual de las imágenes sin OCR. Un encabezado incrustado en un PNG es invisible para el algoritmo de clasificación de Google. Cambiar a texto real puede mejorar la indexación de palabras clave y la clasificación de la página para el mismo contenido.

Reglas relacionadas de Axe-core

WCAG 1.4.5 requiere pruebas manuales. No existe una única regla automatizada de axe-core que detecte de forma fiable imágenes de texto, por las razones explicadas a continuación.

• Se requieren pruebas manuales: no hay una regla automatizada dedicada: Las herramientas automatizadas pueden detectar que existe un elemento <img> y que tiene un atributo alt, pero no pueden determinar si el contenido visual de esa imagen es principalmente texto representado. Hacerlo requeriría reconocimiento de imagen / OCR en cada imagen de la página, lo cual es computacionalmente costoso y dependiente del contexto. Una herramienta que analiza una página no puede distinguir entre una fotografía que contiene de forma incidental un cartel con palabras y un encabezado representado deliberadamente como imagen. Se requiere juicio humano para evaluar si una imagen determinada existe con el propósito de presentar texto estilizado que, en su lugar, podría marcarse como texto HTML real con estilo CSS.
• Señal parcial a partir de las reglas de contraste de color: Las reglas de axe-core como color-contrast no se activan sobre texto incrustado dentro de imágenes, porque operan sobre nodos de texto del DOM y valores de color CSS calculados. Si una imagen de texto tiene un contraste insuficiente, la comprobación automatizada de contraste la pasará por alto silenciosamente. Esto significa que las imágenes de texto pueden incumplir simultáneamente 1.4.5 y 1.4.3 (Contraste mínimo) sin ninguna alerta automatizada, una razón de peso para realizar auditorías manuales exhaustivas.
• Texto como trazados en SVG: Cuando un SVG exporta texto como contornos de trazados (elementos <path>) en lugar de elementos <text>, axe-core no tiene forma de saber que esos trazados forman palabras. Es necesaria una inspección manual del código fuente del SVG para determinar si el texto se ha convertido en contornos y si, en su lugar, debería ser un elemento <text> real con una fuente web aplicada.

Cómo hacer las pruebas

1. Ejecute un análisis automatizado como línea base. Use axe DevTools (extensión de navegador) o Lighthouse en Chrome DevTools para identificar cualquier problema marcado en la página. Aunque ninguna de las herramientas tiene una regla específica para 1.4.5, el resultado del análisis puede mostrar problemas relacionados, como falta de texto alt en imágenes o fallos de contraste de color en nodos de texto. Tome nota de cualquier imagen marcada: estas se convierten en candidatas para revisión manual.
2. Inspeccione visualmente todas las imágenes de la página. Abra la página en un navegador y revise de forma sistemática cada elemento <img>, cada SVG incrustado, cada imagen de fondo en CSS y cada elemento canvas. Pregúntese para cada uno: ¿el propósito principal de esta imagen es mostrar texto? Si la respuesta es sí, pase al siguiente paso.
3. Compruebe si CSS podría lograr el mismo resultado. Para cualquier imagen identificada en el paso 2, pregúntese: ¿podría una fuente web (@font-face) combinada con propiedades CSS (color, sombra de texto, espaciado entre letras, fondo degradado) producir un resultado visualmente equivalente? Si la respuesta es sí, la imagen de texto es un fallo, a menos que se aplique la excepción de logotipo.
4. Verifique las excepciones de logotipo. Si un sitio alega una excepción de logotipo, confirme que la imagen es realmente un logotipo de marca en el que el diseño de las formas de las letras es inseparable de la identidad de la marca, y no simplemente un encabezado compuesto con la fuente de la marca.
5. Pruebe con el zoom del navegador. Aumente el zoom del navegador al 200% y al 400% (usando Ctrl/Cmd + o la configuración del navegador). Observe si el texto de la página se mantiene nítido. Las imágenes de texto se volverán borrosas o pixeladas; el texto real permanecerá definido. Esta prueba verifica simultáneamente posibles incumplimientos de 1.4.5 y problemas relacionados con la redistribución (WCAG 1.4.4 y 1.4.10).
6. Inspeccione el código fuente del SVG. Haga clic con el botón derecho en cualquier SVG y elija "Ver código fuente" o use las herramientas de desarrollo del navegador para inspeccionar el DOM del SVG. Confirme que el contenido de texto usa elementos <text> en lugar de elementos <path> que trazan contornos de letras. Si todo el texto se ha convertido en trazados, el SVG tiene el mismo problema que una imagen ráster de texto.
7. Pruebe con un lector de pantalla para entender el impacto acumulado. Use NVDA con Firefox, VoiceOver con Safari en macOS/iOS o JAWS con Chrome. Navegue hasta las imágenes de texto y confirme que el atributo alt transmite con precisión el contenido textual. Aunque un atributo alt significativo cumple con WCAG 1.1.1 (Contenido no textual), no resuelve el fallo de 1.4.5: el texto sigue sin ser personalizable por la persona usuaria. Documente ambos problemas por separado.
8. Aplique una hoja de estilo de usuario personalizada o una extensión de navegador. Instale una extensión de navegador como Stylus o use la función integrada de hoja de estilo de usuario de Firefox para sustituir familias tipográficas y aumentar el tamaño de fuente globalmente. El texto real cambiará; el texto en imágenes no lo hará. Esto simula directamente lo que experimentan las personas con discapacidades de lectura cuando aplican sus fuentes preferidas.

Cómo corregir

Encabezado de banner decorativo — Incorrecto

<!-- Falla: Un encabezado de marketing se representa como JPEG para preservar una fuente personalizada -->
<div class='hero'>
  <img src='summer-sale-heading.jpg' alt='Summer Sale — Up to 50% Off' />
</div>

Encabezado de banner decorativo — Correcto

<!-- Corregido: La misma fuente personalizada se entrega mediante @font-face y se aplica a un encabezado real.
     El texto ahora es seleccionable, escalable y personalizable por la persona usuaria. -->
<style>
  @font-face {
    font-family: 'BrandDisplay';
    src: url('/fonts/brand-display.woff2') format('woff2');
    font-display: swap;
  }
  .hero-heading {
    font-family: 'BrandDisplay', sans-serif;
    font-size: clamp(2rem, 5vw, 4rem);
    color: #c0392b;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
  }
</style>

<div class='hero'>
  <h1 class='hero-heading'>Summer Sale — Up to 50% Off</h1>
</div>

SVG con texto convertido en contornos — Incorrecto

<!-- Falla: El texto se ha convertido en trazados en la exportación del SVG,
     lo que hace que los caracteres sean inaccesibles y no escalables como texto -->
<svg viewBox='0 0 400 80' xmlns='http://www.w3.org/2000/svg'>
  <!-- Docenas de elementos <path> que trazan las letras de 'Accsible' -->
  <path d='M10 60 L20 20 L30 60 ...' fill='#003087' />
</svg>

SVG con texto convertido en contornos — Correcto

<!-- Corregido: El SVG usa un elemento <text> real con una referencia a una fuente web.
     El texto ahora es indexable, seleccionable y escalable. -->
<svg viewBox='0 0 400 80' xmlns='http://www.w3.org/2000/svg'
     role='img' aria-label='Accsible'>
  <defs>
    <style>
      .svg-label {
        font-family: 'BrandDisplay', sans-serif;
        font-size: 48px;
        fill: #003087;
      }
    </style>
  </defs>
  <text class='svg-label' x='10' y='60'>Accsible</text>
</svg>

Imagen de fondo en CSS con texto incrustado — Incorrecto

<!-- Falla: La etiqueta del botón forma parte de la imagen de fondo,
     no es un nodo de texto real -->
<a href='/shop' class='cta-button'></a>

<style>
  .cta-button {
    display: block;
    width: 200px;
    height: 60px;
    background: url('shop-now-button.png') no-repeat center;
    background-size: cover;
  }
</style>

Imagen de fondo en CSS con texto superpuesto — Correcto

<!-- Corregido: El botón usa un nodo de texto real con estilo mediante CSS.
     La imagen de fondo es puramente decorativa (degradado o textura). -->
<a href='/shop' class='cta-button'>Shop Now</a>

<style>
  .cta-button {
    display: inline-block;
    padding: 1rem 2rem;
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    color: #ffffff;
    font-family: 'BrandDisplay', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    text-decoration: none;
    border-radius: 4px;
  }
</style>

Logotipo — Excepción aceptable

<!-- Aceptable: Un logotipo en el que el diseño específico de las formas de las letras
     ES la identidad de la marca. El texto alternativo transmite con precisión el contenido textual.
     CSS no puede replicar las formas de letras dibujadas a mano. -->
<a href='/' aria-label='Accsible — Home'>
  <img src='accsible-logo.svg'
       alt='Accsible'
       width='160'
       height='48' />
</a>

Errores comunes

• Usar un JPEG o PNG para encabezados de página porque el diseño de maqueta usa una fuente que no está disponible en Google Fonts: la corrección adecuada es alojar la fuente en el propio servidor como archivo WOFF2 usando @font-face, no incrustar el encabezado en una imagen.
• Exportar secciones completas de héroe como una única imagen plana desde herramientas de diseño como Figma o Photoshop, lo que incrusta todo el texto, los botones y las etiquetas en un único archivo ráster. Cada elemento de texto debe ser un nodo HTML independiente.
• Convertir texto de SVG en trazados durante la exportación para evitar dependencias de carga de fuentes en el servidor. Esto elimina la accesibilidad y la capacidad de búsqueda del texto. Use elementos <text> con una referencia a una fuente en CSS en su lugar.
• Colocar texto promocional o legal (como términos y condiciones, precios o reglas de concursos) dentro de una imagen para preservar un control preciso del diseño. Cualquier texto que las personas necesiten leer debe ser texto HTML real.
• Alegar la excepción de logotipo para cada pieza de texto de marca: la excepción se aplica solo al logotipo real, no a cualquier encabezado o etiqueta compuesta con la tipografía de la marca. Un encabezado en Helvetica Neue no es un logotipo.
• Proporcionar un atributo alt preciso y asumir que eso resuelve el fallo de 1.4.5: no es así. El texto alternativo cumple con WCAG 1.1.1 (Contenido no textual), pero no hace que el texto de la imagen sea personalizable por la persona usuaria, que es el requisito específico de 1.4.5.
• Usar elementos <canvas> de HTML5 para representar texto con estilo con fines visuales sin proporcionar una alternativa de texto real en el DOM. El texto representado en canvas tiene las mismas desventajas que el texto en imágenes.
• Incrustar texto en imágenes de vista previa de Open Graph o de compartición en redes sociales y olvidar que estas imágenes también aparecen en la página (por ejemplo, como imagen destacada en una entrada de blog). Si la imagen destacada es contexto decorativo, puede ser aceptable, pero si es el encabezado principal del artículo, es un fallo.
• Ignorar las plantillas de boletines por correo electrónico: aunque los clientes de correo electrónico están fuera del alcance de WCAG para navegadores, muchas organizaciones publican sus boletines como páginas web. El texto en imágenes de cabecera de correo electrónico incrustadas como contenido web sigue activando 1.4.5.
• Asumir que las imágenes de alta resolución Retina resuelven el problema: una imagen de texto con resolución 2× o 3× es más nítida que una imagen 1×, pero sigue incumpliendo 1.4.5 porque el texto continúa siendo no personalizable, no redistribuible e invisible para los motores de búsqueda y las tecnologías de apoyo.

Relación con la normativa de accesibilidad de Turquía

La Circular Presidencial 2025/10 de Turquía, publicada en el Boletín Oficial n.º 32933 el 21 de junio de 2025, establece normas obligatorias de accesibilidad web y móvil para una amplia gama de entidades que operan en Turquía. La circular hace referencia explícita a WCAG 2.2 como estándar técnico normativo, y la conformidad de Nivel AA —que incluye WCAG 1.4.5— es un requisito para ser elegible para el Erişilebilirlik Logosu (Logotipo de Accesibilidad), emitido por el Ministerio de Familia y Servicios Sociales (Aile ve Sosyal Hizmetler Bakanlığı). Este logotipo sirve como marca oficial de certificación que indica que un producto digital cumple los requisitos de accesibilidad definidos en la circular.

Las entidades cubiertas por la circular abarcan una amplia sección transversal de la economía digital de Turquía. Las instituciones públicas y los organismos gubernamentales de todos los niveles deben cumplirla, al igual que los bancos y las instituciones financieras regulados por la BDDK (Agencia de Regulación y Supervisión Bancaria). Los hospitales y proveedores de servicios sanitarios, tanto públicos como privados, están incluidos. En el sector privado, las plataformas de comercio electrónico, los operadores de telecomunicaciones con 200,000 o más personas suscriptoras, las agencias de viajes, las empresas de transporte privado y las escuelas privadas e instituciones educativas autorizadas por el Ministerio de Educación Nacional (MoNE / Milli Eğitim Bakanlığı) entran todas dentro del alcance de la circular.

Para estas organizaciones, WCAG 1.4.5 tiene implicaciones directas y prácticas. Muchos sitios web turcos de comercio electrónico e institucionales usan imágenes promocionales, banners con fuentes personalizadas y encabezados de campaña que incrustan texto como imágenes ráster, una práctica común en flujos de trabajo de diseño web que se originan en herramientas de diseño visual. En virtud de la Circular Presidencial, tales implementaciones constituyen una no conformidad de Nivel AA y descalificarían al sitio para obtener o mantener el Erişilebilirlik Logosu. Bancos que muestran tablas de tipos de interés como imágenes, hospitales que enumeran nombres de departamentos en banners PNG u operadores de telecomunicaciones que presentan tarifas promocionales como archivos de imagen planos estarían todos incumpliendo este criterio.

Las organizaciones que busquen cumplir deben auditar todas las imágenes de sus propiedades web en busca de contenido de texto incrustado, priorizar primero la conversión de las páginas de alto tráfico (páginas de inicio, páginas de productos, páginas de servicios de destino) y establecer un flujo de trabajo de diseño a desarrollo que prohíba la entrega de contenido textual dentro de archivos de imagen. Invertir en una estrategia de fuentes web usando @font-face con formato WOFF2 y valores adecuados de font-display permitirá a las personas diseñadoras lograr la misma riqueza tipográfica exigida por las directrices de marca, manteniendo al mismo tiempo el pleno cumplimiento tanto de WCAG 2.2 Nivel AA como del mandato de accesibilidad de Turquía de 2025.