¿Cómo hago que las imágenes sean accesibles?

Hacer que las imágenes de tu sitio web sean accesibles es fundamental para garantizar que todos los usuarios, incluyendo aquellos con discapacidad visual que utilizan lectores de pantalla o personas que tienen las imágenes desactivadas, puedan comprender la información y la función que estas transmiten.

La herramienta principal para lograr esto en HTML es el atributo alt.

El Atributo alt (Texto Alternativo)

El atributo alt se utiliza dentro de la etiqueta <img> para proporcionar una descripción textual alternativa de la imagen.

• Propósito: Si una imagen no se puede cargar o si el usuario no puede verla (por ejemplo, si es ciego y usa un lector de pantalla), el texto del atributo alt se presenta en su lugar. Los lectores de pantalla leen este texto en voz alta. Los motores de búsqueda también lo utilizan para entender el contenido de la imagen.
• Requisito: El atributo alt es obligatorio para la etiqueta <img> según los estándares de HTML. Omitirlo hace que el HTML sea inválido y es una barrera de accesibilidad.

¿Cómo escribir un buen texto alt para imágenes informativas?

Cuando una imagen transmite información o tiene una función específica, el texto alternativo debe ser:

1. Conciso y Descriptivo: Describe la esencia de la imagen y la información que aporta. Pregúntate: si no pudieras ver la imagen, ¿qué necesitarías saber sobre ella para entender el contenido de la página?
2. Contextual: El mejor texto alt depende del contexto en el que se usa la imagen. La misma imagen podría necesitar diferentes descripciones en diferentes páginas.
3. No Redundante: Evita empezar con frases como «imagen de...», «foto de...» o «gráfico de...», ya que los lectores de pantalla suelen anunciar el elemento como una imagen de todos modos. Céntrate en el contenido. Sin embargo, si el tipo de imagen es crucial para entenderla (ej. «Diagrama de flujo de proceso de compra»), puede ser útil mencionarlo.
4. Si la imagen contiene texto importante: Este texto generalmente debe incluirse en el atributo alt.
5. Si la imagen es un enlace: El texto alt debe describir el destino o la función del enlace, no solo la imagen. Por ejemplo, si un logo enlaza a la página de inicio, un buen alt sería «Nombre de la Empresa - Ir a la página de inicio».

Ejemplos de texto alt para imágenes informativas:

<img src="grafico_crecimiento_anual.png" 
     alt="Gráfico de líneas mostrando el crecimiento de usuarios activos mensuales de 10.000 en enero a 50.000 en diciembre.">

<a href="/perfil/juan-perez">
  <img src="juan_perez_avatar.jpg" alt="Perfil de Juan Pérez">
</a>

<button type="submit">
  <img src="icono_buscar.svg" alt="Buscar"> </button>
Lenguaje del código: PHP (php)

¿Qué hacer con las imágenes puramente decorativas?

Una imagen se considera decorativa si su único propósito es estético o de diseño, y no añade ninguna información o funcionalidad importante al contenido.

Ejemplos: bordes ornamentales, patrones de fondo (si se usan como <img>), iconos que están acompañados de texto que ya describe su acción.

Para las imágenes decorativas, la práctica correcta es:

• Usar un atributo alt vacío: alt="" HTML<img src="separador_floral.png" alt="">
• ¿Por qué alt=""? Esto indica explícitamente a las tecnologías de asistencia que la imagen es decorativa y que pueden ignorarla de forma segura. El lector de pantalla no anunciará nada por ella, lo cual es preferible a que lea el nombre del archivo o una descripción irrelevante.
• Qué NO hacer:
  • No omitas el atributo alt por completo: Esto invalida el HTML y puede causar que los lectores de pantalla lean el src (nombre del archivo), lo cual es una mala experiencia.
  • No uses alt=" " (un espacio) o palabras como alt="decorativa" o alt="imagen": Un alt vacío (alt="") es la única forma correcta y semántica de marcar una imagen como decorativa para que sea ignorada.

Alternativa para imágenes decorativas (CSS):

Siempre que sea posible, la mejor manera de incluir imágenes puramente decorativas es mediante CSS, utilizando la propiedad background-image.

Las imágenes de fondo de CSS son ignoradas por defecto por la mayoría de las tecnologías de asistencia, ya que se consideran parte de la presentación y no del contenido.

Imágenes Complejas (Gráficos, Diagramas)

Si una imagen transmite información compleja (como un gráfico detallado, un organigrama o un mapa), el atributo alt debería proporcionar una descripción concisa de la información esencial. Para una descripción más detallada, puedes:

• Describir la imagen en el texto circundante en la página.
• Proporcionar un enlace a una página con una descripción más larga.
• Usar atributos ARIA como aria-describedby para asociar la imagen con un texto descriptivo más extenso que esté presente en la página.

Proporcionar un texto alternativo adecuado y significativo es uno de los pilares de la accesibilidad web y asegura que tu contenido visual sea comprensible para un público más amplio.