Insertar imágenes de forma accesible en HTML/XHTML

Insertar imágenes en HTML o XHTML es relativamente sencillo. Solo hay que utilizar la marca vacía <img> de esta forma:

El atributo src indica la ruta al archivo donde está almacenada la imagen. El otro atributo alt es un atributo contiene el texto alternativo utilizado por los navegadores que no muestran imágenes. Es muy importante utilizar el atributo alt en sitios web accesibles. Un ciego no puede ver las imágenes, pero se puede hacer la idea de la imagen si se describe en este texto alternativo. Así, en el ejemplo anterior, un invidente, aunque no pueda ver la fachada de mi casa, se puede hacer la idea de lo que está viendo una persona que sí puede ver. Por cierto, uno de los ciegos más famosos que seguro te interesa que pase por tu página es el GoogleBot.

El texto alternativo especificado en el atributo alt ha de ser lo más descriptivo posible. Piensa que estás junto a un invidente delante de la imagen y estás tratando de explicarle que es lo que ven tus ojos y él no puede ver. En mi ejemplo anterior de la casa, quizás me esté quedando corto porque aunque un ciego pueda imaginarse la fachada de una casa, no se hará la idea de en qué se diferencia mi casa de la de los demás. Quizás, para ser más descriptivo, debería poner algo así: Imagen de la fachada blanca de mi casa de dos plantas donde se ven un par de ventanas y una puerta de color marrón. Por cierto, el atributo alt no es para que salga un texto de ayuda como hace Internet Explorer, para eso está el atrbuto title.

Hay casos en los que la descripción de la imagen es tan larga que no entra en el texto alternativo. No estoy seguro, pero creo que la longitud máxima del texto alternativo ha de ser de 256 caracteres. En estos casos, es necesario utilizar el atributo longdesc que sirve para enlazar a una página HTML o XHTML que describa con mayor detalle la imagen que se muestra. Por ejemplo, si muestras una imagen con las estadísticas de esta forma:

En este ejemplo necesitarías explicar muchas cosas: En el año 1999 en el primer trimestre se ganó 2 millones, en el segundo trimestre se ganó un poco más 2.4 millones, etc. Esto encajaría muy bien en una tabla de datos. Así pues deberías escribir una página HTML o XHTML con una tabla de datos bien etiquetada que pueda explicar a una persona invidente los datos de esa imagen.

Como hoy en día los navegadores no implementan el atributo longdesc, muchas webs accesibles suelen mostrar un enlace al lado de la imagen que lleva a esta descripción. Por convenio, muchos desarrolladores usan la descripción [D] para este enlace, tal y como hace en la página del Test de Accesibilidad Web (TAW). A mí esto de la [D] no me gusta. Es bastante antiestético y rompe con la pauta de describir bien los enlaces (punto 13.1). Me gusta más poner una pequeña descripción al pie de la imagen y que ésta lleve a la página con la descripción.

Otro aspecto a tener en cuenta a la hora de insertar imágenes es el uso de alt en imágenes de adorno. Una imagen de adorno es aquella que no aporta información a la página y que solo sirve para adornar la página. Normalmente, las imágenes de adorno deben ir especificadas en el estilo background-image en el archivo CSS, pero hay casos en los que no es posible. En estos casos no se debe especificar un texto alternativo descriptivo ya que entorpece y ensucia la lectura de los lectores de pantalla que usan los invidentes, sino un alt vacío. Por ejemplo, se suelen utilizar imágenes para las viñetas de las listas no ordenadas:

Como puedes ver, en este tipo de imágenes he especificado un alt vacío, sin ningún espacio. Esto es así para que el lector de pantalla del invidente lea sin pararse en imágenes que no aportan información. De todas formas, este tipo de viñetas es perfectamente posible especificarlas mediante CSS.

En este artículo de Carlos Egea podrás encontrar más información acerca de cómo insertar imágenes de forma accesible y del uso de del alt vacío.

Technorati tags: accesibilidad, html, xhtml, css, imágenes

servido por gigo 4 comentarios compártelo