Texto Alternativo: Por Qué las Descripciones de Imágenes Importan para Accesibilidad y SEO

Introducción

El texto alternativo (alt text) proporciona una descripción textual de las imágenes para usuarios que no pueden verlas. Esto incluye personas usando lectores de pantalla, aquellos con imágenes deshabilitadas y rastreadores de motores de búsqueda. El Criterio de Éxito 1.1.1 de WCAG 2.2 (Contenido No Textual) es un requisito de Nivel A—el estándar de accesibilidad más fundamental.

Escribir texto alternativo efectivo es tanto un arte como una ciencia. Requiere entender el propósito de la imagen en contexto y comunicar ese propósito de manera concisa a usuarios que no pueden verla.

¿Qué Es el Texto Alternativo?

El Atributo HTML

El texto alternativo se agrega a las imágenes usando el atributo alt:

<img src="grafico.png" alt="Gráfico de barras mostrando 40% de aumento en ventas Q3 2024">

Tipos de Imágenes y Su Texto Alternativo

Tipo de Imagen	Enfoque de Alt Text	Ejemplo
Informativa	Describir contenido y significado	“Ícono de advertencia rojo”
Funcional	Describir acción/destino	“Enviar formulario”
Decorativa	Usar alt vacío (alt=“”)	Patrones de fondo
Compleja	Alt breve + descripción larga	Gráficos, diagramas
Texto en imágenes	Incluir todo el texto visible	Logos, banners

Por Qué Importa el Texto Alternativo

Quién Se Beneficia

1. Usuarios de lectores de pantalla - Consumidores principales del alt text
2. Usuarios con conexiones lentas - Ven descripción antes de cargar imagen
3. Motores de búsqueda - Entienden contenido de imagen para indexación
4. Usuarios con imágenes deshabilitadas - Aún obtienen el significado

Beneficios SEO

Impacto SEO del Alt Text:
┌─────────────────────────────────────────────────────────┐
│ Rankings de Búsqueda de Imágenes → Mejor alt = más tráfico │
│ Contexto de Página → Ayuda a Google entender contenido     │
│ Eficiencia de Rastreo → Texto es más rápido de procesar    │
│ Puntuación de Accesibilidad → Afecta Core Web Vitals       │
└─────────────────────────────────────────────────────────┘

Cumplimiento Legal

El texto alternativo es requerido bajo:

• WCAG 2.2 Nivel A (Criterio de Éxito 1.1.1)
• ADA (Ley de Estadounidenses con Discapacidades)
• Sección 508 (Requisitos federales de EE.UU.)
• EN 301 549 (Estándar europeo de accesibilidad)

Errores Comunes de Texto Alternativo

1. Atributos Alt Faltantes

<!-- MAL: Sin atributo alt -->
<img src="producto.jpg">

<!-- BIEN: Texto alt descriptivo -->
<img src="producto.jpg" alt="Audífonos inalámbricos azules con cancelación de ruido">

2. Descripciones Redundantes

<!-- MAL: Redundante "imagen de" -->
<img src="equipo.jpg" alt="Imagen de nuestro equipo en la oficina">

<!-- BIEN: Descripción directa -->
<img src="equipo.jpg" alt="Nuestro equipo colaborando alrededor de una pizarra">

3. Relleno de Palabras Clave

<!-- MAL: Spam SEO -->
<img src="zapatos.jpg" alt="Comprar zapatos online mejores zapatos baratos oferta zapatos">

<!-- BIEN: Descripción natural -->
<img src="zapatos.jpg" alt="Zapatos oxford de cuero negro para hombre">

4. Descripciones Genéricas

<!-- MAL: No es útil -->
<img src="datos.png" alt="Gráfico">

<!-- BIEN: Transmite los datos -->
<img src="datos.png" alt="Gráfico de líneas mostrando crecimiento de usuarios de 10K a 50K en 12 meses">

5. Imágenes Decorativas Sin Alt Vacío

<!-- MAL: Imagen decorativa con descripción -->
<img src="divisor.png" alt="Línea divisoria decorativa">

<!-- BIEN: Alt vacío para imágenes decorativas -->
<img src="divisor.png" alt="">

Escribiendo Buen Texto Alternativo

El Árbol de Decisión

Pregúntate:
│
├─ ¿Es esta imagen puramente decorativa?
│  └─ SÍ → Usar alt=""
│
├─ ¿La imagen contiene texto?
│  └─ SÍ → Incluir todo el texto en alt
│
├─ ¿Es la imagen un enlace o botón?
│  └─ SÍ → Describir destino/acción
│
├─ ¿El texto circundante describe la imagen?
│  └─ SÍ → Usar alt breve o alt=""
│
└─ De lo contrario → Describir contenido y propósito

Principios de Buen Texto Alternativo

1. Sé conciso - Usualmente 125 caracteres o menos
2. Sé específico - Incluye detalles relevantes
3. Transmite propósito - ¿Por qué está esta imagen aquí?
4. No empieces con “Imagen de…” - Los lectores de pantalla anuncian imágenes
5. Considera contexto - La misma imagen puede necesitar diferente alt text en diferentes lugares

Ejemplos por Contexto

Producto de E-commerce:

<img src="chaqueta.jpg" alt="Chaqueta de senderismo impermeable para mujer en verde bosque, tallas XS-XL">

Artículo de Noticias:

<img src="protesta.jpg" alt="Miles de manifestantes reunidos en plaza central con carteles de acción climática">

Paso de Tutorial:

<img src="paso3.png" alt="Hacer clic en el botón azul 'Guardar' en la esquina superior derecha">

Logo de Empresa:

<img src="logo.png" alt="Acme Corporation">

Probando el Texto Alternativo

Testing con Lectores de Pantalla

Prueba con lectores de pantalla reales:

• VoiceOver (macOS/iOS)
• NVDA (Windows, gratuito)
• JAWS (Windows)

Herramientas Automatizadas

Herramienta	Qué Verifica
axe DevTools	Alt faltante, alt vacío en imágenes funcionales
WAVE	Presencia de alt text y sugerencias de calidad
Lighthouse	Accesibilidad de imágenes en auditorías

Prueba Manual Rápida

1. Deshabilita imágenes en tu navegador
2. ¿Puedes entender el contenido de la página?
3. ¿La descripción de cada imagen tiene sentido?

Referencia Rápida

Hacer y No Hacer

Hacer	No Hacer
Describir el propósito de la imagen	Empezar con “Imagen de…”
Ser conciso pero completo	Rellenar con palabras clave
Usar alt vacío para imágenes decorativas	Dejar el atributo alt faltante
Incluir texto que aparece en imágenes	Usar genérico “foto” o “imagen”
Probar con lectores de pantalla	Asumir que tu alt text es suficiente

Artículos Relacionados

• Guía de Implementación de Alt Text - Técnicas detalladas
• Hub de Cumplimiento WCAG - Guía completa de accesibilidad
• SEO de Imágenes Explicado - Imágenes para optimización de búsqueda

---

Referencias

1. W3C - WCAG 2.2 SC 1.1.1 Contenido No Textual
2. W3C - Tutorial de Imágenes WAI
3. WebAIM - Texto Alternativo
4. MDN - Imágenes en HTML