Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Accessibility

SVGs accesibles: métodos para añadir contenido alternativo

by
Difficulty:BeginnerLength:ShortLanguages:

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

Los gráficos vectoriales escalables (SVG) son imágenes vectoriales basadas en XML. Existen desde hace ya mucho tiempo, pero durante los últimos dos años su uso ha experimentado un auténtico resurgimiento. Hoy en día existen un montón de motivos para utilizar SVGs, entre los que se incluyen:

  • El aumento de la compatibilidad nativa de los navegadores del formato SVG se traduce en una mejor consistencia y una mayor fidelidad de las imágenes.
  • El avance de las técnicas CSS y JavaScript disponibles para el estilo y la animación de imágenes.
  • La relativa "ligereza" de peso del código SVG en un mundo donde el ancho de banda y el rendimiento es más importante que nunca.

Otra gran ventaja de usar SVGs sobre imágenes estándar es que se pueden hacer fácilmente accesibles. Puesto que el marcado se puede agregar directamente a los SVG, proporcionan a las personas que utilizan tecnologías de asistencia (AT), como lectores de pantalla, más información sobre las imágenes dentro de la propia imagen.

Día Internacional de las personas con discapacidad

La fecha de publicación de este artículo no es casual: el 3 de diciembre es el Día Internacional de las Personas con Discapacidad de las Naciones Unidas. Hoy nos gustaría crear conciencia y demostrar lo que podemos hacer con el diseño web inclusivo.

Reglas del contenido alternativo

Si bien hay muchas cosas a tener en cuenta al hacer que los SVGs sean totalmente accesibles, nos centraremos en las formas en que puedes añadir contenido alternativo a un SVG. Espero que ya estés familiarizado con la etiqueta alt="" en las imágenes, el contenido alternativo es lo que se usa cuando una imagen no se muestra en pantalla, o no se puede mostrar, o se utilizan tecnologías de asistencia. Ten en cuenta que las reglas básicas habituales para el contenido alternativo se aplican también a los SVG:

  • Asegúrate de que tu contenido alternativo sea significativo y descriptivo.
  • No permitas que tu contenido alternativo supere los 250 caracteres.
  • No repitas el mismo contenido alternativo en distintas imágenes.
  • No utilices frases como "imagen de" o "gráfico de" para describir una imagen. Un lector de pantalla ya le va a indicar al usuario esta información.
  • Si un SVG (o cualquier gráfico) es puramente decorativo, debe tener un atributo de texto alternativo vacío/nulo. Esto envía una señal a la tecnología asistiva para que ignore esta imagen, ya que no es necesario para entender el contenido o la acción en la página.
  • Un atributo de texto alternativo vacío/nulo no es lo mismo que un atributo de texto alternativo que falta. Si falta el atributo de texto alternativo, la tecnología de asistencia podría leer el nombre del archivo o el contenido circundante, es decir el contexto, en un intento de proporcionar al usuario más información sobre la imagen.
  • Mal: <img src="here-is-some-path.svg">
  • Bien: <img src="here-is-some-path.svg" alt="">

Ahora que los conceptos básicos del contenido alternativo están aclarados, echemos un vistazo a algunos métodos que puedes usar para hacer tus SVGs más accesibles.

SVGs como imágenes

Para imágenes básicas, no complejas, o las decorativas, la opción correcta es usar la etiqueta <img> y hacer referencia al SVG como archivo. Este método tiene algunos beneficios, entre los que se incluyen:

  • El tamaño total del archivo será menor que si incrusta el elemento <svg> en línea.
  • El navegador puede almacenar la imagen en caché.
  • El mantenimiento es más fácil si estás utilizando el SVG en varios lugares.

El método <img> + atributo de texto alternativo

En el ejemplo anterior, la etiqueta <img> incluye alt="Black and yellow bee with six legs and translucent wings".

SVGs en línea

Para SVGs más complejos o esenciales, debes considerar la inclusión del SVG en el marcado HTML. Las ventajas de los SVG en línea incluyen:

  • Es posible aplicar JavaScript y CSS a la etiqueta <svg> para animar o aplicar estilo a las imágenes.
  • La fuente SVG está directamente disponible en el DOM, por lo que puede ser más predecible para los las tecnologías asistenciales.
  • Esto nos permite añadir información adicional sobre la imagen dentro de ella misma de varias maneras.

Nota: Para asegurarte de que el rango más amplio de tecnologías asistenciales reconozca el SVG como imagen, asegúrate de añadir role="img" al elemento <svg>.

El Método <title>

El elemento <title> para un SVG es equivalente al atributo de texto alternativo para una imagen ráster típica utilizando el elemento <img>. Se aplican todas las mismas reglas básicas de contenido alternativo. Es importante enumerar el principal elemento <title> en primer lugar de manera que sea leído primero por las tecnologías de asistencia, ya que los SVGs pueden tener varios elementos de título incrustados.

Aquí verás el elemento <title> inmediatamente después de la etiqueta de apertura <svg>:

El método aria-labelledby + <title>

Mientras que un elemento <title> proporciona el equivalente al texto alternativo para un SVG incrustado, no todas las combinaciones de navegadores y lectores de pantalla pueden usar el elemento <title> por sí solo. Cuando el atributo aria-labelledby es añadido a la mezcla, puedes ayudar a vincular el SVG al elemento <title> de una manera más robusta.

Observa el atributo aria-labelledby adicional que enlaza a <title> por su id.

El método <title> + <desc>

Para imágenes complejas, es posible que necesites más de 250 caracteres para describirlas. Aquí es donde el elemento <desc> entra en juego. La etiqueta <desc> es equivalente al atributo longdesc="" en un elemento <img>. Sin embargo, la ventaja de <desc> es que la descripción es proporcionada como parte de la propia imagen, mientras que con una imagen ráster, el atributo longdesc="" simplemente apunta a otra ubicación que contiene la descripción detallada.

<svg> en combinación con <title> y <desc> (consiguiendo ahora bastante robustez).

El método aria-labelledby + <title> + <desc>

Al igual que el ejemplo anterior, donde <title> no era suficiente para algunas combinaciones de navegador/tecnologías asistenciales, <desc> a veces también necesita ayuda de un atributo ARIA. Asegúrate simplemente de que tienes dos IDs diferentes para los elementos <title> y <desc> y de que ambos son referenciados en el atributo aria-labelledby.

Nota: Es posible que desees utilizar el atributo aria-describedby en su lugar, pero las diferencias son extremadamente sutiles.

En este ejemplo, <title> y <desc> tienen IDs únicos y se hace referencia a ambos en un único atributo labelledby.

Resumen

Hay muchos métodos para hacer que los SVGs sean un poco más accesibles en relación a la información suplementaria de imagen. Dependiendo de la complejidad de tu imagen puedes:

  • Haz referencia al SVG como <img> de origen y utiliza un atributo de texto alternativo tradicional (máximo 250 caracteres).
  • Complementa tu SVG en línea con un elemento <title> (máximo 250 caracteres).
  • Para imágenes más complejas, puedes utilizar un elemento <desc> para añadir más detalles que el elemento <title>.(sin límite de caracteres).
  • Para obtener soporte adicional para navegadores/tecnologías asistivas, vincula los elementos <title> o <desc> a un atributo aria-labelledby.

Más lecturas sobre A11y

¡Lee nuestra guía Web Accessibility: the Complete Learning Guide (Accesibilidad Web: ¡la Guía de aprendizaje completa) para obtener mucha más información sobre a11y!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.