WCAG 1.4.9: Imágenes de texto (sin excepción)

Qué significa esta regla

WCAG 1.4.9 — Imágenes de texto (sin excepción) es un criterio de nivel AAA que lleva los requisitos de WCAG 1.4.5 (Imágenes de texto, nivel AA) a su conclusión lógica. Mientras que 1.4.5 permite imágenes de texto cuando la imagen es visualmente personalizable o cuando una presentación visual específica es esencial, 1.4.9 elimina casi todas esas excepciones. Según este criterio, el texto debe representarse usando texto real —caracteres reales en el DOM— en lugar de imágenes rasterizadas o vectoriales que contengan texto.

La única excepción permitida en 1.4.9 es el texto que es puramente decorativo (que no tiene ningún valor informativo) o el texto que forma parte de un logotipo o nombre de marca donde el tratamiento visual específico es inseparable de la identidad que se transmite. En la práctica, esto significa que las capturas de pantalla de productos que contienen texto, los gráficos de banner con mensajes promocionales, las infografías con datos etiquetados, las imágenes de certificados, las tarjetas de citas al estilo de redes sociales y los documentos escaneados mostrados en la web deben ser reemplazados por, o al menos complementados con, texto real renderizado.

Se cumple 1.4.9 cuando cada fragmento de texto significativo visible para la persona usuaria es renderizado por el motor de texto del navegador —ya sea mediante nodos de texto HTML, contenido generado por CSS cuando corresponda, o elementos SVG <text>— de modo que el agente de usuario pueda redistribuir, redimensionar, recolorear y reajustar el espaciado. Se falla cuando se utiliza un recurso no textual —como un <img>, <canvas>, imagen de fondo CSS, SVG <image>, PDF incrustado u otro recurso no textual— para mostrar texto con significado, independientemente de que se proporcione o no un atributo alt. Ten en cuenta que un atributo alt bien redactado sí aborda 1.1.1 (Contenido no textual) pero no satisface 1.4.9, porque el texto alternativo no se representa visualmente y la imagen original sigue negando a las personas con visión la capacidad de adaptar la presentación visual del texto.

El criterio afecta a los siguientes patrones HTML comunes: elementos <img> cuyos archivos de origen contienen texto; propiedades CSS background-image que apuntan a imágenes con texto incrustado; elementos <canvas> en los que se ha dibujado texto mediante programación; elementos SVG en línea que usan <image> en lugar de <text>; y contenidos incrustados de terceros como iframes que contienen imágenes renderizadas. Incluso formatos técnicamente escalables como SVG se someten a escrutinio cuando el texto se incrusta como trazo o imagen en lugar de como nodo SVG <text>.

Por qué es importante

Según la Organización Mundial de la Salud, aproximadamente 2.2 mil millones de personas en todo el mundo tienen algún tipo de discapacidad visual. Un subconjunto significativo de estas personas —incluidas personas con baja visión, deficiencias en la visión del color, dislexia y otras discapacidades de lectura— dependen de herramientas de personalización de texto a nivel de navegador o sistema operativo para hacer que el contenido sea legible. Estas herramientas incluyen funciones de zoom, sustitución de fuentes, aumento del espaciado entre letras y palabras, esquemas de alto contraste o colores personalizados, y motores de texto a voz que operan sobre texto DOM renderizado. Cuando el texto se incrusta dentro de una imagen, todas y cada una de estas adaptaciones dejan de estar disponibles para ese contenido.

Considera a una persona con baja visión que ha configurado su navegador para representar el texto en una fuente sans serif grande con colores de alto contraste amarillo sobre negro. Cuando se encuentra con un banner promocional que dice "Summer Sale — 50% Off" incrustado en un JPEG, el navegador no puede recolorear ni redistribuir ese texto. La imagen puede escalarse con el zoom de la página, pero rápidamente se vuelve pixelada y más difícil de leer en lugar de más clara. Si el mismo mensaje se representara como texto HTML real con estilos CSS, las preferencias del navegador de la persona se aplicarían automáticamente y el contenido se mantendría nítido, ajustable y accesible.

