Insertar imágenes

Consideraremos “imagen “a toda representación visual de un objeto real o imaginario, o una persona o conjunto de ellos. Existen diferentes tipologías:

  • Decorativas, explicativas, artísticas
  • Diagramas e infografías
  • Iconos
  • Logos
  • Mapas
  • Imágenes de texto…

Las imágenes pueden trasmitir información visual importante para entender el contenido, por lo que hay que proporcionar alternativas textuales para que todas las personas puedan acceder a ese contenido.

Dependiendo del contexto de la imagen y si es interactiva o no, debería llevar asociada un texto alternativo a mostrar cuando no se carga la imagen o el usuario no puede verla, así los productos de apoyo pueden o no informarla.

Contraste y uso de color

Las pautas de accesibilidad web, WCAG 2.1, proporcionan una forma de medir el contraste de color entre un contenido y su contexto. 
 La relación de contraste mínima para garantizar que las personas puedan leer el texto y las imágenes del texto presentado en un fondo, WCAG 2.1 AA, es de al menos 4.5: 1 (siendo el texto menos de 18 puntos (24px)  (si no está en negrita) y menos de 14 puntos (18,5px) (si está en negrita).

  • Comprueba no solo el texto, sino también las imágenes e iconografías y elementos interactivos como botones, enlaces.
  • Evite el uso de fondos transparentes, texturizados o degradados.
  • Las imágenes de marca, como logotipos, imágenes decorativas o deshabilitadas o estados inactivos están exentas.
  • Cuando se utiliza el color para identificar los enlaces de texto o los símbolos utilizados como enlaces, la relación de contraste entre el color del texto del enlace y el color del texto de su alrededor debe ser de 3: 1.
  • No utilizar el color sólo para trasmitir información sólo para complementarla, las personas con ceguera de color pueden no identificar el contenido asociado a los colores.

Cómo escribir un texto alternativo accesible

Los textos alternativos son usados tanto por dispositivos para presentar la información al usuario como cuando una imagen no se carga.

  • El texto debe describir principalmente el objetivo o función de la imagen. Cuando la imagen no se muestre, el texto nos indica la información de la imagen sin tener que leer en contexto.
  • Evitar usar palabras generales en la descripción como: imagen de, icono de, gráfico de,  logo, decorativo….  Los productos de apoyo ya informan de que es una imagen.
  • No usar el nombre del archivo como nombre.
  • Usar descripciones cortas y concretas de no más 150 caracteres. Si necesitas más contenido para describir la imagen añade información cerca de la imagen o en un enlace.
  • Decide si una imagen tiene una función meramente decorativa o cumple una función. Muchas imágenes en noticias simplemente complementan de forma visual la información, sin embargo si la imagen desaparece no resta información al contenido. Otras veces, por ejemplo con una infografía, la eliminación de la misma hace que no se entienda el contenido.
  • Por defecto, todas las imágenes que se muestren usando la etiqueta “HTML” deben de llevar el atributo “alt”. 
  • Cuando la imagen es sólo decorativa, el atributo “alt” se deja vacío pero no se elimina. Sino se hace esto, el producto de apoyo lee el nombre del archivo.
  • El texto alternativo “alt” puede ser proporcionado por el contexto cercano a la imagen, por ejemplo, por un texto debajo de la imagen o un enlace a su descripción.

Imágenes como enlaces

En el caso de que una imagen constituya o forme parte de un enlace, hay varias posibilidades:

  • Imágenes que constituyen un enlace completo: Si la imagen constituye el enlace al completo (p.ej. un logo, icono o botón de imagen), incluye un texto alternativo que explique el significado del enlace. Por ejemplo, si tu sitio web incluye un logotipo en la cabecera que lleva a la página principal, incluye como texto alternativo "Página principal del sitio web".
  • Mapas de imagen: Añade un texto alternativo al mapa que describa de forma breve y concisa el contenido y la función del mismo. Incluye también un texto alternativo para a cada una de las áreas del mapa. 
  • Imágenes acompañadas por texto en el enlace: Cuando el enlace se compone de imágenes y texto, tienes que analizar si la imagen es informativa o decorativa:
    • Si la imagen complementa la información del enlace, escribe como texto alternativo la información adicional que trasmite la imagen.
    • Deja la alternativa textual vacía cuando la imagen no aporte información al enlace o repita información ya descrita en el mismo. 

Otras imágenes del contenido

Para el resto de imágenes, es esencial distinguir si la imagen tiene valor informativo o es puramente decorativa.

Imágenes informativas

Si la imagen es informativa, describe el contenido de la imagen como texto alternativo en unos 100-150 caracteres como máximo.

  • Evita en la medida de lo posible incluir imágenes que contengan texto. Si no lo puedes evitar, recoge el texto que esté contenido en la imagen dentro del texto alternativo o en un espacio cercano a la imagen (como un pie de foto).
  • En ocasiones el contenido de la imagen es demasiado complejo para describirlo en 150 caracteres (p.ej. diagramas, infografías). En estos casos, redacta una descripción larga del contenido de la imagen e incorpórala en la misma página, en un espacio cercano a la imagen, o bien en una página nueva.

Imágenes decorativas

Deja la alternativa textual vacía cuando la imagen no agrega significado al contexto. Evita usar imágenes con contenido informativo o significativo como fondo. Si la imagen es decorativa, sencilllamente deja el alt vacío.

Herramientas de accesibilidad para imágenes

Hay distintas herramientas que te pueden ayudar en la validación de alternativas textuales, ausencia de imágenes y contraste de color:

Índice