martes, 17 de abril de 2012

Paso 15: Equivalente textual para imágenes

Hablaremos aquí del atributo <alt> que es quizás el más conocido cuando se habla de accesibilidad web.
Este atributo permitirá conocer a las personas que utilicen lectores de pantalla o navegadores por voz el contenido de las imágenes que se presentan.

A modo de ejemplo haré lo siguiente:
Foto que representa la lengua de signos y enlaza con una web sobre un software destinado a la conversión de texto a la lengua de signos española
En esta imagen se ha introducido el atributo <alt> que ofrece información sobre la imagen y el atributo <title> que ofrecerá información visual adicional.
Por tanto el código de esta imagen es el siguiente:

<a href="http://www.textosign.es/" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Foto que representa la lengua de signos y enlaza con una web sobre un software destinado a la conversión de texto a la lengua de signos española " border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWfuiC9-_RXEEPdJ6L12XgpKjVCWgBMRVJoBmzmWwy8EjzQUIijVyYmiWRG5-bnzCzmnmcVgI94Vmp-xetOU4Aj96uMM-WqmKgQG-5gCx_cWJ1aG1oxLYQ2Lx8-cUtfHAjiYN4fO0_7Gs/s200/lengua_signos.jpg" title="Conoce el software Textosing" /></a></div>
Para realizarlo hay dos formas:
  • Modificando el HTML, donde se incluiría de manera manual el atributo <alt> y el atributo <title>.
  • Pinchando con el botón derecho sobre la imagen, seleccionamos la opción de "properties" y ahí nos aparecerá las casillas para rellenar los dos atributos.
En mi caso, lo he realizado modificando el HTML.

Problemas surgidos
Ninguno

No hay comentarios:

Publicar un comentario