Las personas con dislexia suelen instalar extensiones de navegador o aplicar hojas de estilo personalizadas que cambian las fuentes a tipografías amigables con la dislexia como OpenDyslexic, y aumentan el espaciado entre caracteres y palabras para reducir la saturación visual. Las imágenes de texto omiten por completo estas adaptaciones. Un botón de llamada a la acción representado como imagen en lugar de como elemento HTML con estilo es, en la práctica, invisible para estas personalizaciones, lo que puede ocultar elementos interactivos críticos a las personas que dependen de una representación personalizada.

Las personas con discapacidad motora que dependen de acceso por pulsadores o software de seguimiento ocular pueden usar herramientas de zoom de forma intensiva para alcanzar objetivos precisos. Las imágenes de texto borrosas y de baja resolución a niveles de zoom altos crean dificultades adicionales de puntería. Las personas usuarias de lectores de pantalla que conservan algo de visión pero aún usan un lector de pantalla para la comprensión también pueden encontrar que las imágenes de texto se anuncian de forma inconsistente dependiendo de si la persona autora recordó escribir un atributo alt completo, y ni siquiera un texto alt perfecto restaura la presentación visual que necesitan.

Más allá del acceso para personas con discapacidad, usar texto real en lugar de imágenes de texto conlleva beneficios significativos de SEO. Los rastreadores de motores de búsqueda indexan el texto del DOM de forma mucho más fiable de lo que pueden interpretar el contenido de una imagen, lo que significa que los titulares promocionales, nombres de productos y etiquetas de categoría incrustados en imágenes pueden recibir poco o ningún peso en el posicionamiento de búsqueda. El texto real también suele ser más ligero en tamaño de archivo para la mayoría de los casos de uso tipográfico, lo que mejora las puntuaciones de Core Web Vitals y reduce el consumo de ancho de banda para personas usuarias con conexiones de datos móviles, una preocupación particularmente importante en mercados donde la penetración de internet móvil es alta y los costos de datos siguen siendo un factor.

Reglas relacionadas de Axe-core

WCAG 1.4.9 requiere pruebas manuales porque ninguna herramienta automatizada puede determinar de forma fiable si una imagen contiene texto significativo, si ese texto es puramente decorativo o si su representación visual específica es esencial. Las siguientes consideraciones se aplican al usar axe-core o herramientas relacionadas:

• Inspección manual requerida (sin regla específica de axe): axe-core no incluye una regla que detecte automáticamente imágenes de texto según 1.4.9. Las herramientas automatizadas pueden marcar elementos <img> sin atributos alt (la regla image-alt) e imágenes de fondo que puedan tener significado, pero no pueden analizar el contenido de píxeles de una imagen para determinar si contiene texto, ni pueden juzgar si ese texto es decorativo. Una persona evaluadora debe inspeccionar visualmente cada imagen y gráfico de fondo en la página y decidir si transmite información textual que no está disponible también como texto real renderizado en el DOM. Esta es una limitación inherente del análisis estático: teóricamente podría aplicarse reconocimiento óptico de caracteres, pero produciría falsos positivos significativos en imágenes que contienen letras incidentales o tratamientos de logotipos.
• image-alt (regla de axe): Aunque no es una prueba directa de 1.4.9, la regla image-alt verifica que todos los elementos <img> tengan un atributo alt no vacío o estén marcados explícitamente como decorativos. Ejecutar esta regla ayuda a las personas auditoras a identificar imágenes que necesitan una inspección más detallada: cualquier imagen con un atributo alt descriptivo que se lea como una frase o contenga texto promocional es una fuerte señal de que la imagen en sí puede ser una imagen de texto y, por lo tanto, una candidata a 1.4.9.
• Auditoría de Lighthouse "Image elements do not have [alt] attributes": Similar a image-alt, esta comprobación de Lighthouse muestra imágenes que carecen por completo de descripción. Las personas evaluadoras deben revisar manualmente las imágenes marcadas para evaluar si representan texto.

Cómo hacer las pruebas

