El Atributo ALT

El atributo alt (abreviatura de alternative text) es uno de los elementos más importantes para la accesibilidad, el SEO (optimización para motores de búsqueda) y la experiencia de usuario en HTML. Se utiliza principalmente en imágenes (<img>) y áreas de mapas de imágenes (<area>) para proporcionar un texto alternativo que describa el contenido visual cuando este no puede mostrarse. A continuación, te explicamos cómo usarlo correctamente.

¿Qué es el atributo alt?

El atributo alt es un texto descriptivo que:

1. Aparece si la imagen no se carga (ej: error de conexión, enlace roto).

2. Es leído por lectores de pantalla para personas con discapacidad visual.

3. Ayuda a los motores de búsqueda a entender el contenido de la imagen.

Sintaxis básica

<img src="ruta-de-la-imagen.jpg" alt="Texto alternativo descriptivo">

¿Cuándo y cómo usar alt?

Imágenes informativas

Si la imagen transmite información importante (ej: gráficos, infografías), el texto alt debe describirla de forma clara y concisa.

Ejemplo:

<img 
  src="grafico-ventas-2023.png" 
  alt="Gráfico de barras mostrando un aumento del 20% en ventas durante 2023"
>

Imágenes decorativas

Si la imagen es puramente decorativa (ej: iconos estéticos, fondos), usa un alt vacío para que los lectores de pantalla la ignoren:

<img src="divisor-decorativo.png" alt="">

Imágenes con texto

Si la imagen contiene texto, el alt debe replicarlo:

<img 
  src="oferta-especial.png" 
  alt="Oferta del 50% de descuento en productos seleccionados"
>

Enlaces o botones con imágenes

Si la imagen funciona como enlace o botón, el alt debe describir su acción:

<a href="/carrito">
  <img 
    src="icono-carrito.png" 
    alt="Ir al carrito de compras"
  >
</a>

Mapas de imágenes (<area>)

En mapas de imágenes, cada <area> debe tener su propio alt:

<map name="mapa-tienda">
  <area 
    shape="rect" 
    coords="0,0,100,100" 
    href="/ropa" 
    alt="Sección de ropa"
  >
</map>
<img src="mapa-tienda.jpg" usemap="#mapa-tienda">

Mejores prácticas

Sé descriptivo, pero conciso:

Evita textos largos o redundantes (ej: "Imagen de...").

No uses alt para keywords de SEO:

Prioriza la utilidad para el usuario. Por ejemplo:

• Mal: alt="zapatos rojos, zapatos baratos, comprar zapatos"

• Bien: alt="Zapatos deportivos rojos con suela antideslizante"

No omitas el atributo:

Incluso en imágenes decorativas, incluye alt="" para cumplir con estándares de accesibilidad.

Usa guiones bajos en textos largos:

Algunos lectores de pantalla pausan en guiones, mejorando la pronunciación.

<img src="evento.jpg" alt="Concierto-de-rock-2023-en-Madrid">

Errores comunes

Repetir el nombre del archivo:

<img src="perro.jpg" alt="perro.jpg">

Mejor:

<img src="perro.jpg" alt="perro.jpg">

Ignorar imágenes funcionales:

Si una imagen es un botón (ej: "Enviar formulario"), su alt debe describir la acción:

<input type="image" src="boton-enviar.png" alt="Enviar formulario">

Ejemplos según tipo de imagen

Tipo de imagen	Ejemplo de alt
Logo	alt="Logo de TechCompany: un átomo estilizado"
Foto de producto	alt="Reloj inteligente negro con correa de cuero"
Icono de redes	alt="Enlace al perfil de Instagram de Juan Pérez"
Gráfico	alt="Gráfico circular: 45% ventas en línea, 55% en tienda"
Imagen decorativa	alt="" (vacío)

Importancia para el SEO

Los motores de búsqueda como Google utilizan el texto alt para:

• Indexar imágenes en resultados de búsqueda (Google Images).

• Entender el contexto de la página.

• Mejorar la clasificación en búsquedas relevantes.

Conclusión

El atributo alt es esencial para:

• Accesibilidad: Hacer tu sitio usable para personas con discapacidad visual.

• SEO: Mejorar la visibilidad en motores de búsqueda.

• Experiencia de usuario: Mostrar información clara si las imágenes fallan.

Ejemplo final:

<img 
  src="montaña.jpg" 
  alt="Montaña nevada al atardecer, con un lago cristalino en primer plano"
  loading="lazy"
>

¡Incluye siempre un alt significativo y conviértelo en una práctica habitual!