Cómo hacer más accesibles los gráficos SVG

Martín Fernández, Francisco J.
Martín Rodríguez, Óscar

Resumen: Consejos y directrices de accesibilidad en la implementación de gráficos SVG (Scalable Vector Graphics).

Introducción

SVG (Scalable Vector Graphics) es un lenguaje de etiquetado que nos permite la descripción con XML de gráficos vectoriales en dos dimensiones. En este artículo se resume brevemente como los gráficos SVG pueden ser más accesibles siguiendo las directrices del W3C.

¿Por qué la accesibilidad?

Las imágenes, sonidos, textos y la interacción juegan un papel importante en la transmisión de información en la Web. En muchos casos, las imágenes cobran una importancia especial en la transmisión, aclaración y simplificación de la información.

De esta forma podemos decir que todo lo multimedia por sí mismo beneficia la accesibilidad. No obstante, la información presentada en las imágenes debe de ser accesible a todos los usuarios (p.ej. personas ciegas). Además, con el fin de tener un acceso completo a la web, es importante que los autores con discapacidades puedan crear contenido, incluyendo las imágenes como parte del mismo.

Alternativas equivalentes

Proporcionar textos equivalentes a los gráficos

Si el gráfico contiene texto que explica su función (e.j. elemento text) no es necesario añadir texto equivalente. Utilizaremos el elemento hijo "title" para explicar la función del elemento "text" cuando el significado del contenido no este claro.

Cuando el gráfico no incluya un texto explicativo se debería incluir un texto equivalente. Si éste es complejo puedes usar el elemento "desc", si no es complejo usa el elemento hijo "title"

Gráficos accesibles

Cuando un usuario hace un examen visual de una imagen o imágenes la descompone en formas y las distintas conexiones entre ellas. El autor indica tal división mediante significados visuales, tales como la adyacencia, colores, patrones, tamaños y formas de los elementos. Cuando la imagen no se ve de forma clara se debe de utilizar información adicional. Por ejemplo, con cierto tipo de gráficos se puede ofrecer una estructura bien definida de las distintas formas. A partir de aquí los usuarios podrán descubrir los distintos elementos y formas que componen los gráficos, y las formas que son reutilizadas.

La reutilización de elementos ahorra tiempo a los usuarios que solamente necesitan examinar la misma forma una vez. También ayuda a los autores, incluyendo a los que tengan discapacidades, ya que resulta más fácil hacer cambios en las imágenes. La estructura de una imagen también puede ayudar al autor cuando su uso es por razones de edición. Ya que las formas pueden incluir equivalencias alternativas, también es posible construir bibliotecas multimedias con comentarios.

No basarse solo en un color

• No usar solo un color para transmitir información.
• Hacer un buen contraste de color. Usar hojas de estilos para que los usuarios que requieran cierta combinaciones de color puedan acceder a través de su propia hoja de estilos.

Usar hojas de estilos y marcas de forma adecuada

• No incluir texto como imágenes o curvas. Mejor hacerlo con fuentes. El autor puede definir sus propias fuentes con SVG.
• Separar la presentación de la estructura.
• Usa el elemento "g" y descripciones lógicas para estructurar los documentos SVG.
• No publicar simplemente representaciones gráficas, intenta que los documentos estén altamente estructurados. De esta forma podremos presentar el contenido a las personas que necesiten escucharlo o bien leerlo como Braille. Por ejemplo, se pueden representar las relaciones matemáticas con MathML y usar SVG para los gráficos explicativos.
• Utilizar las hojas de estilo para especificar la presentación gráfica y oral.
• Usar unidades relativas en las hojas de estilo, así el usuario tendrá el control sobre las fuentes.

Identificar el lenguaje natural

• Usar el atributo xml:lang y sus distintos valores para identificar el lenguaje natural del contenido del documento.

Asegurarse de que el contenido dinámico es accesible

• Tendremos en cuenta que el texto alternativo al contenido dinámico se actualiza cuando se producen cambios.
• Asegurarse de que los documentos SVG pueden utilizarse aunque los programas Scripts estén desconectados y el navegador no los soporte.