Las imágenes SVG se están convirtiendo en una forma cada vez más popular de añadir atractivo visual a páginas web y aplicaciones. Aunque estos gráficos basados en vectores son visualmente atractivos, puede que no sean accesibles para todos los usuarios, dejando fuera a aquellos que dependen de lectores de pantalla para acceder al contenido.

Afortunadamente, hay formas de hacer que sus imágenes SVG sean accesibles para todos. Añadiendo texto alternativo a sus imágenes SVG, puedes asegurarte de que todo el mundo pueda acceder a tus elementos visuales y comprenderlos.

Esta guía te proporcionará la información que necesitas para garantizar que tus imágenes SVG sean accesibles para todos. Cubriremos los aspectos básicos de la adición de texto alternativo a sus imágenes SVG, así como las ventajas de hacerlo. Empecemos.

¿Qué son las imágenes SVG?

Las imágenes SVG se crean combinando imágenes con código que crea los elementos visuales.

Las imágenes SVG suelen denominarse «SVG estáticos». Debido a esto, las imágenes son estáticas, lo que significa que el código es lo único que añade el visual.

A diferencia de la interactividad de HTML, SVG no utiliza etiquetas como «a» o «button» para crear elementos visuales. En su lugar, los elementos visuales se crean con código. Esto significa que se pueden crear elementos visuales complejos con un lenguaje de marcado sencillo. Por ejemplo, se puede crear una pelota que ruede por un camino.

¿Por qué son importantes las alternativas de texto para las imágenes SVG?

Si estás diseñando un sitio web, una aplicación o un panel de control, querrás que tu contenido sea accesible para el mayor número de personas posible.

A medida que aumenta el número de usuarios que confían en la tecnología de asistencia, como los lectores de pantalla, la necesidad de una web accesible se ha vuelto aún más crucial.

Y aunque la accesibilidad es importante para todos los sitios web, lo es especialmente para los contenidos visuales. La dificultad de leer contenidos sólo de texto puede dificultar su acceso y comprensión.

Cuando se diseña para la accesibilidad, hay que asegurarse de que cualquiera pueda utilizar el contenido. Proporcionar texto alternativo a las imágenes permite a los usuarios escuchar el contenido con programas que leen el texto en voz alta, como los lectores de pantalla.

No querrás que parte de tu contenido no se pueda leer por algunos usuarios debido a una discapacidad. Proporcionar alternativas de texto para tus imágenes puede permitir que todo el mundo disfrute de tu contenido visual.

Cómo añadir alternativas de texto a imágenes SVG usando el método “title” + “descr”.

1. Utiliza la etiqueta “title”: Al igual que con las imágenes tradicionales, las imágenes SVG también deben tener una alternativa textual. La etiqueta “title” se utiliza para proporcionar una descripción de texto alternativa para el contenido SVG. Además, esta etiqueta se puede leer en la mayoría de los navegadores y dispositivos de asistencia, por lo que es una buena práctica incluirla en todas las imágenes SVG.
2. Usa la etiqueta “desc”: La etiqueta “desc” se utiliza para proporcionar una descripción más detallada del contenido SVG. Esta etiqueta no se lee en la mayoría de los navegadores y dispositivos de asistencia, pero puede ser útil para proporcionar información adicional sobre la imagen.
3. Usa texto alternativo conciso y descriptivo: Al igual que con las imágenes tradicionales, es importante proporcionar un texto alternativo conciso y descriptivo para las imágenes SVG. El texto alternativo debe describir el contenido y la función de la imagen de manera clara y concisa.

Ventajas de añadir alternativas de texto a las imágenes SVG

Una de las principales razones para añadir alternativas de texto a tus imágenes SVG es garantizar que cualquier persona pueda acceder a tus elementos visuales y comprenderlos.

Las personas con discapacidad visual, por ejemplo, pueden no ser capaces de leer contenido sólo de texto, lo que puede dificultar la navegación por la web y el acceso al contenido.

Sin embargo, si añades alternativas de texto a tus contenidos visuales, estos usuarios podrán oír lo que tienes que decir. Esto permite a todos disfrutar del contenido y estar plenamente presentes en su entorno.

Consejos para insertar imágenes accesibles SVG y escribir sus alternativas de texto de manera eficaz.

Cuando insertes imágenes SVG y su respectiva alternativa textual, debes asegurarte de que sus alternativas sean eficaces siguiendo algunas pautas.

1.  Utiliza títulos claros para que el contenido sea más accesible. Esto puede ayudar a las personas con problemas de visión o con un bajo nivel de alfabetización a leer su contenido.
2. Reduce el texto lo máximo posible, pero sin interferir en una comprensión sencilla. Demasiado texto puede ser difícil de leer y entender, mientras que demasiado poco puede hacer que los elementos visuales parezcan incompletos.
3. Asegúrate de que los elementos visuales sean claros.
4. Evita utilizar demasiadas imágenes. Esto puede dificultar la comprensión de la información.
5. Evita utilizar demasiados colores en las imágenes SVG. Esto puede confundir a los usuarios con deficiencias visuales.
6. Evita utilizar demasiados símbolos en sus imágenes SVG. Esto puede confundir a los usuarios.
7. Evita utilizar palabras engañosas.

Ejemplos de alternativas textuales eficaces para imágenes SVG

Al igual que para muchos tipos de contenido, puedes escribir alternativas de texto eficaces para tus imágenes SVG basándote en el contenido visual de la propia imagen SVG.

En este ejemplo, la imagen SVG muestra nuestro logotipo de Tu Web Accesible. Las alternativas de texto para el elemento visual en este ejemplo serían “Logotipo Tu Web Accesible.

La imagen SVG muestra simplemente nuestro logotipo, por lo que podríamos insertar un “title” acorde y una etiqueta “descr” que complemente dicho título. Por ejemplo:

See the Pen
Accessible bee SVG using <title> + <desc> by Taller Agencia (@webmastertalleragencia)
on CodePen.

Conclusión

Las imágenes SVG se están convirtiendo en una forma cada vez más popular de añadir atractivo visual a las páginas y aplicaciones web.

Aunque estos gráficos basados en vectores son visualmente atractivos, puede que no sean accesibles para todos los usuarios, dejando fuera a aquellos que dependen de lectores de pantalla.

Afortunadamente, hay formas de hacer que sus imágenes SVG sean accesibles para todos. Añadiendo texto alternativo a tus imágenes SVG, puedes asegurarte de que todo el mundo pueda acceder a tus elementos visuales y comprenderlos.

Si tienes dudas en materia de accesibilidad web, contacta con nosotros y te resolveremos todas tus dudas al respecto.