Ir al contenido

Texto alternativo para imágenes

El texto alternativo de una imagen proporciona información sobre su contenido o función, es la versión de texto de esa imagen.

¿Por qué utilizar un texto alternativo?

Existen casos en los que los usuarios no ven las imágenes de una web. Por ejemplo, una persona con discapacidad visual que utiliza un lector de pantalla o un usuario con una conexión lenta que desactiva las imágenes para agilizar la navegación. En estas situaciones, si no existe un texto alternativo, no se tiene acceso a la información de la imagen.

Los buscadores también utilizan el texto alternativo para determinar el contenido de las imágenes.

El texto alternativo y el atributo alt

El texto alternativo suele presentarse mediante el atributo alt y su propósito es reemplazar a la imagen sin cambiar el significado de la página.

<img src="afernadez.jpg" alt="Arturo Fernández">

El texto debería ser breve y descriptivo. Para añadir una descripción larga, se puede incluir en el texto de la propia página o mediante un enlace a una página nueva.

También se puede añadir información suplementaria de la imagen con el atributo title.

¿Y si la imagen funciona como enlace?

Cuando la imagen es también un enlace y éste no contiene texto, alt describe el contenido de la página de destino.

<a href="http://es.wikipedia.org/wiki/Arturo_Fernandez">
<img src="afernadez.jpg" alt="Artículo sobre Arturo Fernández en Wikipedia"></a>

¿Cuándo no es necesario el texto alternativo?

Cuando una imagen no aporta ninguna información relevante, decimos que se trata de una imagen decorativa, y no es necesario incluir un texto alternativo.

Las imágenes decorativas podemos presentarlas de dos formas:

  • Con el elemento img y el atributo alt vacío (alt="")
  • Como imagen de fondo mediante CSS (background)