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:
- Agregar texto alternativo (alt text): El atributo
altproporciona 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">
- Usar imágenes decorativas: Si la imagen no aporta información relevante al contenido o es puramente decorativa, es mejor usar un atributo
altvacío para indicar a los lectores de pantalla que la imagen no es relevante para la comprensión del contenido. Además, se puede usararia-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 -->
- 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.
- 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>
- 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>
- Ejemplo incorrecto:
- 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.
- Agregar título (title): Si es necesario, puedes utilizar el atributo
titlepara 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