Imágenes

Prestemos atención nuevamente a nuestro elemento imagen:

<img src="images/firefox-icon.png" alt="Mi imagen de prueba">

Como dijimos antes, incrusta una imagen en nuestra página, en la posición en que aparece. Lo logra a través del atributo src (source), el cual contiene el path (o ubicación) de nuestro archivo de imagen.

También incluimos un atributo alt (alternative) — el cual contiene un texto que debería describir la imagen, y que podría ser accedido por usuarios que no pueden ver la imagen, quizás porque:

1. Son ciegos o tienen deficiencias visuales. Los usuarios con impedimentos visuales usualmente utilizan herramientas llamadas Screen Readers (Lectores de Pantalla), las cuales les leen el texto contenido en el atributo alt.
2. Se produjo algún error en el código que impide que la imagen sea cargada. Como ejemplo, modifica deliberadamente el path dentro del atributo src para que éste sea incorrecto. Si guardas y recargas la página, deberías ver algo así en lugar de la imagen:

Mi imagen de prueba

La frase clave acerca del texto alt de arriba es "texto que debería describir la imagen". El texto alt debe proporcionarle al lector la suficiente información como para que éste tenga una buena idea de qué muestra la imagen. Por lo que nuestro texto actual "Mi imagen de prueba" no es para nada bueno. Un texto mucho mejor para nuestro logo de Firefox sería: "El logo de Firefox: un zorro en llamas rodeando la Tierra".