Inclusión de imágenes

Toda imagen incluida en una página web, ya sea informativa, funcional o decorativa, debe ser ligera (no más de 150 KB) y proporcionar un texto alternativo que aporte la misma información o función que la imagen. Este texto alternativo se mostrará en caso de no mostrarse la imagen: por ejemplo, los navegadores gráficos que tengan las imágenes desactivadas o no puedan mostrarlas, y los navegadores de texto usarán el texto alternativo en su lugar. Por otra parte, los lectores de pantalla leerán en voz alta el texto alternativo de las imágenes.

El texto alternativo de las imágenes debe tener las siguientes características:

• Debe describir el contenido de la imagen.
• No debe ser demasiado largo.
• Preferentemente, debe evitar el uso de abreviaturas.

Las imágenes simplemente decorativas deberán tener el campo de texto alternativo vacío y no se debe proporcionar ningún título a la imagen.

Si las imágenes funcionan como enlaces, el texto alternativo, en combinación con el texto del enlace (si lo hay), debe identificar claramente el destino o función del enlace, evitando redundancias de información innecesarias. En este caso, podemos diferenciar varios casos:

• La imagen es el único elemento del enlace: al no existir un texto en el enlace, el texto alternativo debe identificar claramente el destino o la función del enlace.
• El enlace contiene texto además de la imagen y la imagen complementa la información del dicho texto: como la imagen es adicional al texto del enlace, se debe proporcionar dicha información en el texto alternativo de la imagen. Por ejemplo:

Título del documento (,  2Mb)

En este ejemplo, el texto alternativo adecuado para la imagen podría ser “En formato PDF” ya que dicha información no se está proporcionando en el texto del enlace.

• El enlace contiene texto además de la imagen y dicho texto ya describe adecuadamente al enlace: en este caso, la imagen se considera decorativa y su texto alternativo debe estar vacío. Incluir un texto alternativo a la imagen solo provocará una redundancia innecesaria y puede distraer o molestar a los usuarios de lectores de pantallas. Por ejemplo:

Título del documento ( , en formato PDF, 2Mb)

En el caso de este ejemplo, la imagen no aporta información adicional porque el texto del enlace ya está informando de que el documento está en formato PDF, por lo que la imagen se dejaría como decorativa para no repetir información.

En ocasiones, es necesario introducir imágenes complejas que transmiten mucha información (gráficas, diagramas, mapas, etc.) que debe ser descrita en pocas palabras. En estos casos, además de ofrecer una alternativa textual que identifique brevemente el tipo de información transmitida por la imagen, se debe proporcionar una descripción detallada en una página aparte o en la misma página de la imagen.

La descripción detallada se podrá incluir de diferentes formas:

• Si el gestor de contenidos lo permite, se deberá incluir la URL (dirección web) de la descripción larga de la imagen. Es decir, la descripción larga se proporcionará en otra ubicación (por ejemplo, otra página) y en dicho campo se indicará la dirección web de la ubicación de dicha descripción.

• Si el gestor de contenidos no proporciona ningún campo para indicar la descripción larga, entonces la descripción se ha de incluir cerca de la imagen. Además, en la alternativa textual corta se ha de indicar la ubicación de la descripción larga. Por ejemplo: “Texto de la alternativa corta (descripción detallada a continuación)”. Otra opción es proporcionar la descripción en otra página e incluir un enlace a ella inmediatamente antes o después de la imagen.

Como vemos, es posible dotar de alternativa textual y descripción detallada a las imágenes de un sitio mediante un gestor de contenidos. A pesar de ello, el gestor de contenidos no puede verificar si la accesibilidad es adecuada, por lo que esa tarea deberá llevarse a cabo de forma manual por el propio editor que se encargará de garantizar que cada imagen disponga de una alternativa textual equivalente a su contenido o funcionalidad.

Además de la alternativa, es aconsejable indicar las medidas finales de la imagen para asegurarse de que se carguen correctamente en el navegador.

• Es recomendable que las imágenes tengan un peso lo más reducido posible (no más de 150 KB) para facilitar su carga al usuario final: la imagen deberá tener la resolución mínima que permita su correcta visualización para el objetivo utilizado.
• Los formatos de las imágenes deberán ser estándares abiertos de uso generalizado: .jpeg, .png, .gif, etc.
• Las imágenes incluidas deben poseer un contraste suficiente entre los colores de fondo y primer plano.

En resumen, para la correcta inclusión de imágenes, es necesario:

• Añadir texto alternativo a la imagen.
• Si la imagen es decorativa, dejar vacío el espacio del texto alternativo.
• Si la imagen es compleja, añadir URL en la que se describe detalladamente la imagen o incluir la descripción o un enlace a la misma a continuación de la imagen.
• Se recomienda fijar las dimensiones de la imagen.
• Usar imágenes de tamaños pequeños (lo necesario para que se vean correctamente).
• Utilizar formatos que sean estándares abiertos o de uso generalizado (jpg, jpeg, png, etc.).