¿Qué son las imágenes decorativas?

Los lectores de pantalla pueden anunciar nombres de archivo de imagen poco útiles o añadir ruido audible cuando las imágenes son puramente visuales

Cuando una imagen es solo visual, tratarla como contenido significativo puede dificultar la navegación. Si una imagen no tiene ningún texto alternativo, algunos lectores de pantalla leen el nombre o la ruta del archivo, lo que puede sonar como código aleatorio.

Si la imagen tiene texto alternativo que repite palabras cercanas, el lector de pantalla repite la misma idea y retrasa el acceso al contenido principal. Puedes evitarlo marcando las imágenes que las personas no necesitan para comprender o usar la página; por eso, el siguiente paso es decidir si la imagen es decorativa.

La diferencia entre una imagen decorativa y una informativa depende de si aporta información o una función adicional al texto cercano

Una imagen es decorativa cuando no aporta información ni una función que una persona necesite para comprender o usar la página. Haz una prueba sencilla: si quitas la imagen, ¿se perdería algo importante para comprender el contenido o realizar una tarea? Si la respuesta es no, es decorativa en ese contexto. Esta decisión depende del motivo por el que incluiste la imagen y de lo que ya comunica el contenido que la rodea, ya que una misma imagen puede ser significativa en una página y decorativa en otra.

Entre los casos decorativos comunes se encuentran los elementos visuales de estilo, como bordes o separadores; las fotos meramente ornamentales o de ambiente que no respaldan el tema; los íconos o las imágenes que repiten etiquetas de texto adyacentes; y las imágenes dentro de un enlace que solo mejoran la apariencia o amplían el área en la que se puede hacer clic sin aportar significado. Una vez que determinas que una imagen es decorativa, debes configurarla en el código para que la tecnología de asistencia la omita.

Cómo marcar las imágenes decorativas para que las tecnologías de asistencia las omitan

Para un elemento <img>, el método con mayor compatibilidad es un valor alt vacío: alt=””. Esto indica a la tecnología de asistencia que ignore la imagen. Omitir el atributo alt no es aceptable, porque algunos lectores de pantalla anuncian el nombre del archivo, lo que añade ruido y puede confundir a las personas.

Algunos equipos usan role=”presentation” para ocultar una imagen, pero la compatibilidad varía y también puede anular un texto alternativo útil si alguien lo añade más adelante; por eso, úsalo como alternativa de respaldo y no como opción predeterminada. Cuando el elemento visual es puramente decorativo, las imágenes de fondo mediante CSS suelen ser más adecuadas porque, desde el principio, no se incorporan al árbol de accesibilidad.

Para un SVG decorativo en línea, usa aria-hidden=”true” en el elemento <svg> para que los lectores de pantalla lo omitan, ya que un SVG en línea no usa alt del mismo modo que <img>. Con estas herramientas, el flujo de trabajo se puede aplicar de forma sistemática en toda la página.

Un flujo de trabajo repetible para cada imagen de una página

Comienza por preguntarte por qué existe la imagen en la página y, luego, haz la prueba de eliminación: si la imagen desapareciera, ¿se perdería alguna información o función? Si el texto cercano, un pie de foto o el contenido circundante ya comunican el mismo significado, establece alt=”” para que el lector de pantalla no lo repita.

Si la imagen contiene información única que el texto no aborda, escribe un texto alternativo que transmita la finalidad de la imagen en ese contexto. Si la imagen es funcional, como un logotipo con enlace o un botón que solo contiene un ícono, proporciona una alternativa de texto que indique el destino o la acción.

El objetivo es sencillo: cada imagen debe quedar configurada en el código como significativa o decorativa, y el código debe corresponder con esa decisión.

Preguntas frecuentes

¿Qué se debe hacer cuando una imagen es decorativa en una página, pero informativa en otra?

El siguiente paso es evaluar la imagen en su contexto, no solo como un recurso aislado. Si el texto circundante ya explica la idea, la imagen puede ser decorativa en esa página; si la imagen es el único lugar donde aparece un dato o una función, debe tratarse como informativa en ese contexto.

¿Cuándo es alt=”” la opción adecuada en lugar de escribir una descripción?

Usa un valor alt vacío cuando la imagen no aporte información ni valor para realizar una tarea más allá del texto cercano. La decisión no consiste en ocultar el archivo a los motores de búsqueda, sino en evitar que los lectores de pantalla repitan contenido que la persona usuaria ya encuentra en el párrafo o encabezado.

¿Qué se debe comprobar antes de usar role=”presentation” o aria-hidden=”true”?

Comprueba si la imagen realmente no es esencial y si el tipo de elemento admite el atributo correctamente. Los atributos role y aria pueden ser útiles en algunos casos de SVG o de diseño, pero no deben sustituir una alternativa de texto sencilla cuando la imagen transmite significado o funciona como un control.

¿Cuál es el siguiente paso de la auditoría cuando una página contiene muchos íconos repetidos o ilustraciones decorativas?

Agrupa los elementos visuales repetidos y evalúa cada uno con la misma regla de eliminación. Si el ícono repite una etiqueta, el estado de un control o un motivo de diseño sin aportar un significado nuevo, márcalo como decorativo; si una instancia cumple una función distinta o transmite un significado diferente, conserva esa instancia como informativa y configura las demás según corresponda.