Las imágenes, videos y gráficos son elementos clave en muchos sitios web. Sin embargo, si no se diseñan correctamente, pueden ser inaccesibles para las personas con discapacidades visuales, auditivas o cognitivas. En este capítulo, exploraremos cómo hacer que estos elementos sean accesibles utilizando texto alternativo, subtítulos, descripciones y otras técnicas.

Imágenes accesibles

Las imágenes deben incluir descripciones adecuadas para usuarios que utilizan lectores de pantalla. Esto se logra mediante el atributo alt en la etiqueta <img>.

Reglas para escribir texto alternativo

1. Describe el propósito de la imagen, no solo su contenido.
2. Sé breve y claro.
3. Si la imagen es decorativa, utiliza un atributo alt vacío (alt="").

Ejemplo de imagen accesible:

html

Imágenes decorativas

Cuando una imagen no añade información relevante, puede considerarse decorativa. En este caso, usa un atributo alt vacío para que los lectores de pantalla la ignoren.

html

Videos accesibles

Los videos deben incluir subtítulos, transcripciones y descripciones de audio para que sean accesibles.

Subtítulos

Los subtítulos permiten que las personas con discapacidades auditivas comprendan el contenido del video.

Ejemplo de video con subtítulos:

html

Transcripciones

Una transcripción proporciona una versión escrita de todo el contenido de un video, incluyendo descripciones de sonidos.

Ejemplo de transcripción:

Gráficos accesibles

Los gráficos, como los generados con <canvas> o SVG, requieren descripciones adicionales para ser accesibles.

SVG accesibles

Los elementos SVG pueden incluir descripciones utilizando los atributos title y desc.

Ejemplo de SVG accesible:

html

Canvas accesible

El contenido generado con <canvas> debe complementarse con una descripción fuera del lienzo.

Ejemplo de descripción para <canvas>:

html

Conclusión

Hacer que las imágenes, videos y gráficos sean accesibles no solo mejora la experiencia del usuario, sino que también garantiza que más personas puedan disfrutar de tu contenido. Incluir descripciones adecuadas, subtítulos y transcripciones son pasos simples pero significativos.

En el próximo capítulo, exploraremos cómo garantizar la navegación y gestión del foco accesible, un aspecto esencial para usuarios que dependen de teclados o tecnologías asistivas. ¡Te esperamos!