1. Ejecuta un análisis automatizado como primer paso. Abre axe DevTools, la extensión de navegador de Deque o Lighthouse en Chrome DevTools y ejecuta una auditoría de página completa. Revisa cualquier problema relacionado con imágenes que se haya marcado. Aunque ninguna regla automatizada cubre directamente 1.4.9, este paso muestra todos los elementos <img> e imágenes de fondo CSS para una revisión manual posterior. Exporta los resultados y anota cada imagen que tenga un atributo alt no vacío y con aspecto de frase, o que axe marque bajo image-alt.
2. Inspecciona visualmente todas las imágenes y gráficos de fondo. Recorre la página y examina cada imagen, fondo CSS, elemento canvas y gráfico SVG. Pregunta: ¿esta imagen contiene texto? Si la respuesta es sí, ¿ese texto es puramente decorativo (no añade información y podría eliminarse sin pérdida)? ¿Es un logotipo donde el estilo específico de las letras es inseparable de la identidad de la marca? Si ninguna de las excepciones se aplica, la imagen constituye un fallo de 1.4.9.
3. Desactiva las imágenes en el navegador. En Firefox, ve a about:config y establece permissions.default.image en 2, o usa una extensión como "Disable Images". Recarga la página. Cualquier información textual que desaparezca y no sea reemplazada por texto visible en el DOM (no solo un atributo alt anunciado por un lector de pantalla) representa un fallo de 1.4.9. Vuelve a activar las imágenes después de la prueba.
4. Aplica una hoja de estilo de usuario personalizada. En Firefox, coloca un archivo en chrome/userContent.css de tu perfil y añade una regla como * { font-family: OpenDyslexic, sans-serif !important; color: yellow !important; background-color: black !important; }. Recarga la página. El texto representado como HTML real adoptará estos estilos; el texto incrustado en imágenes no cambiará. Cualquier contenido textual que permanezca visualmente sin cambios e ilegible bajo estos estilos forzados es un fallo.
5. Haz pruebas con NVDA y Firefox. Navega por la página usando el modo de exploración de NVDA. Para cada imagen, toma nota de lo que NVDA anuncia. Si NVDA lee un atributo alt que contiene contenido textual sustancial, compara ese contenido con lo que se muestra visualmente en la imagen. La presencia de contenido textual significativo en un atributo alt es un fuerte indicador de que la imagen contiene texto, y confirma un fallo de 1.4.9 incluso si 1.1.1 se cumple técnicamente.
6. Haz pruebas con VoiceOver y Safari en macOS. Usa VO + Flecha derecha para desplazarte por el contenido. Escucha descripciones de imágenes que narren frases completas, encabezados o texto promocional. Contrasta con la inspección visual para confirmar que la fuente es una imagen y no texto real.
7. Haz zoom al 400%. WCAG 1.4.4 y 1.4.10 requieren que el texto siga siendo legible a niveles de zoom altos. Las imágenes de texto se pixelan cuando se amplían con el zoom del navegador; el texto real renderizado por el motor del navegador se mantiene nítido. Al 400% de zoom, cualquier texto que aparezca borroso o pixelado probablemente sea una imagen de texto y debe investigarse como un fallo de 1.4.9.

Cómo corregirlo

Banner promocional con texto incrustado — Incorrecto

<!-- A marketing banner where the headline and CTA are baked into the image.
     Even with alt text, users cannot customize the text rendering. -->
<a href='/sale'>
  <img src='/images/summer-sale-banner.jpg'
       alt='Summer Sale — Up to 50% off all products. Shop Now.'
       width='1200' height='400'>
</a>

Banner promocional con texto incrustado — Correcto

<!-- The banner uses a real background image for visual decoration,
     while all text is rendered as real HTML so users can resize,
     recolor, and reflow it independently. -->
<a href='/sale' class='sale-banner'>
  <!-- Background image set via CSS: .sale-banner { background-image: url(/images/summer-bg.jpg); } -->
  <h2 class='sale-banner__headline'>Summer Sale</h2>
  <p class='sale-banner__offer'>Up to 50% off all products</p>
  <span class='sale-banner__cta'>Shop Now</span>
</a>

Infografía con puntos de datos etiquetados — Incorrecto

<!-- An infographic where category labels and percentages are drawn
     into the PNG. Screen reader users hear the alt; sighted low-vision
     users cannot enlarge or recolor the labels. -->
<img src='/images/market-share-2024.png'
     alt='Market share 2024: Product A 42%, Product B 31%, Product C 27%'
     width='800' height='600'>

Infografía con puntos de datos etiquetados — Correcto

<!-- An accessible SVG chart where all labels are SVG <text> nodes.
     Users can zoom, reflow, and apply high-contrast themes to the text.
     An adjacent <table> provides the same data in tabular form. -->
