Addaw, ir a inicio Donar

Técnica Técnicas generales WCAG 2.2

G73Enlazar desde la imagen una descripción larga situada en otro lugar

Nombre oficial en el W3C: Proporcionar una descripción larga en otra ubicación con un enlace a ella inmediatamente adyacente al contenido no textual

En pocas palabras

Cuando un gráfico o un esquema tiene más información de la que cabe en su texto alternativo, hace falta una descripción larga. Con esta técnica, la descripción está en otro lugar: más abajo en la página o en otra página. Justo antes o después de la imagen se pone un enlace que lleva a ella.

Por qué es importante

El texto alternativo (alt) debe ser breve. Sirve para decir «Gráfico de visitas por mes», pero no para explicar los doce datos del gráfico.

Una persona ciega necesita esos datos para entender la información. Si la descripción está aparte y bien enlazada, la consulta cuando quiere. Lo mismo vale para la transcripción de un audio.

Cómo se hace

  1. Escriba un alt breve que identifique la imagen: «Gráfico de solicitudes de ayudas en 2026».
  2. Redacte la descripción larga con todos los datos importantes. Colóquela al final de la página o en una página aparte.
  3. Ponga un enlace justo antes o justo después de la imagen, con un texto claro: «Descripción detallada del gráfico de solicitudes».
  4. Si la descripción está entre otros textos, termínela con «Fin de la descripción».
  5. Añada un enlace para volver a la imagen, sobre todo si el botón «Atrás» del navegador no devuelve al mismo punto.
  6. En un audio, ponga el enlace a la transcripción junto al reproductor.

Cómo comprobarlo

  1. Busque imágenes, gráficos o audios con información que no cabe en un texto corto.
  2. Confirme que hay un enlace a su descripción justo antes o después de cada uno.
  3. Siga el enlace y compruebe que la descripción transmite la misma información.
  4. Verifique que es fácil volver al punto de partida.

Ejemplo

Gráfico con un enlace a su descripción, situada al final de la página.

<figure id="grafico">
  <img src="solicitudes-2026.png" alt="Gráfico de solicitudes de ayudas por trimestre en 2026">
  <figcaption><a href="#desc-solicitudes">Descripción detallada del gráfico</a></figcaption>
</figure>

<!-- Al final de la página -->
<div id="desc-solicitudes">
  <p>Primer trimestre: 120 solicitudes. Segundo: 95. Tercero: 210.
     Fin de la descripción.</p>
  <p><a href="#grafico">Volver al gráfico</a></p>
</div>
Ver el texto completo del W3C (traducción al español)

Esta es una traducción no oficial al español de la técnica G73 de Techniques for WCAG 2.2, del W3C. Puede contener errores. El único documento oficial y normativo es la versión original en inglés, publicada en el sitio web del W3C.

Aplicabilidad

Se aplica a todas las tecnologías

Descripción

El objetivo de esta técnica es proporcionar una forma de enlazar con descripciones largas remotas.

Con esta técnica, la descripción larga se proporciona en una ubicación distinta de la del contenido no textual. Puede ser otra ubicación dentro del mismo URI o bien otro URI. Se proporciona un enlace a esa descripción larga inmediatamente adyacente al contenido no textual. El enlace puede estar inmediatamente antes o inmediatamente después del contenido no textual. Si la descripción se encuentra junto con otro texto, añada al final la indicación «Fin de la descripción», de modo que los usuarios sepan cuándo dejar de leer y volver al contenido principal. Si el botón «Atrás» no devuelve a la persona al punto desde el que saltó, se proporciona un enlace de vuelta a la ubicación del contenido no textual.

Ejemplos

Gráfico de barras

En una página web hay un gráfico de barras que muestra las ventas de los tres mejores comerciales.

La alternativa textual corta dice «October sales chart for top three salespeople» (gráfico de ventas de octubre de los tres mejores comerciales).

Inmediatamente después del contenido no textual hay una pequeña imagen que indica la existencia de una descripción larga. El texto alternativo de la imagen es «Long description of chart» (descripción larga del gráfico). La imagen enlaza con la parte inferior de la página, donde hay una sección titulada «Description of charts on this page» (descripción de los gráficos de esta página). El enlace apunta a esta descripción concreta: «Sales for October show Mary leading with 400 units. Mike follows closely with 389. Chris rounds out our top 3 with sales of 350. [end of description]» (las ventas de octubre muestran a Mary en cabeza con 400 unidades; Mike la sigue de cerca con 389; Chris completa nuestro top 3 con 350 unidades vendidas; [fin de la descripción]).

Gráfico de barras en una tecnología distinta de HTML en la que la función «atrás» del agente de usuario no está disponible por motivos de seguridad

En una página web hay un gráfico de barras que muestra las ventas de los tres mejores comerciales.

La alternativa textual corta dice «October sales chart for top three salespeople» (gráfico de ventas de octubre de los tres mejores comerciales).

Inmediatamente después del contenido no textual hay una pequeña imagen que indica la existencia de la descripción larga. El texto alternativo de la imagen es «Long description of chart» (descripción larga del gráfico). La imagen enlaza con otra página titulada «Description of charts in October Sales Report» (descripción de los gráficos del informe de ventas de octubre). El enlace de la descripción apunta a esta descripción concreta: «Sales for October show Mary leading with 400 units. Mike follows closely with 389. Chris rounds out our top 3 with sales of 350. End of description. <link>Back to Sales Chart</link>» (las ventas de octubre muestran a Mary en cabeza con 400 unidades; Mike la sigue de cerca con 389; Chris completa nuestro top 3 con 350 unidades vendidas; fin de la descripción; enlace «Volver al gráfico de ventas»).

Leyenda con un enlace

Hay un gráfico. La leyenda de la figura, situada inmediatamente debajo del gráfico, contiene un enlace a la descripción larga. El texto del enlace deja claro que se trata de un enlace a una descripción larga.

Transcripción de un archivo de solo audio

Hay una grabación de un discurso de Martin Luther King. Los enlaces al archivo de audio y a la transcripción aparecen uno junto al otro.

Pruebas

Procedimiento

  1. Comprobar que existe un enlace inmediatamente antes o inmediatamente después del contenido no textual.
  2. Comprobar que el enlace es un enlace válido que apunta directamente a la descripción larga de ese contenido no textual concreto.
  3. Comprobar que la descripción larga transmite la misma información que el contenido no textual.
  4. Comprobar que está disponible un enlace o una función de «atrás» que permita al usuario volver a la ubicación original del contenido no textual.

Resultados esperados

Las cuatro comprobaciones anteriores son verdaderas

Cómo lo comprobamos en ADDAW

En cada auditoría de ADDAW revisamos esta técnica página a página y le entregamos los errores con capturas y la forma de corregirlos.

Solicitar una auditoría

Basado en la técnica G73 del W3C (WCAG 2.2). Explicación y ejemplos: ADDAW. Traducción no oficial del texto del W3C © W3C, licencia de documentos del W3C. ¿Ha visto un error? Escríbanos.