Definición: El atributo alt es un atributo de HTML que proporciona una alternativa textual para una imagen. Se escribe dentro del elemento HTML img y permite comunicar la función o la información de la imagen cuando esta no se muestra o cuando una persona utiliza tecnologías de asistencia. Su contenido depende del propósito que cumple la imagen en la página: puede describir información, identificar un destino o quedar vacío si el recurso es puramente decorativo. Por ello, el atributo alt es una pieza de accesibilidad web, no un campo destinado a acumular palabras clave.
Índice de contenidos
Función del atributo alt
El atributo se incorpora al código de una imagen mediante la propiedad alt. Por ejemplo:
<img src="grafico-ventas.png" alt="Las ventas aumentaron un 18 % entre enero y junio">
Un lector de pantalla puede utilizar ese texto como alternativa a la imagen. Algunos navegadores también lo muestran cuando el archivo no se carga. Su función principal no consiste en enumerar todos los rasgos visuales, sino en transmitir la información que la persona perdería si no pudiera percibir la imagen.
La ausencia del atributo y un atributo vacío no significan lo mismo. Si alt no está presente, una tecnología de asistencia puede anunciar el nombre del archivo, la URL u otra información poco útil. En cambio, alt="" indica de forma intencionada que la imagen no aporta contenido y puede omitirse. El árbol de decisión de W3C para imágenes ayuda a determinar qué alternativa necesita cada caso.
El texto alternativo tampoco sustituye al pie de foto, al nombre del archivo ni al atributo title. El pie se muestra a todos los usuarios y puede aportar contexto adicional. El nombre del archivo identifica el recurso, mientras que title no constituye una alternativa accesible fiable. Cuando la información ya aparece junto a la imagen, el atributo alt debe evitar una repetición innecesaria.
Texto alternativo según el tipo de imagen
La redacción adecuada depende de la función que la imagen desempeña dentro del contenido. Estas son las situaciones más habituales:
- Imagen informativa: comunica el dato o significado relevante en el contexto, con una descripción breve y específica.
- Imagen decorativa: utiliza
alt=""para que las tecnologías de asistencia puedan ignorarla. Si se añade mediante CSS como fondo, no dispone de atributo alt y no debe contener información imprescindible. - Imagen funcional: si actúa como enlace o botón, el texto indica la acción o el destino, como
alt="Buscar"oalt="Descargar el informe", en lugar de describir el icono. - Imagen con texto: reproduce las palabras visibles cuando estas son necesarias para comprender el contenido. En un logotipo enlazado a la portada, suele bastar el nombre de la organización.
- Gráfico, mapa o diagrama complejo: incluye una alternativa breve que identifica la idea principal y ofrece los detalles en el texto cercano, una tabla de datos o una explicación ampliada.
Una misma fotografía puede necesitar textos alternativos distintos en páginas diferentes. La imagen de una persona puede identificarla en una biografía, describir una acción en una noticia o ser decorativa en un bloque visual. El contexto determina qué información resulta equivalente.
No suele ser necesario comenzar con expresiones como imagen de o foto de, porque el lector de pantalla ya identifica el elemento como imagen. Sí conviene mencionar el tipo de recurso cuando forma parte del significado, por ejemplo, en un mapa, una ilustración o una captura de pantalla.
Relación entre el atributo alt y el SEO
Los buscadores combinan el atributo alt con el contenido visible, el nombre del archivo y otros datos de la página para interpretar una imagen. Un texto preciso puede ayudar a relacionarla con el tema de la URL y a entenderla en servicios como Google Imágenes. Esto forma parte del SEO OnPage, pero no garantiza una posición ni sustituye a la calidad y relevancia de la página.
La palabra clave solo debe aparecer cuando describe la imagen de manera natural. Añadir términos repetidos, variantes o frases comerciales que no se corresponden con el recurso empeora la experiencia y puede considerarse keyword stuffing. Las directrices de Google para imágenes recomiendan textos alternativos útiles y contextualizados y desaconsejan su saturación con palabras clave.
También es incorrecto utilizar el atributo alt para introducir información que la imagen no contiene. Si un producto aparece en una fotografía, el texto puede identificar el producto y el detalle visible relevante, pero no debería incorporar una lista de características, ubicaciones o consultas de búsqueda ajenas a la imagen.
Errores de implementación
Los problemas más frecuentes proceden de aplicar una misma regla a todas las imágenes. Antes de redactar el texto conviene identificar la función del recurso y comprobar el resultado con la imagen disponible y no disponible.
- Omitir el atributo en lugar de declarar
alt=""cuando la imagen es decorativa. - Copiar el nombre del archivo, una URL o un texto genérico como imagen.
- Repetir el pie de foto o el párrafo contiguo sin aportar una alternativa más útil.
- Utilizar el mismo texto para imágenes diferentes o describir detalles irrelevantes.
- Convertir el atributo en una lista de palabras clave.
- Intentar incluir todos los datos de una visualización compleja en un texto excesivamente largo.
El atributo alt debe revisarse cuando cambia la imagen, su destino o el contexto en el que aparece. Una alternativa textual correcta describe la función actual del recurso y permite conservar su significado sin depender únicamente de la presentación visual.