El Atributo alt en Imágenes | Accesibilidad

Introducción

El atributo alt ha estado presente desde los inicios del HTML y la creación de aplicaciones web. En este post, exploraremos la importancia del mismo asi como tambien cuales son sus beneficios para mejorar la accesibilidad, y algunos conceptos esenciales como SEO, SSR y CSR.

¿Qué es el atributo alt y para qué sirve?

El atributo alt son descripciones textuales que se añaden a las imágenes en el código HTML de un sitio web. Tienen un papel crucial en la accesibilidad, ya que permiten a los lectores de pantalla describir el contenido de las imágenes a las personas con algun tipo de discapacidad visual. Por otro lado, también pueden ser útiles en situaciones donde la conexión a internet es deficiente y las imágenes no cargan correctamente.

Tipos de formatos

La forma en que se escriben estos atributos puede variar según el propósito de la imagen y el contexto en el que se utiliza.

Formato "Descriptivo"

Este proporciona información específica y detallada sobre el contenido de la imagen.

<img src="carro.jpg" alt="Coche de carreras rojo en pista de competición pasando la línea de meta" />

<img src="ciudad.jpg" alt="Vista panorámica de la ciudad de Nueva York desde el mirador del Empire State Building al atardecer" />

Este tipo de descripciones son utiles cuando la información visual de la imagen es esencial para la comprensión del contenido de la página.

Formato "Emocional"

Las descripciones emocionales capturan el sentimiento o la atmósfera que se quiere transmitir con la imagen.

<img src="playa.jpg" alt="Familia disfrutando de un día soleado y alegre en la playa" />

<img src="celebracion.jpg" alt="Grupo de amigos celebrando enérgicamente una victoria en el estadio" />

Este tipo de descripciones es útil cuando la imagen se utiliza para evocar una emoción específica que complementa el contenido escrito.

Formato "Decorativo"

Las imágenes decorativas son aquellas que no aportan información esencial al contenido de la página y se utilizan principalmente para mejorar la estética visual del sitio. Dado que estas imágenes no son cruciales para la comprensión del contenido, no es necesario proporcionar descripciones en el atributo, es decir, debemos dejar el mismo vacio.

<img src="bg.jpg" alt="" role="presentation" />

¿Por qué usar un atributo alt vacío y role="presentation"?

1. Accesibilidad: Al usar un atributo alt vacío (alt="") y el atributo role="presentation", se le indica a los lectores de pantalla que ignoren estas imágenes. Esto evita que los usuarios de Screen reader, reciban información innecesaria que podría distraerlos del contenido principal.

2. Mejora de la experiencia del usuario: Al no sobrecargar a los usuarios con descripciones de imágenes que no son relevantes, se mejora la experiencia de la navegación, haciendo que el contenido sea más fácil de seguir y entender.

3. SEO: Aunque las imágenes decorativas no contribuyen directamente al SEO, el uso adecuado del atributo alt y roles asegura que los motores de búsqueda se centren en el contenido relevante, mejorando así la calidad general del sitio.

Ejemplo de Implementación

Aquí tienes un ejemplo de cómo se puede implementar una imagen decorativa en HTML:

<img src="bg.jpg" alt="" role="presentation" />

Beneficios Adicionales

• Carga de Página: Las imágenes decorativas suelen ser de menor importancia en términos de carga. Al no requerir descripciones detalladas, se puede optimizar el tiempo de carga y la eficiencia del sitio.

• Mantenimiento del Código: Mantener este atributo vacío e implementar role="presentation" simplifica el mantenimiento del código, ya que no es necesario actualizar descripciones que no aportan valor al contenido principal.

En resumen, el uso de un atributo alt vacío seguido de el atributo role="presentation" para imágenes decorativas es una práctica recomendada para mejorar la accesibilidad y la experiencia del usuario, sin comprometer la calidad del contenido ni la eficiencia del sitio web.

Es un error común pensar que este atributo debe optimizarse únicamente para SEO. Aunque pueden influir en este, su principal propósito es la accesibilidad.

Este atributo bien escrito no solo mejorarán la usabilidad de tu sitio para personas con algun tipo de discapacidad, sino que también mejorarán tu ranking en buscadores al proporcionar contenido relevante y de calidad para los usuarios.

Optimización para Screen Readers, no para motores de busqueda

Más que enfocarse en palabras clave, el atributo alt debe describir la imagen de la manera más clara y precisa posible. Google valorará más el contenido útil y relevante que cualquier intento de manipulación de SEO.

Tipos de imágenes y equiparación de atributo alt

El atributo alt se aplica de la misma manera a diferentes formatos de imágenes, como SVG, PNG y JPG. No importa el formato de la misma; siempre es importante proporcionar una descripción adecuada para garantizar la accesibilidad.

Lectura en un Screen Reader

Cuando un screen reader encuentra este atributo, lee su contenido en voz alta. Por ejemplo:

<img src="gato.jpg" alt="Gato dormido en una hamaca" />

Un lector de pantalla anunciará algo como: "Imagen, Gato dormido en una hamaca." Esto ayuda a los usuarios a comprender el contenido de la imagen presente.

SSR (Server-Side Rendering) y CSR (Client-Side Rendering)

¿Qué es SSR?

SSR (Server-Side Rendering) es un método en el que el servidor genera el HTML completo de una página antes de enviarlo al navegador. Esto significa que el contenido, incluyendo el atributo alt de las imágenes, ya está presente cuando el HTML llega al navegador del usuario, garantizando que los lectores de pantalla tengan acceso inmediato a las descripciones de las imágenes asi como tambien a cualquier otro contenido.

¿Qué es CSR?

CSR (Client-Side Rendering) es cuando el contenido de la página se genera dinámicamente en el navegador utilizando JavaScript. Es vital asegurarse de que el atributo se incluya en el contenido dinámico para mantener la accesibilidad integral del sitio.

Implementación en Next.js y React

Next.js es un framework popular para React que admite tanto SSR como CSR. Aquí un ejemplo básico de cómo manejar este atributo:

import Image from 'next/image';

const MyComponent = () => (
  <div>
    <Image src="/static/cat.jpg" alt="Gato dormido en una hamaca" width={500} height={500} />
  </div>
);

export default MyComponent;

En Next.js, el componente Image automáticamente se asegura de que las imágenes sean accesibles y esten bien optimizadas.

Implementación en React

En una aplicación de React sin Next.js, puedes usar el componente estándar img para manejar las etiquetas alt:

import React from 'react';

const MyComponent = () => (
  <div>
    <img src="/path-to-image/cat.jpg" alt="Gato dormido en una hamaca" width={500} height={500} />
  </div>
);

export default MyComponent;

En ambos ejemplos, asegúrate de proporcionar una descripción significativa y precisa para mejorar la accesibilidad.

Enlaces a Recursos Adicionales

Para aquellos interesados en aprender más sobre accesibilidad web y SEO, aquí hay algunos recursos útiles:

• W3C Web Content Accessibility Guidelines (WCAG)

• Google's Introduction to SEO

• Mozilla Developer Network (MDN) Web Docs on <img>

Tambien te dejo unos recursos para que puedas testear la accesibilidad de tu aplicacion web:

• AXE Core

• Google Lighthouse

Conclusión

En resumen, el atributo alt es esencial para la accesibilidad web y no debe ser considerado una simple práctica para mejorar el SEO. Al redactar estos debemos ser claros y descriptivos, no solo estamos mejorando la experiencia de los usuarios de Screen Reader, sino también alineándonos con las mejores prácticas de los motores de busqueda, para contenido relevante y de calidad.