<figure>
  <svg viewBox='0 0 800 400' role='img'
       aria-labelledby='chart-title chart-desc'>
    <title id='chart-title'>Market Share 2024</title>
    <desc id='chart-desc'>Pie chart: Product A 42%, Product B 31%, Product C 27%</desc>
    <!-- chart paths -->
    <text x='200' y='150' class='chart-label'>Product A — 42%</text>
    <text x='450' y='200' class='chart-label'>Product B — 31%</text>
    <text x='350' y='320' class='chart-label'>Product C — 27%</text>
  </svg>
  <figcaption>
    <details>
      <summary>View data as table</summary>
      <table>
        <caption>Market Share 2024</caption>
        <thead><tr><th>Product</th><th>Share</th></tr></thead>
        <tbody>
          <tr><td>Product A</td><td>42%</td></tr>
          <tr><td>Product B</td><td>31%</td></tr>
          <tr><td>Product C</td><td>27%</td></tr>
        </tbody>
      </table>
    </details>
  </figcaption>
</figure>

Imagen de fondo CSS que contiene un encabezado con mucho texto — Incorrecto

<!-- The page title is set as a CSS background image rather than real text.
     This is a common design pattern from the early 2000s image-replacement era
     that should not appear in modern codebases. -->
<h1 class='logo-header'></h1>
<!-- CSS: .logo-header {
       background: url('/images/page-title-about-us.png') no-repeat;
       width: 400px; height: 80px; display: block;
       text-indent: -9999px;
     } -->

Imagen de fondo CSS que contiene un encabezado con mucho texto — Correcto

<!-- Real text is rendered by the browser. Custom web fonts reproduce
     the desired typographic style without sacrificing adaptability.
     The background image, if needed at all, is purely decorative texture. -->
<h1 class='page-title'>About Us</h1>
<!-- CSS: .page-title {
       font-family: 'BrandTypeface', serif;
       font-size: 3rem;
       color: #1a1a2e;
       letter-spacing: 0.05em;
     } -->

Errores comunes

• Suponer que un atributo alt completo satisface 1.4.9. Proporcionar una alternativa textual completa en el atributo alt cumple con WCAG 1.1.1 pero no aporta nada a 1.4.9. Este criterio se refiere específicamente a que la representación visual del texto sea accesible a la personalización, no a los equivalentes programáticos para lectores de pantalla.
• Usar técnicas CSS de sustitución de imágenes (text-indent: -9999px o métodos de clip) en elementos <h1> a <h6>. Estas técnicas heredadas ocultan visualmente el texto real y lo sustituyen por una imagen de fondo, lo que significa que las personas con baja visión solo reciben la imagen mientras que las personas usuarias de lectores de pantalla solo reciben el texto oculto, una descoordinación que perjudica a ambos grupos de diferentes maneras.
• Exportar tipografía web como PNG o JPEG porque una fuente personalizada no está disponible como fuente web. Si una tipografía con licencia no puede servirse legalmente como fuente web, la solución correcta es negociar derechos de fuente web o elegir una tipografía alternativa, no rasterizar el texto en imágenes.
• Tratar los archivos SVG como inherentemente accesibles. Un SVG que incrusta texto como elementos <path> (salida común de herramientas de diseño gráfico como la opción "outline text" de Illustrator) es tan inaccesible como un PNG. El SVG debe usar elementos <text> para cumplir 1.4.9.
• Incrustar texto en elementos <canvas> sin un texto real alternativo. El contenido de canvas se rasteriza a nivel de píxel. Cualquier texto dibujado mediante ctx.fillText() no forma parte del DOM y no puede ser adaptado por los agentes de usuario. Se requiere una superposición de texto real o una alternativa.
• Dejar imágenes de documentos escaneados (PDFs renderizados como imágenes) sin capas de texto real basadas en OCR. Los documentos escaneados presentados en etiquetas <img> o como PDFs solo de imagen incumplen 1.4.9. Es necesario ejecutar OCR e incrustar una capa de texto seleccionable, o convertir el documento a HTML correctamente etiquetado.
• Usar imágenes de texto para datos dinámicos como precios, cantidades de stock o contenido generado por personas usuarias. Cada vez que un servidor genera una imagen que contiene datos textuales, esos datos quedan bloqueados en el formato de imagen. Los precios en listados de productos, la disponibilidad de asientos en plataformas de reservas y los marcadores de eventos deportivos en vivo deben representarse como texto real para que las personas puedan redimensionarlos y recolorearlos.
• Pasar por alto las imágenes de firmas de correo electrónico. Los equipos de marketing suelen crear bloques de firma como imágenes para preservar la identidad visual. Cuando esos correos se archivan y se enlazan desde sitios web, las imágenes de firma se convierten en contenido web sujeto a 1.4.9.
• Ignorar el contenido de widgets de terceros. Widgets de chat, insignias de prueba social y carruseles de reseñas proporcionados por proveedores externos pueden inyectar imágenes de texto en la página. Las personas propietarias del sitio siguen siendo responsables de la accesibilidad de todo el contenido de sus páginas; si un proveedor no puede ofrecer una representación basada en texto, se debe buscar otro proveedor.
• Confundir las excepciones de logotipo con excepciones generales de marca. La excepción de logotipo cubre solo el logotipo o la marca denominativa en sí, es decir, el nombre de la marca estilizado. No se extiende a eslóganes, etiquetas de navegación ni ningún otro texto que aparezca junto al logotipo en la misma imagen.

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 obligaciones obligatorias de accesibilidad web para una amplia gama de organizaciones que operan en Turquía. La circular exige que las entidades cubiertas se ajusten como mínimo a WCAG 2.1 nivel AA. Las entidades explícitamente cubiertas incluyen instituciones públicas y organismos gubernamentales, plataformas de comercio electrónico, bancos e instituciones financieras, hospitales y proveedores de atención sanitaria privados, empresas de telecomunicaciones con 200,000 o más abonados, agencias de viajes, empresas de transporte privado y escuelas privadas autorizadas por el Ministerio de Educación Nacional.

