Curso HTML 11.2 Uso correcto del atributo alt en imágenes

11.2 Uso correcto del atributo alt en imágenes

El atributo alt en la etiqueta <img> es fundamental para la accesibilidad, la experiencia de usuario cuando las imágenes no cargan y el SEO. Su función principal es proporcionar una descripción textual alternativa de la imagen. A continuación se exponen en detalle las mejores prácticas, escenarios de uso y ejemplos de código.

1. Principios fundamentales

Siempre incluir el atributo alt, incluso si está vacío.
Describir la función o contenido de la imagen, no su apariencia estética.
Ser conciso: de 5 a 15 palabras es suficiente en la mayoría de los casos.
Evitar redundancias con texto contiguo que describa la misma información.

2. Tipos de imágenes y tratamiento del `alt`

Tipo de imagen	Descripción del `alt`	Ejemplo
Informativa	Texto que comunica la información relevante.	Gráfico de ventas mensuales.
Decorativa	`alt=''` y `role='presentation'` si corresponde.	Icono puramente estilístico.
Funcional (enlaces/botones)	Indicar la acción: “Buscar”, “Cerrar ventana”.	Botón de cerrar modal.
Compleja o de datos	Resumen breve en `alt` y descripción larga en `longdesc` o elemento separado.	Mapa geográfico detallado.

3. Ejemplos prácticos

3.1 Imagen informativa:


<img src='img/precipitaciones.png'
     alt='Gráfico de barras de precipitaciones: Enero 80 mm, Febrero 60 mm, Marzo 70 mm'>

3.2 Imagen decorativa:


<img src='img/patron.svg'
     role='presentation'
     alt=''>

3.3 Icono de enlace funcional:


<a href='/buscar'>
  <img src='icons/lupa.svg'
       alt='Buscar'
       width='24' height='24'>
</a>

3.4 Imagen compleja con descripción larga:


<img src='img/mapa-complejo.png'
     alt='Mapa de la región X, mostrando rutas y ciudades principales'
     longdesc='#descMapaComplex'>

<!-- Descripción larga oculta visualmente, accesible para tecnologías de asistencia -->
<div id='descMapaComplex' hidden>
  Este mapa muestra la región X con las rutas A, B y C, un río principal
  y las ciudades Alfa, Beta y Gamma. La ruta A conecta Alfa y Beta en línea
  recta, ruta B sigue el curso del río y ruta C va de Beta a Gamma pasando
  por colinas.
</div>

4. Pautas específicas y consejos avanzados

Evitar: “imagen de…”, “foto de…”, “gráfico de…” al comienzo. Mejor describir directo el contenido.
Cuando la imagen está explicada en el texto contiguo, usar alt='' y role='presentation' para no duplicar.
En mapas de imagen (usemap), cada área debe tener su propio alt describiendo el destino o la función.
Si la imagen está dentro de un <button>, alt describe la acción del botón.
Para iconos SVG inline, usar atributo aria-label cuando no haya alt directo.

5. Resumen de buenas prácticas

Incluir siempre el atributo alt.
Describir la información o función de la imagen, no su apariencia.
Usar alt='' + role='presentation' para imágenes puramente decorativas.
Proporcionar descripción larga para imágenes complejas mediante longdesc o contenido asociado.
Verificar con lectores de pantalla para asegurar claridad y concisión.

Con estas pautas y ejemplos cubrirás la mayoría de escenarios de uso del atributo alt, mejorando la accesibilidad, usabilidad y posicionamiento de tu sitio web.