Texto alternativo

¿Qué es el texto alternativo?

El texto alternativo (alt text) es una descripción textual de imágenes y otros elementos no textuales que permite a los usuarios con discapacidad visual entender el contenido y propósito de estos elementos. Se implementa mediante el atributo alt en HTML.

Relación con WCAG 2.1

El Criterio 1.1.1 (Contenido no textual) de WCAG 2.1 requiere que todo contenido no textual tenga una alternativa textual que sirva el mismo propósito. Este es un criterio de Nivel A, lo que significa que es obligatorio para cualquier nivel de conformidad.

Niveles de texto alternativo

1. Informativo: Describe el contenido y propósito de la imagen
2. Decorativo: Debe tener alt="" (vacío) para que los lectores de pantalla lo ignoren
3. Funcional: Describe la función del elemento (botones, enlaces)

Ejemplos prácticos

✅ Correcto: Imagen informativa

<!-- Imagen que aporta información -->
<img src="grafico-ventas.png" alt="Gráfico de barras mostrando ventas trimestrales: Q1 $50k, Q2 $75k, Q3 $90k, Q4 $120k">

✅ Correcto: Imagen decorativa

<!-- Imagen puramente decorativa -->
<img src="separador.png" alt="">

✅ Correcto: Imagen funcional (botón)

<!-- Botón con imagen -->
<button>
  <img src="icono-buscar.png" alt="Buscar">
</button>

❌ Incorrecto: Sin texto alternativo

<!-- Falta el atributo alt -->
<img src="logo.png">

❌ Incorrecto: Texto alternativo genérico

<!-- No describe el contenido específico -->
<img src="grafico.png" alt="Imagen">

Errores comunes

1. Usar "imagen de" o "foto de": Los lectores de pantalla ya anuncian que es una imagen
2. Texto alternativo demasiado largo: Debe ser conciso (idealmente menos de 125 caracteres)
3. Repetir el texto circundante: El alt debe complementar, no duplicar
4. Olvidar imágenes en CSS: Las imágenes de fondo decorativas no necesitan alt, pero las informativas sí
5. Usar el nombre del archivo: "imagen123.jpg" no es descriptivo

Buenas prácticas

• Sé específico: Describe el contenido y propósito
• Sé conciso: Máximo 125 caracteres recomendado
• Considera el contexto: El alt puede variar según dónde se use la imagen
• Para gráficos complejos: Usa descripción larga con longdesc o texto cercano
• Para imágenes decorativas: Siempre usa alt=""

Términos relacionados

• [[Contenido no textual]]
• [[Lector de pantalla]]
• [[WCAG 2.1]]
• [[Criterio 1.1.1]]
• [[Descripción larga]]