Paso 16.- Atributo "alt" vacío.

En determinadas ocasiones, los diseñadores de páginas Web utilizamos las imágenes como meros recursos estéticos o para dar formato a la apariencia de nuestra página. En esos casos no procede utilizar el atributo "alt" de forma activa para los lectores de pantalla, para los navegadores sólo texto o para quienes tienen deshabilitadas las imágenes. Pero tampoco podemos ir colocando imágenes en nuestra página que, por defecto, dichos dispositivos lean diciendo algo así como "imagen" o aparezca este texto en pantalla.
¿Qué podemos hacer para solucionarlo? Poner un atributo "alt" vacío y es tan sencillo como colocarlo dentro de la etiqueta <img>, pero sin poner texto entre las comillas. Sería algo así:

<img src="http://ImagenEspaciadora.jpg" alt="">

Los lectores de pantalla reconocerán el atributo y leerán lo que contiene: nada. En caso de no encontrar el atributo dirían "imagen" o leerían la dirección del archivo que la contiene, según el caso.
Algunos navegadores sólo texto también reconocerán el atributo y mostrarán en pantalla lo que contiene: nada. Otros mostrarán en cualquier caso la palabra "imagen", pero porque siempre lo hacen, pongamos o no texto alternativo. Hay gente que opina que para estos casos sería mejor poner un texto alternativo del tipo "imagen decorativa" o "imagen espaciadora", pero eso "ensuciaría" mucho la lectura de otros navegadores. Demos un voto de confianza a nuestros visitantes con este tipo de navegadores y, si han visto que utilizamos correctamente el etiquetado de las imágenes en el resto de la página, deberán suponer que esta imagen no trata de trasmitir contenido.
Las personas que utilizan navegadores visuales y tienen deshabilitada la carga de imágenes, por el motivo que sea, siempre verán el cuadro de imagen que su navegador muestre por defecto y éste no tendrá texto alternativo. Igual que en el caso anterior, tengamos fe en la capacidad de nuestros visitantes y hagamos uso del "alt" vacío.
Principalmente, deberemos usar el "alt" vacío:
  • Cuando utilizamos imágenes decorativas, como esas que redondean las esquinas de los fondos de texto.
  • Cuando utilizamos imágenes para separar texto u otras imágenes, aunque esta sea un artificio que no es recomendable y que podemos sustituir por un buen diseño de bloques mediante la hoja de estilo.
  • En general, cuando la imagen que colocamos no pretenda transmitir contenido.

Es muy importante recordar que lo correcto para el "alt" vacío es colocar las comillas seguidas (alt="") y no dejando un espacio entre ellas (alt=" "), ya que, entonces, los lectores de pantalla leerán "espacio".

Para las imágenes de fondo que colocamos dentro de etiquetas como <body> o <td>, no precisan de texto alternativo, ni siquiera mediante el "alt" vacío. Estas imágenes son meramente decorativas y son ignoradas tanto por lectores de pantalla como por navegadores sólo texto.


Siguiente paso.

Paso 17.- Mapas de imagen accesibles.