Texto alternativo y contenido no textual

Cómo escribir textos alternativos útiles y decidir cuándo una imagen debe ser informativa, decorativa o funcional.

¿Cuánto sabes de Accesibilidad Web?

📘 Teoría

Claves teóricas

Reglas claras para tomar buenas decisiones con imágenes e iconografía.

Imagen decorativa

Si no aporta información, usa alt vacío para que no genere ruido en el lector.

Imagen informativa

Describe el dato o mensaje principal, no todos los detalles visuales.

Imagen funcional

Si la imagen actúa como botón o enlace, el texto alternativo debe expresar la acción.

Gráficas complejas

Complementa con resumen textual cercano al gráfico para cubrir contexto y conclusiones.

Iconos con texto visible

Si el texto ya explica la acción, no repitas información en alt o aria-label.

Error frecuente

Usar alt genérico como “imagen” o “foto” no aporta y empeora la experiencia.

Aplicación en proyectos reales

Cómo revisar una interfaz con muchas imágenes sin perder tiempo.

Haz inventario rápido: banners, avatares, iconos de acción, gráficas y miniaturas.

Asigna tipo de imagen y valida que el texto alternativo responde al propósito del componente.

En ecommerce, prioriza cards de producto, botones con icono y estados de carga o error.

Evita descripciones redundantes con el texto adyacente.
Incluye contexto cuando la imagen contiene datos críticos.
Asegura que iconos clicables tengan nombre accesible claro.
Revisa cambios de contenido dinámico para no dejar alt desactualizado.

Patrón de código

Ejemplos mínimos para distinguir imagen decorativa, informativa y funcional.

Tres casos de uso de alt

<img src="separador.svg" alt="" />
<img src="ventas-q1.png" alt="Ventas del Q1: crecimiento del 18%" />
<a href="/carrito" aria-label="Ir al carrito">
  <img src="icono-carrito.svg" alt="" />
</a>

1 Claves teóricas 2 Aplicación en proyectos reales 3 Patrón de código

🧪 Aprende probando

Ejemplo Demo guiada Prueba distintos textos alternativos y evalúa cuál aporta contexto útil.

⌄

🏁 Retos

Reto Reto práctico Corrige una implementación de imagen funcional con nombre accesible ambiguo.

⌄

🧰 Recursos

Enlaces útiles

W3C WAI Fundamentals MDN Accessibility WCAG 2.1 Quick Reference ARIA Authoring Practices Guide

Test

Comprueba tus conocimientos con un test sobre Accesibilidad Web.

Test de Accesibilidad Web

Recursos del curso 25

📘 Glosario 🎧 Audios 📄 PDFs 🖼️ Infografías 🎬 Vídeos 🔗 Enlaces 🧠 Flashcards

‹

Lección 03

HTML semántico para accesibilidad

Lección 05

Enlaces y botones con semántica correcta

›