Addaw, ir a inicio Donar

Técnica Técnicas generales WCAG 2.2

G94Dar a cada imagen un texto breve que cumpla la misma función

Nombre oficial en el W3C: Proporcionar una alternativa textual corta para el contenido no textual que cumpla el mismo propósito y presente la misma información que el contenido no textual

En pocas palabras

El texto alternativo de una imagen debe sustituirla sin que se pierda nada. No se trata de describir cómo es, sino de decir para qué está. Un icono de lupa en un buscador se llama «Buscar», no «Lupa».

Por qué es importante

Un lector de pantalla (programa que lee en voz alta la pantalla) lee el texto alternativo en lugar de la imagen. Si ese texto no transmite su función, la persona ciega pierde información o no sabe qué hace un botón.

El texto alternativo también aparece cuando la imagen no carga, por ejemplo con mala conexión. Y lo usan los buscadores para entender la página.

Cómo se hace

  1. Antes de escribir, pregúntese: ¿por qué está esta imagen aquí? ¿Qué información o función aporta?
  2. Escriba las palabras que usaría si no pudiera poner la imagen. En un enlace o botón, describa la acción: «Inicio», «Descargar en PDF».
  3. Si la imagen contiene texto importante, como un cartel o un logotipo con palabras, incluya ese texto.
  4. Sea breve pero completo. Si la información no cabe en una frase, resúmala y añada una descripción larga aparte.
  5. No empiece con «Imagen de» o «Foto de»: el lector de pantalla ya avisa de que es una imagen.
  6. En HTML, ponga este texto en el atributo alt de la etiqueta <img>.

Cómo comprobarlo

  1. Revise el texto alternativo de cada imagen, con las herramientas del navegador o una extensión de accesibilidad.
  2. Imagine la página sin las imágenes, solo con esos textos.
  3. Confirme que no se pierde ninguna información ni función.
  4. En botones y enlaces con imagen, compruebe que el texto describe la acción y no el dibujo.

Ejemplo

Botón de búsqueda con un icono de lupa: el texto alternativo dice qué hace, no cómo es.

<button type="submit">
  <img src="lupa.svg" alt="Buscar">
</button>

Para saber más, en nuestro blog

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 G94 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 crear una alternativa textual que cumpla el mismo propósito y presente la misma información que el contenido no textual original. De este modo, sería posible eliminar el contenido no textual y sustituirlo por la alternativa textual sin perder ninguna funcionalidad ni información. Esta alternativa textual no tiene por qué describir necesariamente el contenido no textual. Debe cumplir el mismo propósito y transmitir la misma información. En ocasiones esto puede dar lugar a una alternativa textual que parece una descripción del contenido no textual. Pero eso solo sería así si esa fuera la mejor forma de cumplir el mismo propósito.

Si es posible, la alternativa textual corta debería transmitir por completo el propósito y la información. Si no es posible hacerlo en una frase u oración breve, la alternativa textual corta debería ofrecer una visión general resumida de la información. Se utilizaría además una alternativa textual larga para transmitir la información completa.

La alternativa textual debería poder sustituir al contenido no textual. Si el contenido no textual se eliminara de la página y se sustituyera por el texto, la página seguiría ofreciendo la misma función y la misma información. La alternativa textual sería breve, pero tan informativa como fuera posible.

Para decidir qué texto incluir en la alternativa, suele ser buena idea plantearse las siguientes preguntas:

  • ¿Por qué está aquí este contenido no textual?
  • ¿Qué información presenta?
  • ¿Qué propósito cumple?
  • Si no pudiera utilizar el contenido no textual, ¿qué palabras usaría para transmitir la misma función o la misma información?

Cuando el contenido no textual contiene palabras que son importantes para comprender el contenido, el texto alternativo debería incluir esas palabras. Si el texto de la imagen es más extenso de lo que cabe en una alternativa textual corta, debería describirse en la alternativa textual corta y proporcionarse además una alternativa textual larga con el texto completo.

Ejemplos

  • Un botón de búsqueda utiliza la imagen de una lupa. La alternativa textual es «buscar», y no «lupa».
  • Una imagen muestra cómo se hace un nudo, con flechas que indican por dónde van las cuerdas para formarlo. La alternativa textual describe cómo hacer el nudo, no el aspecto de la imagen.
  • Una imagen muestra el aspecto de un juguete visto de frente. La alternativa textual describe la vista frontal del juguete.
  • Una animación muestra cómo cambiar una rueda. Una alternativa textual corta describe de qué trata la animación. Una alternativa textual larga describe cómo cambiar la rueda.
  • El logotipo de la empresa TechTron aparece junto a cada producto fabricado por ella en una lista, y tiene una alternativa textual corta que dice «TechTron».
  • Un gráfico que muestra las ventas de octubre tiene como alternativa textual corta "October sales chart" («Gráfico de ventas de octubre»). También tiene una descripción larga que proporciona toda la información del gráfico.
  • Un encabezado contiene una imagen con las palabras "The History of War" («La historia de la guerra») en texto estilizado. El texto alternativo de la imagen es "The History of War".
  • Una imagen de una serie de libros en una estantería contiene áreas interactivas que sirven de medio de navegación hacia una página web sobre cada libro concreto. La alternativa textual "The books available to buy in this section. Select a book for more details about that book." («Los libros disponibles para comprar en esta sección. Seleccione un libro para obtener más detalles sobre él») describe la imagen y su carácter interactivo.

Pruebas

Procedimiento

  1. Eliminar, ocultar o enmascarar el contenido no textual
  2. Sustituirlo por la alternativa textual
  3. Comprobar que no se pierde nada (la alternativa textual cumple el propósito del contenido no textual)
  4. Si el contenido no textual contiene palabras importantes para comprender el contenido, comprobar que esas palabras están incluidas en la alternativa textual

Resultados esperados

  • La comprobación n.º 3 es verdadera. Si el contenido no textual contiene palabras importantes para comprender el contenido, la comprobación n.º 4 también es verdadera

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 G94 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.