Cómo hacer imágenes accesibles

Hacer imágenes accesibles es fundamental para garantizar que todas las personas, incluyendo aquellas con barreras visuales o cognitivas, puedan comprender el contenido de las imágenes en un sitio web. Veamos cómo incluir imágenes accesibles en nuestros sitios web.

Por ejemplo, una persona con ceguera o baja visión no puede acceder correctamente al contenido de una imagen si esta no tiene un texto alternativo (alt) que describa su contenido, si el texto alternativo es insuficiente o no descriptivo, si la imagen contiene información importante que no se proporciona en un formato accesible, o si las imágenes decorativas no están marcadas correctamente con aria-hidden="true", haciendo que los lectores de pantalla las anuncien innecesariamente.

3. Cómo hacer imágenes accesibles

A continuación te presentamos algunas prácticas clave para hacer imágenes accesibles:

1. Agregar texto alternativo (alt text): El atributo alt proporciona un texto alternativo que se muestra cuando la imagen no puede cargarse o no es visible para el usuario. Debes utilizar una descripción concisa y significativa que transmita el propósito o contenido de la imagen. Ejemplo:

<img src="imagen.jpg" alt="Grupo de amigos disfrutando de un día soleado en el parque">

2. Usar imágenes decorativas: Si la imagen no aporta información relevante al contenido o es puramente decorativa, es mejor usar un atributo alt vacío para indicar a los lectores de pantalla que la imagen no es relevante para la comprensión del contenido. Además, se puede usar aria-hidden="true", que es una técnica WAI-ARIA, para asegurarse de que la imagen sea completamente ignorada por las tecnologías de asistencia, evitando que se anuncie innecesariamente.

<img src="decoracion.png" alt="" aria-hidden="true"> <!-- Imagen decorativa con alt vacío y aria-hidden -->

3. Tamaño y formato adecuado: Asegúrate de optimizar el tamaño y formato de las imágenes para que carguen rápidamente en la página. Además, evita utilizar imágenes con texto incrustado, ya que pueden resultar poco legibles para personas con discapacidades visuales.
4. Textos descriptivos cercanos: Si una imagen es relevante para el contenido cercano, es útil incluir el texto descriptivo cerca de la imagen en el código HTML. Esto ayuda a los lectores de pantalla a asociar la imagen con el texto. Ejemplo:

<p>El nuevo edificio de la biblioteca <img src="biblioteca.jpg" alt="Fachada del nuevo edificio de la biblioteca"> es un lugar acogedor y moderno para estudiar.</p>

5. Evitar información importante en imágenes: No coloques información importante, como texto crítico o enlaces, únicamente en una imagen. Es mejor usar elementos de texto reales en HTML para garantizar que todos los usuarios puedan acceder a la información. Ejemplo: no incluyas una imagen con el número de teléfono sin indicar texto alternativo porque los usuarios con problemas visuales no podrían llamarte.
   • Ejemplo incorrecto: <img src="telefono.png" alt="">
   • Ejemplo correcto: <p>Llámanos al <a href="tel:+123456789">+123456789</a>.</p>
6. Contraste de color: Si la imagen contiene texto, asegúrate de que haya suficiente contraste entre el texto y el fondo para que sea legible para todas las personas.
7. Agregar título (title): Si es necesario, puedes utilizar el atributo title para proporcionar información adicional sobre la imagen, pero evita duplicar la información del texto alternativo. Ejemplo:

<img src="proyecto.jpg" alt="Proyecto de construcción" title="Vista panorámica del proyecto de construcción">

El atributo longdesc es un atributo de HTML que solía utilizarse para proporcionar una descripción larga y detallada de una imagen. Se introdujo en HTML 4.01 y se diseñó para complementar el atributo alt. Sin embargo, el atributo longdesc ha sido ampliamente desaconsejado y su soporte ha disminuido en los navegadores modernos. Muchos lectores de pantalla y tecnologías de asistencia no lo admiten correctamente, lo que limita su efectividad en la mejora de la accesibilidad.

Test