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>

En varias ocasiones me he encontrado con este problema, así que igual puede sacar de apuros a más de uno.

Podemos tener en CSS una pseudo-clase para poner un color de fondo en los enlaces:

a:hover { background-color: red; }

En enlaces textuales todo es correcto (tal y como se espera)

<a href="#">enlace de texto</a>

Sin embargo en los enlaces con imágenes sucede «algo extraño» apareciendo el color fondo en la zona inferior de la imagen cuando se activa el evento hover (nos situamos encima del enlace con el cursor).

<a href="#"><img src="#" alt="" /></a>

Imagen de enlace Imagen de enlace con color de fondo en la zona inferior (error en css)

Continue reading «Imágenes sin background-color en enlaces»

Los primeros navegadores MOSAIC y Netscape ofrecieron a los diseñadores la posibilidad de incluir imágenes en las páginas web, así fue como nació la etiqueta <img>.

El W3C opino al respecto y fue en contra de esta iniciativa, ellos promovían el uso de la etiqueta <object> para cualquier elemento (objeto) multimedia.

Posteriormente al elemento IMG llego la tecnológica Future Splas (lo que hoy conocemos como Flash) y varios soportes de vídeo (Quicktime, Real, etc).

Fue entonces cuando la W3C volvió a plantear el uso del elemento OBJECT, pero Netscape hizo oídos sordos y retomo la guerra de los navegadores (ahora contra Internet Explorer) y se saco de la manga el elemento EMBED.

La W3C decía:

  • Para incrustar imágenes, usar <object>
  • Para incrustar flash, usar <object>
  • Para incrustar vídeo, usar <object>

La verdad es que suena más lógico el planteamiento del W3C, pero en la realidad el elemento IMG, EMBED y diferentes soporte propietarios ya se había propagado a millones de sitios web impulsados por diseñadores web ávidos de hacer una red mucho más estética y multimedia (y con razón).

Al final las recomendaciones de la W3C eran totalmente ignoradas, pero esta siguió su ritmo con paso firme, haciendo que las especificaciones no contemplasen el elemento EMBED y que los documentos web en su versión HTML 3.2 (o superior) y XHTML no puedan ser validados correctamente si incluyen este elemento.

Ahora años después y pensándolo en frió, el uso del elemento EMBED carece de sentido. Es un elemento propietario, esta desaconsejado por la W3C y hasta su nacimiento fue absurdo.

Por otro lado no comprendo la razón que tienen buenas plataformas de blogs como WordPress para presentar el elemento EMBED en sus códigos (¿compatibilidad inversa? a estas alturas…). Por suerte contamos con varias técnicas para incrustar vídeo y seguir validando en XHTML.

Por último recordar que también existe el elemento NOEMBED que se encarga de proporcionar un contenido alternativo y accesible a EMBED.