Imágenes img y errores con el atributo alt

Nivel: Intro · HTML · Accesibilidad básica · 12 minutos

Síntomas frecuentes: imagen rota con icono vacío; lector de pantalla que dice solo «imagen»; SEO flojo porque no hay descripción; decoración repetida como si fuera contenido.

El atributo alt de <img> no es decoración: es el texto que sustituye a la imagen cuando no carga o cuando alguien no la ve. Aquí cada error: síntoma → por qué → arreglo → cómo evitarlo.

Mapa rápido de problemas

• 1. Falta el atributo alt
• 2. Alt vacío cuando la imagen aporta información
• 3. Alt que dice «imagen de…» o el nombre del archivo
• 4. Alt en una imagen solo decorativa
• 5. Ruta src incorrecta

1. Falta el atributo alt

Síntoma: validadores y auditorías marcan error; lectores de pantalla improvisan.

Por qué: HTML exige alt en img (puede ser cadena vacía a propósito).

Arreglo:

<img src="gato.jpg" alt="Gato naranja dormido en una silla azul">

Evitar: copiar plantillas sin revisar el alt.

2. Alt vacío cuando la imagen aporta información

Síntoma: gráfico o foto importante se salta por completo.

Por qué: alt="" dice «ignórame»; solo vale para decoración.

Arreglo: describe la información esencial en una frase corta.

Evitar: poner alt="" por pereza en fotos de contenido.

3. Alt que dice «imagen de…» o el nombre del archivo

Síntoma: «imagen de gato.jpg» o «foto1».

Por qué: el usuario ya sabe que es una imagen; el archivo no aporta.

Arreglo: describe el contenido: «Estudiantes midiendo una planta con regla».

Evitar: pegar el nombre del archivo tal cual.

4. Alt en una imagen solo decorativa

Síntoma: el lector repite adornos («línea azul», «fondo») y cansa.

Por qué: no aportan contenido.

Arreglo: alt="" (vacío, no omitas el atributo).

Evitar: describir ornamentos irrelevantes.

5. Ruta src incorrecta

Síntoma: icono de imagen rota.

Por qué: carpeta mal referida o tipografía en el nombre.

Arreglo: verifica que el archivo exista relativo a tu HTML; prueba la ruta.

<img src="imagenes/logo.png" alt="Logo de Paso a paso" width="200" height="80">

Evitar: espacios y mayúsculas distintas a las del disco (en algunos servidores falla).

Checklist final

• ¿Toda img tiene alt?
• ¿El alt describe la info o está vacío si es decorativa?
• ¿Evitas «imagen de» y nombres de archivo?
• ¿El src carga en el navegador?

Para seguir: listas ordenadas y no ordenadas — estructurar ítems sin fingir párrafos con guiones.