Paso 15.- Equivalente textual para imágenes.
Ha llegado el momento de hablar del atributo "alt". Probablemente este sea el elemento más conocido cuando se habla de accesibilidad en la Web. Pero no por conocido es menos necesario explicar su uso y, sobre todo, su correcto uso.
Sin este atributo, las personas que utilizan navegadores sólo texto, los que navegan con lectores de pantalla o navegadores por voz y todos aquellos que, por una u otra razón, no tienen habilita la descarga de imágenes se quedarán sin conocer el contenido y utilidad de las mismas. Es, sin dudarlo, el elemento de accesibilidad que afecta a mayor número de personas y, por lo tanto, se merece una atención relevante.
Vamos, en primer lugar, a ver como se utiliza el atributo "alt" para las imágenes dentro de la etiqueta <img>.
Es primordial saber que función tiene este atributo: pretende trasmitir el contenido y la función de la imagen, cuando esta no puede llegar a usuario de forma visual. Responde por tanto a dos preguntas: "¿Qué es? y ¿Para qué sirve? ".
Como siempre, tomaremos un ejemplo para saber cómo hacerlo de forma correcta. Supongamos que en nuestra bitácora queremos insertar una foto del autor que sirva de enlace a una página con un resumen curricular de su trayectoria profesional. Si nos limitamos a colocar en el sitio elegido la referencia al archivo de imagen y le colocamos un enlace obtendremos algo así:
Sin este atributo, las personas que utilizan navegadores sólo texto, los que navegan con lectores de pantalla o navegadores por voz y todos aquellos que, por una u otra razón, no tienen habilita la descarga de imágenes se quedarán sin conocer el contenido y utilidad de las mismas. Es, sin dudarlo, el elemento de accesibilidad que afecta a mayor número de personas y, por lo tanto, se merece una atención relevante.
Vamos, en primer lugar, a ver como se utiliza el atributo "alt" para las imágenes dentro de la etiqueta <img>.
Es primordial saber que función tiene este atributo: pretende trasmitir el contenido y la función de la imagen, cuando esta no puede llegar a usuario de forma visual. Responde por tanto a dos preguntas: "¿Qué es? y ¿Para qué sirve? ".
Como siempre, tomaremos un ejemplo para saber cómo hacerlo de forma correcta. Supongamos que en nuestra bitácora queremos insertar una foto del autor que sirva de enlace a una página con un resumen curricular de su trayectoria profesional. Si nos limitamos a colocar en el sitio elegido la referencia al archivo de imagen y le colocamos un enlace obtendremos algo así:
Si lo dejamos con esa codificación habremos dejado fuera a todos aquellos que relacionábamos al comienzo. Tenemos que modificar el código para que nos permita hacerlo accesible para todos. Recorremos qué y para qué está la imagen: es la foto del autor y sirve para llevarnos a otra página donde podemos conocer más sobre él. Eso es lo que debemos transmitir en el atributo "alt" y lo tenemos que hacer de la manera más breve y clara que podamos. Ésta sería una buena forma de hacerlo:
<a href="http://autor.htm">
<img src=http://../imagenes/foto.jpg />
</a>
Hemos añadido dos cosas:
<a href="http://autor.htm">
<img src="http://../imagenes/foto.jpg" alt="Foto del
autor que enlaza con un resumen de su currículum" title="Conoce al autor de esta bitácora" />
</a>
- Lo más importante ahora, hemos colocado el atributo "alt" en la etiqueta <img> informando a los que no vean la imagen de qué es y para qué sirve.
- También hemos colocado el atributo "title" para proporcionar información adicional de forma visual, como ya explicamos en el paso 9.
Al colocar el texto alternativo para las imágenes debemos tener en cuenta algunas cosas:
- No podemos utilizar marcadores de código en el texto alternativo, sólo texto plano y caracteres especiales. Por ejemplo, no podemos intentar dar énfasis a parte del texto alternativo del siguiente modo: alt="Foto del autor que <em>enlaza</em> con el resumen de su currículum". Las etiquetas dentro del atributo se leerán como texto plano.
- No debemos poner como texto alternativo el nombre del archivo de imagen. Por ejemplo, alt="foto.jpg".
- Algunas herramientas de edición de páginas Web colocan un texto alternativo por defecto a las imágenes para que este sea sustituido por uno correcto. Por ejemplo, no dejes un texto alternativo del tipo alt="Texto alternativo".
- No utilices como texto alternativo, cuando la imagen sirva como enlace, un texto que ya desaconsejamos para los vínculos. Por ejemplo, no ponga nunca alt="¡Pinche aquí!".
- No nos pasemos de listos y hagamos algo tan sin sentido como este ejemplo que vi en una página Web: alt="Activar las imágenes". Esto es algo así como si una persona ciega nos preguntara la hora y mostrándoles nuestro reloj le dijéramos: "¡Mírala tú!".
<< Home