Técnica Técnicas generales WCAG 2.2

G74Poner la descripción larga como texto visible junto a la imagen

Nombre oficial en el W3C: Proporcionar una descripción larga en texto cerca del contenido no textual, con una referencia a su ubicación en la descripción corta

En pocas palabras

La descripción detallada de un gráfico o un esquema se escribe como texto normal, cerca de la imagen y a la vista de todos. El texto alternativo corto avisa de dónde está, por ejemplo: «Datos en el párrafo siguiente». Así nadie tiene que ir a otra página para leerla.

Por qué es importante

Una persona ciega necesita los datos del gráfico para entender la información. Si están en el párrafo de al lado, los lee sin saltos ni enlaces.

Además, el texto visible ayuda a todo el mundo: a quien distingue mal los colores, a quien le cuesta interpretar gráficos o a quien lee en un móvil pequeño.

Cómo se hace

Escriba la descripción larga como texto visible: un párrafo, una lista o una tabla de datos.
Colóquela cerca de la imagen, tanto en pantalla como en el código. No hace falta que sea lo primero que va después; puede ir tras el pie del gráfico.
En el alt, identifique la imagen y diga dónde está la descripción: «Gráfico de visitas a la piscina municipal. Datos en el párrafo siguiente».
Compruebe que la descripción transmite la misma información que la imagen, no solo su aspecto.

Cómo comprobarlo

Lea el alt de la imagen y confirme que indica dónde está la descripción larga.
Compruebe que la descripción está cerca de la imagen, en pantalla y en el orden de lectura del lector de pantalla.
Compare la descripción con la imagen y verifique que contiene la misma información.

Ejemplo

Gráfico cuyo texto alternativo remite al párrafo que tiene debajo.

<img src="visitas-piscina.png"
     alt="Gráfico de visitas a la piscina municipal en verano. Datos en el párrafo siguiente.">
<p>En junio hubo 3.200 visitas, en julio 6.800 y en agosto 7.500.
   Agosto fue el mes con más afluencia.</p>

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 G74 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 descripción larga sin obligar al usuario a saltar a otra ubicación para leerla. Además, permite que todos los usuarios vean la descripción, lo que puede resultar útil a cualquiera que pueda pasar por alto algún detalle del contenido no textual.

Con esta técnica, la descripción larga se proporciona como parte de la presentación habitual (es decir, la recibe todo el mundo). La descripción se sitúa cerca del contenido no textual, pero no tiene por qué ser el elemento inmediatamente siguiente. Por ejemplo, puede haber una leyenda debajo de un gráfico y la descripción larga en el párrafo siguiente.

La ubicación de esta descripción larga se indica entonces dentro de la alternativa textual corta, de modo que el usuario sepa dónde buscarla si no puede ver el 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. Details in text following the chart:» (gráfico de ventas de octubre de los tres mejores comerciales; detalles en el texto que sigue al gráfico).

El párrafo inmediatamente debajo del gráfico contiene lo siguiente: «Sales for October show Mary leading with 400 units. Mike follows closely with 389. Chris rounds out our top 3 with sales of 350.» (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).

Pruebas

Procedimiento

Comprobar que la alternativa textual corta incluye la ubicación de la descripción larga.
Comprobar que la descripción larga está cerca del contenido no textual, tanto visualmente como en el orden de lectura lineal.
Comprobar que la descripción larga transmite la misma información que el contenido no textual.

Resultados esperados

Las tres 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 G74 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.