WCAG 1.4.9 es un criterio de nivel AAA y, por lo tanto, se sitúa por encima del mínimo obligatorio establecido por la Circular Presidencial 2025/10. Las entidades cubiertas no están legalmente obligadas a cumplir 1.4.9 para satisfacer las obligaciones básicas de la circular. Sin embargo, alcanzar el nivel AAA en los criterios aplicables demuestra un compromiso ejemplar con la inclusión y amplía significativamente el público que puede utilizar el servicio de forma efectiva.

Varios sectores cubiertos por la circular tienen incentivos especialmente fuertes para buscar el cumplimiento voluntario de 1.4.9. Las plataformas de comercio electrónico utilizan con frecuencia banners promocionales, gráficos de rebajas y encabezados de categorías de productos representados como imágenes, todos ellos patrones de fallo comunes de 1.4.9. Para las personas con baja visión o dislexia que dependen de la personalización del texto para tomar decisiones de compra, estos fallos se traducen directamente en conversiones perdidas y posible exposición legal en el marco más amplio de protección al consumidor y antidiscriminación de Turquía. Los bancos e instituciones financieras presentan de forma similar tasas de préstamos, resúmenes de cuentas y cuadros de comisiones; si cualquiera de esta información se incrusta en imágenes, las personas clientas con baja visión no pueden adaptar la presentación para leerla con confianza, lo que genera preocupaciones tanto en el marco de la circular como en las normas de protección de las personas consumidoras de servicios financieros. Los hospitales y proveedores de atención sanitaria que muestran instrucciones de dosificación, detalles de citas o información de pacientes en forma de imagen crean riesgos para la seguridad de las personas pacientes que no pueden adaptar la representación del texto.

Las organizaciones que buscan preparar sus propiedades digitales para futuras evoluciones normativas —o aquellas que persiguen contratos de contratación pública que requieren un liderazgo demostrado en accesibilidad— harían bien en auditar y remediar los fallos de 1.4.9 como parte de un programa integral de accesibilidad. El SDK de superposición de Accsible puede ayudar con la adaptación de texto en tiempo de ejecución para algunos escenarios heredados de imágenes de texto, pero la remediación permanente a nivel de código —reemplazar imágenes de texto con texto HTML real con estilos mediante CSS y fuentes web— sigue siendo la solución más sólida y duradera para la conformidad a largo plazo.