Rullst AcademyRullst Academy/Lección
HTML semántico y accesibilidad · Lección 05 / 10

Una imagen, un propósito

La información importante de una imagen también debe llegar a quien no la ve.

Rutas de aprendizaje14 min

Vamos a descubrir juntos

  1. 1

    Img es un elemento vacío: tiene atributos, pero no cierre </img>. Src apunta al archivo; alt aporta una alternativa textual. La imagen del kit se llama route.svg y va junto a index.html.

  2. 2

    La imagen informativa muestra tres etapas: idea → prueba → revisión. Un alt útil comunica ese proceso. “Imagen bonita” no sustituye la información. El contexto determina cuánto explicar; los detalles complejos pueden necesitar explicación cercana.

  3. 3

    Si una imagen es solo decorativa, alt="" indica que puede omitirse en la lectura. Omitir alt es distinto: puede anunciarse el archivo sin contexto. Si una imagen es el único contenido de un enlace, describe el destino o función.

  4. 4

    Figure y figcaption asocian una imagen con una leyenda, pero la leyenda no elimina automáticamente la necesidad de alt. La vista previa acepta solo route.svg del kit; otras imágenes aparecen como sustitutos textuales. Prueba tus archivos localmente y revisa su propósito.

Taller de HTML: escribir, observar, revisar

Edita HTML en “Mis archivos y GitHub” y actualiza la vista previa. Usa elementos de estudio y estilos de lectura: scripts, CSS propio y navegación externa quedan desactivados. Solo route.svg del kit se muestra como imagen.

Ir a mi HTML

Estas comprobaciones no son validación completa de HTML ni auditoría WCAG. Revisa contenido, teclado, zoom y tecnologías de asistencia; registra lo pendiente.

Enlaces oficiales y siguiente paso

✦
TU MISIÓN

Elegir alternativas textuales según la función de una imagen.

Ahora te toca

Taller de descubrimientos

Lee, predice, prueba

Un diagrama comunica idea → prueba → revisión. Un adorno cercano no añade información.
Prepara tus respuestas y comprueba cuando estés listo.
Una pausa para entender

¿Detectar alt demuestra que es bueno?

Necesito una pista

Compara la intención con el significado de los elementos; la apariencia sola no demuestra accesibilidad.

Cargando tu camino…

Llévatelo contigo

Cambia el propósito de una imagen de explicación a decoración. Justifica el cambio de alt y anota qué información permanece en el texto.

A tu ritmo

Mis archivos y GitHub

Cada lección puede convertirse en un registro propio: código, notas o un plan de práctica. Guardar un archivo en GitHub es opcional y no cambia tus XP.

Manual del alumno

El editor y las descargas se abren cuando esta lección esté disponible para tu cuenta. Revisa el acceso indicado abajo o vuelve al mapa de la ruta.

Comprobando tu acceso a esta lección…

Rullstpetbot

La IA puede equivocarse. Consulta el material de la lección.