Outbook

HTML+CSS+JS, Accesibilidad, PHP y más

Inicio que contiene a Desarrollo web que contiene a Accesibilidad que contiene a HTML y Accesibilidad: el atributo longdesc en imágenes

Datos de búsqueda

HTML y Accesibilidad: el atributo longdesc en imágenes

Actualizado .

Cuando se utilizan imágenes en una web la práctica habitual es darles un texto alternativo mediante el atributo alt, o dejar vacío dicho atributo en el caso de que la función de la imagen sea meramente decorativa.

Pero nos podemos encontrar con el caso de tener una imagen a la que haya que asociarle un texto alternativo, pero dicho texto sea excesivamente largo. Para esas ocasiones está el atributo longdesc.

Ejemplo de imagen con textos largosEjemplo de imagenes con texto largo

El atributo longdesc ha de ser siempre una URL que lleve a una descripción de la imagen, en la misma o en otra página:

longdesc = uri [CT]
This attribute specifies a link to a long description of the image. This description should supplement the short description provided using the alt attribute. When the image has an associated image map, this attribute should provide information about the image map’s contents. This is particularly important for server-side image maps. Since an IMG element may be within the content of an A element, the user agent’s mechanism in the user interface for accessing the “longdesc” resource of the former must be different than the mechanism for accessing the href resource of the latter.

Se puede dar una URL externa o, como en el ejemplo expuesto más adelante, un marcador de página. En ese caso bastaría con dar un atributo id que haga de marcador al párrafo con la descripción. Ejemplo de como podría quedar el código HTML

<p><img src="imagen1.jpg" alt="Promoción" longdesc="#descripcion1" /></p>
<p id="descripcion1">Descripción de la primera imagen.</p>

<p><img src="imagen2.jpg" alt="Promoción" longdesc="#descripcion2" /></p>
<p id="descripcion2">Descripción de la segunda imagen.</p>

Lectores de pantalla

Se supone que el longdesc es para lectores de pantalla, pero resulta que los hay que no dejan elegir al usuario si quieren ir o no a la descripción, y les llevan directamente.

Una solución podría ser un enlace oculto (pero no mediante display:none;, que si no los lectores de pantalla no lo pillan) que llevase a la URL de la descripción.

Si la imagen va dentro de un enlace…

En este caso suele ser habitual que el enlace lleve a otra página cuyo contenido coincide con el de la imagen (o lo amplía). Esto haría que añadir un atributo longdesc con la misma URL que el enlace fuese redundante, por lo que no sería necesaria su inclusión.

Si se opta por esta vía el atributo alt de la imagen deberá describir correctamente el propósito del enlace.

Enlaces relacionados

Comentarios del artículo

Los comentarios están cerrados.

Si el comentario no guarda relación con el tema del artículo o los comentarios previos, si la redacción del mismo es ilegible (estilo HOYGAN), o si contiene insultos u otros términos ofensivos, será borrado de inmediato. No se garantiza ningún soporte a los ejemplos de desarrollo web presentados en este sitio.

Hay 2 comentarios a “HTML y Accesibilidad: el atributo longdesc en imágenes”

Martín Abalos dice:

Fecha de comentario: 2009/12/29 12:10

Hola, gracias por compartir la información.
Una pregunta: cómo incluyo en enlace oculto?
Desde ya muchas gracias
martín

jervert dice:

Fecha de comentario: 2009/12/29 12:57

Quizá no deba meterse un enlace oculto, ya que si las imágenes no están disponibles, pero si lo están los estilos, el enlace no se verá (ya que se habría ocultado por CSS), y en ese caso concreto el enlace si debería estar a la vista para usuarios que navegan sin lector de pantalla.

Información del sitio