Imágenes de Texto: Por Qué el Texto Real Supera a las Imágenes de Texto para Accesibilidad

Introducción

WCAG 1.4.5 (Imágenes de Texto) requiere que si las tecnologías utilizadas pueden lograr la presentación visual, se use texto para transmitir información en lugar de imágenes de texto. Esto significa usar texto HTML real con estilos CSS en lugar de incrustar texto dentro de imágenes.

Aunque las imágenes de texto pueden parecer una forma fácil de lograr tipografía específica, crean barreras significativas de accesibilidad y problemas de usabilidad para muchos usuarios.

Qué Requiere WCAG

1.4.5 Imágenes de Texto (Nivel AA)

Si las tecnologías utilizadas pueden lograr la presentación visual, se usa texto para transmitir información en lugar de imágenes de texto.

Excepciones:

• Personalizable: La imagen puede personalizarse visualmente según los requisitos del usuario
• Esencial: Una presentación particular del texto es esencial (como logos o marca)

Esto significa:

• Usar CSS para estilizar texto en lugar de crear texto como imágenes
• Se permiten logos que contienen texto
• El texto esencial para transmitir información (como nombres de marca) puede ser imágenes

Quién Se Beneficia

Tipo de Usuario	Beneficio
Usuarios con baja visión	Pueden agrandar texto sin pixelación
Usuarios de lectores de pantalla	El texto se lee naturalmente, no como “imagen”
Usuarios que necesitan alto contraste	Pueden aplicar hojas de estilo personalizadas
Usuarios con dislexia	Pueden cambiar fuentes para legibilidad
Motores de búsqueda	Pueden indexar y entender el contenido
Todos los usuarios	El texto carga más rápido, escala mejor

Problemas con Imágenes de Texto

1. No Se Pueden Redimensionar

<!-- MAL: El texto de imagen se pixela cuando se agranda -->
<img src="heading-text.png" alt="Bienvenido a Nuestro Sitio">

<!-- BIEN: El texto real escala suavemente -->
<h1 class="custom-heading">Bienvenido a Nuestro Sitio</h1>

2. No Se Pueden Personalizar

Los usuarios con discapacidades visuales a menudo usan configuraciones del navegador o extensiones para:

• Cambiar tamaños de fuente
• Aplicar temas de alto contraste
• Usar fuentes específicas (como OpenDyslexic)
• Ajustar espaciado de línea

Las imágenes de texto no pueden responder a estas preferencias del usuario.

3. Lentas para Cargar

<!-- Imagen de texto: 50-200KB por imagen -->
<img src="large-decorative-heading.png" alt="Oferta Especial">

<!-- Texto real con CSS: <1KB -->
<h2 class="decorative-heading">Oferta Especial</h2>

4. Problemas de Accesibilidad

• Los lectores de pantalla anuncian “imagen” en lugar de leer naturalmente
• No se puede seleccionar ni copiar
• Las herramientas de traducción no pueden procesar el texto
• No se puede buscar con búsqueda en página (Ctrl+F)

Escenarios Comunes

Usos Aceptables de Imágenes de Texto

Logos y Marca

<!-- Aceptable: El logo contiene presentación esencial de marca -->
<img src="company-logo.svg" alt="Acme Corporation">

Diagramas con Texto Esencial

<!-- Aceptable: El texto es parte del significado esencial del diagrama -->
<figure>
  <img src="flowchart.png" alt="Diagrama de flujo mostrando pasos...">
  <figcaption>Figura 1: Flujo de trabajo del proceso de aprobación</figcaption>
</figure>

Usos Inaceptables

Titulares y Texto de Cuerpo

<!-- MAL: Usando imagen para titular -->
<img src="headline.png" alt="Nuestros Servicios">

<!-- BIEN: Texto real con estilo personalizado -->
<h2 class="services-heading">Nuestros Servicios</h2>

Botones y Navegación

<!-- MAL: Botón de imagen -->
<button><img src="submit-button.png" alt="Enviar"></button>

<!-- BIEN: Botón de texto estilizado -->
<button class="submit-btn">Enviar</button>

Secciones de Llamada a la Acción

<!-- MAL: Imagen de banner con texto -->
<img src="sale-banner.png" alt="50% Descuento en Todo - Compra Ahora">

<!-- BIEN: HTML con estilo CSS -->
<section class="sale-banner">
  <h2>50% Descuento en Todo</h2>
  <a href="/tienda" class="cta-button">Compra Ahora</a>
</section>

Alternativas CSS a Imágenes de Texto

Fuentes Personalizadas

/* Usar web fonts para tipografía personalizada */
@font-face {
  font-family: 'CustomHeading';
  src: url('/fonts/custom-heading.woff2') format('woff2');
  font-display: swap;
}

.decorative-heading {
  font-family: 'CustomHeading', serif;
  font-size: 3rem;
}

Efectos de Texto

/* Texto con gradiente */
.gradient-text {
  background: linear-gradient(45deg, #e66465, #9198e5);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Sombra de texto para profundidad */
.shadow-text {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

/* Texto con contorno */
.outline-text {
  -webkit-text-stroke: 2px #000;
  color: transparent;
}

Tipografía Responsiva

/* Texto que escala con el viewport */
.hero-heading {
  font-size: clamp(2rem, 5vw, 5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}

Probando Imágenes de Texto

Prueba Manual Rápida

1. Haz clic derecho en el texto de la página
2. Si aparece “Guardar imagen” o “Copiar imagen”, es probablemente una imagen de texto
3. Intenta seleccionar el texto - si no puedes resaltarlo, puede ser una imagen
4. Usa “Inspeccionar Elemento” del navegador para verificar si es <img> o texto

Qué Verificar

• [ ] Los titulares usan elementos <h1>-<h6> reales, no imágenes
• [ ] El contenido del cuerpo es texto real, no imágenes
• [ ] Los botones contienen texto, no etiquetas de imagen
• [ ] Los efectos de texto decorativo usan CSS, no imágenes
• [ ] Los logos son las únicas imágenes que contienen texto (y tienen alt text apropiado)

Herramientas para Pruebas

• WAVE: Resalta imágenes y su texto alternativo
• axe DevTools: Reporta problemas de imágenes de texto
• DevTools del navegador: Inspeccionar elementos para verificar texto vs imágenes
• Lector de pantalla: Escuchar lectura natural de texto vs anuncios de “imagen”

Resumen de Mejores Prácticas

Hacer	No Hacer
Usar CSS para estilizar texto	Crear imágenes con texto
Usar web fonts para tipografía personalizada	Capturar texto para fuentes únicas
Estilizar botones con CSS	Usar botones de imagen
Usar iconos SVG con texto separado	Incrustar texto en iconos
Mantener logos como únicas imágenes con texto	Usar imágenes para titulares

Artículos Relacionados

• Guía de Implementación de Imágenes de Texto - Patrones detallados
• Guía de Texto Alternativo - Accesibilidad de imágenes
• Hub de Cumplimiento WCAG - Todos los evaluadores de accesibilidad

---

Referencias

1. W3C - WCAG 2.2 SC 1.4.5 Images of Text
2. W3C - C22 Using CSS to control visual presentation of text
3. WebAIM - Alternative Text
4. MDN - Web fonts