Validación HTML: Un elemento "img" debe tener un atributo "alt", excepto bajo ciertas condiciones. Para más detalles, consulta la guía sobre cómo proporcionar alternativas de texto para imágenes.

Acerca de este problema HTML

El atributo alt es una de las características de accesibilidad más importantes en HTML. Cuando un lector de pantalla encuentra un elemento <img>, lee el texto alt en voz alta para que los usuarios con discapacidad visual entiendan el contenido y propósito de la imagen. Sin él, los lectores de pantalla pueden recurrir a leer el nombre del archivo (por ejemplo, “DSC guión bajo 0042 punto jpeg”), lo cual es sin sentido y confuso. Los motores de búsqueda también usan el texto alt para entender e indexar el contenido de las imágenes, por lo que incluirlo también beneficia al SEO.

La especificación HTML requiere el atributo alt en todos los elementos <img>, con solo excepciones limitadas (como cuando el rol de la imagen se anula explícitamente mediante ciertos atributos ARIA, o cuando la imagen está dentro de un <figure> con un <figcaption> que la describe completamente—aunque incluso entonces, incluir alt es altamente recomendado).

Cómo elegir el texto `alt` correcto

El valor del atributo alt depende del propósito de la imagen:

Imágenes informativas — Describe el contenido de manera concisa. Por ejemplo, una foto de un producto debe describir el producto.
Imágenes funcionales — Describe la acción o destino, no la imagen en sí. Por ejemplo, un icono de búsqueda usado como botón debe tener alt="Buscar", no alt="Lupa".
Imágenes decorativas — Usa un atributo alt vacío (alt=""). Esto le dice a los lectores de pantalla que omitan la imagen completamente. No omitas el atributo—usa una cadena vacía.
Imágenes complejas (gráficos, diagramas) — Proporciona un resumen breve en alt y una descripción más larga en otra parte de la página o mediante un enlace.

Ejemplos

❌ Falta el atributo `alt`

Esto desencadena el error de validación del W3C:

<img src="photo.jpg">

Un lector de pantalla no tiene información útil que transmitir, y el validador marca esto como un error.

✅ Imagen informativa con `alt` descriptivo

<img src="photo.jpg" alt="Persona sosteniendo un gato atigrado naranja en un jardín soleado">

El texto alt describe lo que muestra la imagen, dando a los usuarios de lectores de pantalla contexto significativo.

✅ Imagen decorativa con `alt` vacío

<img src="decorative-border.png" alt="">

Cuando una imagen es puramente decorativa y no añade información, un atributo alt vacío le dice a la tecnología asistiva que la ignore. Esto es válido y preferible a omitir el atributo.

✅ Imagen funcional dentro de un enlace

<a href="/home">
  <img src="logo.svg" alt="Acme Corp — Ir a la página de inicio">
</a>

Como la imagen es el único contenido dentro del enlace, el texto alt debe describir el propósito del enlace.

✅ Imagen dentro de un `<figure>` con `<figcaption>`

<figure>
  <img src="chart.png" alt="Gráfico de barras mostrando crecimiento de ingresos trimestrales de Q1 a Q4 2024">
  <figcaption>Crecimiento de ingresos trimestrales para el año fiscal 2024.</figcaption>
</figure>

Incluso cuando hay un <figcaption> presente, incluir un atributo alt descriptivo es la mejor práctica. El alt debe describir la imagen en sí, mientras que el <figcaption> proporciona contexto adicional visible para todos los usuarios.

Errores comunes que debes evitar

No empieces con “Imagen de” o “Foto de” — Los lectores de pantalla ya anuncian el elemento como una imagen. Escribe alt="Golden retriever jugando a buscar", no alt="Imagen de un golden retriever jugando a buscar".
No uses el nombre del archivo — alt="IMG_4392.jpg" no es útil.
No dupliques el texto circundante — Si el texto al lado de la imagen ya la describe, usa alt="" para evitar redundancia.
No omitas alt pensando que es opcional — Un atributo alt faltante y alt="" son fundamentalmente diferentes. Faltante significa que el lector de pantalla puede anunciar la ruta del archivo; vacío significa que el lector de pantalla intencionalmente omite la imagen.