Blog what I write

Texto alternativo (alt) en casos especiales

post - - 4 replies -

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>
  • Manuel Angel

    Muy buen resumen. Siempre es un tema que da dolores de cabeza.

  • rodolfo

    y si dentro del “alt” quiero poner un parrafo? como es?

    • El texto alternativo es para poner un texto muy breve y rápido. Que sea descriptivo.
      El poner un párrafo es semánticamente incorrecto.
      Puedes emplear alguna solución alternativo de tooltips especiales por JS.

  • Dios sabe lo que odio el atributo ALT.
    ¡Por favor! W3C quitadlo como requisito para validar!
    Ya se que es importante por accesibilidad… ¿pero alguien lo usa para este fin en verdad? ¿o se usa para SEO?