Guía completa de accesibilidad para imágenes y texto alternativo (alt text)

Semántica, patrones de redacción, imágenes decorativas, diagramas, iconos de interfaz, redes sociales y normas a nivel de organización

Resumen general (puntos clave primero)

• El texto alternativo (alt) no trata de “describir la imagen en sí”, sino de verbalizar el papel que desempeña la imagen en ese contexto.
• Las imágenes decorativas deben usar alt="" (vacío) para que se omitan, y las imágenes significativas deben tener un texto alternativo basado en su propósito.
• En el caso de gráficos y diagramas, verbaliza los datos clave en el cuerpo del texto, y usa figure + texto en la página para explicaciones más largas.
• Para iconos de interfaz (UI), suele ser mejor exponer su función como etiqueta de texto mediante aria-label o una etiqueta visible en el botón, en lugar de usar alt.
• Esta guía incluye muchas plantillas listas para usar sobre cómo escribir texto alternativo para imágenes en redes sociales, fotos de productos en e-commerce, imágenes de perfil y más.

Lectores previstos (roles concretos): editores web, diseñadores UI/UX, desarrolladores front-end, creadores de contenido, responsables de redes sociales, operadores de comercio electrónico, personal de RR. PP./RR. HH./formación

Nivel de accesibilidad: compatible con WCAG 2.1 AA (1.1.1 Contenido no textual)

1. Introducción: el texto alternativo es como un “nombre de rol” para la imagen

Las imágenes a veces pueden ser más expresivas que el texto. Pero ese poder da por hecho que la gente puede verlas. Para personas ciegas o con baja visión, quienes usan lectores de pantalla o usuarios con conexiones lentas en las que las imágenes no se cargan, el contenido de la imagen, en la práctica, no existe.
El texto alternativo llena ese vacío para que las personas puedan comprender el mismo significado de la página, independientemente de cómo accedan a ella.
El texto alternativo no va de “explicar la imagen”, sino de expresar brevemente qué está aportando esa imagen dentro de la página: un pequeño gesto de amabilidad.

2. Principios básicos del texto alternativo: escribe según el propósito de la página

2.1 Describe el “significado que transmite”, no solo “qué se ve en la imagen”

Ejemplo:
Mal: alt="Foto de un hombre trabajando en un PC"
Bien: alt="Empleado trabajando de forma remota desde casa"
→ Si la página trata sobre “formas de trabajo”, deberías escribir el significado en ese contexto, no una descripción visual en bruto.

2.2 Piensa en categorías de imágenes

• Imágenes significativas: deben verbalizarse
• Imágenes decorativas: alt="" (vacío, para omitirlas)
• Iconos dentro de botones: usa una etiqueta de botón, no alt
• Gráficos y diagramas: pon los puntos clave en el cuerpo del texto
• Capturas de pantalla: resume el propósito y la acción de la interfaz, evitando descripciones excesivamente largas

2.3 Normalmente no necesitas decir “foto”, “ilustración”, etc.

Los lectores de pantalla no detectan automáticamente el tipo de medio, así que puedes mencionarlo si es relevante, pero si no aporta valor, puedes omitirlo sin problema.

3. Plantillas según tipo de imagen: patrones recomendados

3.1 Imágenes decorativas (fondos, líneas, patrones)

• El atributo alt debe estar vacío (alt="")
• También puedes usar role="presentation" o aria-hidden="true"

<img src="pattern.png" alt="" aria-hidden="true">

3.2 Fotos con significado (introductorias / explicativas)

Patrón:

Sujeto (qué muestra) + contexto (por qué se necesita esta imagen aquí)

Ejemplos:
alt="Empleado haciendo una presentación en una sesión interna de formación"
alt="Entrada accesible a un edificio con rampa y pasamanos"

3.3 Fotos de producto (e-commerce)

Patrón:

Nombre del producto + características clave (color / forma / textura / uso)

Ejemplos:
alt="Bolso tote de piel beige, ligero, con capacidad para documentos A4"
alt="Zapatillas de running para hombre en azul, con parte superior de malla transpirable"

3.4 Imágenes OGP / miniaturas para redes sociales

Patrón:

Tema del artículo + idea principal

Ejemplo:
alt="Introducción a la accesibilidad web: artículo que resume los fundamentos de color, tipografía y usabilidad"

3.5 Gráficos y diagramas

El texto alternativo debe ser breve; pon las explicaciones detalladas en el cuerpo del texto.

Mal:
alt="Gráfico de líneas. Una descripción larga de un gráfico que muestra el aumento de ventas de 2020 a 2024..."

Bien:
alt="Tendencia de ventas de 2020 a 2024 (tendencia al alza)"
→ Luego explica las cifras en el texto:

“Las ventas subieron de 1,2 millones en 2020, aumentando cada año hasta alcanzar 2,1 millones en 2024.”

3.6 Iconos de interfaz (buscar, cerrar, menú, etc.)

No uses alt para el significado: utiliza etiquetas visibles o aria-label en el botón.

Mal:

<img src="search.svg" alt="Buscar">

Bien:

<button aria-label="Buscar">
  <img src="search.svg" alt="">
</button>

3.7 Imágenes de perfil

Patrón:

Nombre de la persona + propósito (qué tipo de perfil es)

Ejemplos:
alt="Sasaki del equipo de comunicación (foto de perfil)"

4. Cuándo no debes escribir texto alternativo: puntos de decisión

