Texto alternativo (alt) en casos especiales

El atributo alt de una imagen u otro elemento debe proporcionar un texto alternativo que contenga la información que se pretendía transmitir. No olvidemos que la información textual es la de mayor grado de accesibilidad.

Usar textos alternativos lógicos y coherentes

  • Si la imagen contiene texto, por ejemplo un número de teléfono, debemos transmitirlo completamente, alt="Teléfono: 000 000 000".
  • Si la imagen es un icono de error, el texto debe transmitir esa misma idea, podemos usar simplemente alt="error".
  • Si se trata de un icono «ZIP», podemos usar algo como alt="fichero comprimido en ZIP".
  • En el caso de una fotografía podemos describir lo que vemos, alt="Asturias, tierra de altas montañas".
  • Si la imagen transmite acción, por ejemplo un enlace que tenga un icono de una impresora, debemos indicar dicha acción y no la descripción del icono, alt="imprimir".
  • Si una imagen transmite lo mismo que un texto contiguo, debemos dejar el texto alternativo vació para no caer en redundancias, alt="".

Las votaciones

Supongamos que tenemos el clásico sistema de votaciones con estrellas:
puntuación 4 de 5

Siguiendo las directrices de WCAG2 lo que podemos hacer es usar el atributo alt de la primera imagen para describir a todo el grupo e indicar la puntuación global. El resto de las imágenes que deberían estar situadas de forma contigua, tienen que tener alt="" vacio y no llevar ningún title, de esta forma son obviadas. Con ello se consigue que las ayudas técnicas (como por ejemplo lectores de pantalla) únicamente «lean» el texto alternativo de la primera imagen donde se da toda la información necesaria al usuario.

Ejemplo

<img src="star1.png" alt="puntuación 4 de 5" />
<img src="star2.png" alt="" />
<img src="star3.png" alt="" />
<img src="star4.png" alt="" />
<img src="star5.png" alt="" />

Los emoticonos

Se tiene que transmitir de forma textual el mismo sentimiento que el representado. Por ejemplo: Feliz alt="Feliz".

<img src="http://aurea.es/wp-includes/images/smilies/icon_smile.gif" alt="Feliz" />

Supongamos que en vez de una imagen usamos texto (ASCII). En este caso podemos marcar los emoticonos como abreviaturas (semánticamente podrían ser considerados así) y con el atributo title="sentimiento"
Por ejemplo: 🙂

<abbr title="Feliz">:-)</abbr>