1. La información ya está totalmente duplicada (ya se transmite en un pie de foto, encabezado o cuerpo de texto)
2. Contenido puramente decorativo (sin significado)
3. Efectos visuales como esquinas redondeadas, sombras, líneas divisorias
4. Texto dentro de la imagen que ya está escrito como texto real en la página

Para las imágenes que contienen texto, la regla es: proporciona siempre la misma información como texto seleccionable cercano. No hace falta pegar todo el texto en el alt.

5. Errores comunes con el texto alternativo y trampas habituales

6. Cómo se reparten el trabajo alt, pies de imagen y texto principal

6.1 Alt: “Declaración breve de propósito”

Ejemplo:
alt="Reunión de equipo en línea en curso"

6.2 Pie de imagen: “Detalles o comentarios adicionales”

Ejemplo:

“Miembros del equipo compartiendo su progreso semanal en una reunión en línea.”

6.3 Cuerpo del texto: “Puntos clave, cifras y razonamiento”

En particular con imágenes y gráficos complejos, es en el cuerpo del texto donde debes desarrollar los datos clave y las cifras.

7. Texto alternativo para capturas de pantalla: transmite la intención de la interacción

7.1 No necesitas describir cada píxel de la interfaz

Solo captura el punto clave.

Ejemplo:
alt="Captura de pantalla que muestra cómo activar las notificaciones en la pantalla de ajustes"

Si intentas describir cada pequeño detalle, es probable que generes confusión en lugar de claridad.

7.2 Describe el flujo en el cuerpo del texto

Utiliza el texto para estructurar:

• Paso 1
• Paso 2
• Ejemplo de error

Ese tipo de explicación estructurada se entiende mejor que meterlo todo en el alt.

8. Texto alternativo en redes sociales y anuncios

8.1 Redes sociales (X, Instagram, LinkedIn, etc.)

• Los límites de longitud del alt suelen estar entre 240 y 400 caracteres
• Incluye: tema de la imagen + qué obtiene la persona al verla
• Si la imagen tiene poco contraste o mucho texto, es un gesto amable acompañarla de una publicación de texto que contenga la misma información

Ejemplo:
alt="Diagrama de los cuatro principios de las WCAG 2.1: perceptible, operable, comprensible y robusto, cada uno con un breve resumen."

8.2 Banners publicitarios

• No es necesario decir explícitamente “este es un anuncio” en el alt
• Enfócate en una descripción clara y concisa del contenido y la oferta

Ejemplo:
alt="Anuncio de campaña de brazos para monitor diseñados para teletrabajo"

9. Convertir el texto alternativo en práctica a nivel organizativo: mantener una calidad uniforme

9.1 Plantillas

• “Sujeto + contexto”
• “Nombre del producto + características clave”
• “Propósito de la interacción”

9.2 Redacción coherente

• Evita empezar todo con “Foto de…” o “Imagen de…”
• Utiliza escrituras oficiales para nombres de personas, lugares y productos

9.3 Lista de comprobación rápida de 5 minutos antes de publicar

1. Todas las imágenes significativas tienen texto alternativo
2. Todas las imágenes decorativas usan alt=""
3. Ningún alt excesivamente largo duplica el texto cercano
4. Los gráficos y diagramas están explicados en el cuerpo del texto
5. Los iconos de interfaz tienen etiquetas correctas mediante texto o ARIA

10. Valor concreto para tu audiencia

• Personas ciegas o con baja visión: pueden entender la “historia detrás de la imagen”, no solo una nota visual vaga.
• Personas con diversidad cognitiva: un alt breve y contextual ayuda a comprender y evita la confusión de descripciones largas y densas.
• Personas mayores: las explicaciones textuales ayudan cuando las imágenes se ven con dificultad.
• Usuarios de buscadores: un buen alt se convierte en metadatos y mejora la capacidad de búsqueda de imágenes.
• Creadores y equipos: unas normas compartidas agilizan el trabajo y estabilizan la calidad.

11. Nivel de accesibilidad: lo que consigue este enfoque

• WCAG 2.1 AA: 1.1.1 Contenido no textual
  • Alt vacío para imágenes decorativas
  • Alt apropiado para imágenes significativas
  • Explicaciones textuales para gráficos/diagramas
  • Iconos de interfaz etiquetados correctamente (nombre, rol y valor expuestos)
• 1.4.5 Imágenes de texto: el texto dentro de las imágenes tiene alternativas textuales equivalentes
• 2.4.6 Encabezados y etiquetas: etiquetas claras para iconos y controles de la interfaz
• 4.1.2 Nombre, rol, valor: semántica correctamente expuesta para los elementos interactivos

12. Conclusión: las imágenes están completas cuando la amabilidad llena los huecos

1. El texto alternativo no es “una descripción del dibujo”, sino una descripción del papel que juega la imagen en el contenido.
2. Las imágenes decorativas usan alt=""; las imágenes significativas reciben un alt breve y claro.
3. Los gráficos y las capturas de interfaz funcionan mejor en combinación con explicaciones en el cuerpo del texto.
4. Cada canal —redes sociales, e-commerce, etc.— requiere sus propios patrones optimizados de alt.
5. Cuando estandarizas las reglas en tu organización, la calidad se estabiliza y las personas entienden el contenido con más facilidad.

Las imágenes hacen el texto más cálido y rico.
El texto alternativo es lo que permite que esa riqueza llegue a todo el mundo, en cualquier dispositivo y en cualquier situación.
Que tu sitio o app llegue a las personas con claridad y cuidado, sin importar cómo accedan. Y, si quieres, estaré encantado de ayudarte a conseguirlo.