Scalable Vector Graphics (SVG) es accesible y no accesible a la vez. Nos explicamos.
El SVG 1.0 lo puso en marcha el W3C en 2001, el SVG 1.1 salió en 2003, en 2011 llegó SVG 1.1 segunda edición, y actualmente hay un borrador de trabajo del W3C que es el SVG 2.0.
La versión SVG 1.1 tiene ciertas características que permiten la accesibilidad pero la versión SVG 2.0 tendrá acceso a otro nivel superior. Mientras el primero tiene un buen soporte cross-browser, en el segundo caso es demasiado pronto para que los navegadores hayan implementado soporte todavía.
En este artículo se analizan las maneras de hacer que los SVG 1.1 sean lo más accesibles posible, dejando notas de lo que puede ser la versión 2.0.
1- Utiliza SVG
Siendo este un artículo sobre la utilización de SVG parece que sobra, pero este es el primer consejo que te podemos dar. Hay que tener en cuenta que una de las características más importantes de un SVG es que es uno de los formatos más accesibles, además de escalable sin pérdida de calidad visual.
Esto lo convierte en muy versátil para los desarrolladores web, pero también para el usuario final ya que ofrece imágenes nítidas sin importar el tamaño y resolución de la pantalla de su dispositivo.
2- Utiliza SVG inline
La mejor manera de conseguir un SVG accesible por los lectores de pantalla y herramientas de reconocimiento de voz, llamadas tecnologías de asistencia (AT), es que lo pongas directamente en el código HTML. En términos de código es más sencillo hacerlo ahora con HTML5 de lo que era con el HTML4 ya que lo trata de forma correcta.
Si su doctype utiliza HTML5 no es necesario incluir una declaración de espacio de nombres en la etiqueta <svg>
<svg version="1.1" width="300" height="200"> ... </ svg>
La utilización de otros métodos para incorporar SVG produce resultados menos accesibles, o directamente limita la información disponible para las AT.
Si por ejemplo utilizas SVG en medio de <embed> o <object>, su accesibilidad no será bien resuelta por los navegadores como lo sería con SVG inline.
SVG 1.1 soporta DOM 2, por lo que la información sobre el SVG se puede examinar y manipular mediante programación. Forzar el DOM no es una forma eficiente para AT de obtener información. Es mucho más eficiente cuando la información sobre el DOM está expuesta para el API de accesibilidad del navegador. Todos los navegadores modernos tienen una API de accesibilidad que proporciona propiedades y métodos que se pueden consultar por AT.
A los efectos de este artículo, nos centraremos en las siguientes combinaciones de lector / navegador de pantalla: Explorer 11, Firefox 28 y Chrome 30 en Windows, con Jaws 15 y NVDA 2014.1. Safari en iOS 6 / OSX con VoiceOver, y Chrome 30 en Android con TalkBack.
De estos navegadores, sólo IE y Firefox exponen el papel del elemento <svg> a través de su API de accesibilidad en este momento. IE lo identifica como un gráfico, y Firefox como un diagrama. De los lectores de pantalla utilizados con estos navegadores, sólo Jaws con IE utiliza esta información para indicar que hay contenidos gráficos en la página.
La buena noticia es que hay algo que podemos hacer al respecto. Espera un momento, vamos a volver a ello más adelante.
3- Proporciona un título
El elemento SVG <title> proporciona un nombre legible para el contenido SVG. El elemento <title> debe ser el primer hijo de su elemento padre, que puede ser uno de los elementos contenedores SVG o elementos gráficos, o el propio elemento <svg>. La especificación de SVG 1.1 menciona específicamente la importancia de proporcionar un título para el elemento <svg>.
<svg version="1.1" width="300" height="200"> <title>Rectángulo verde</title> <rect width="75" height="50" rx="20" ry="20" fill="#90ee90" stroke="228b22" stroke-fill="1" /> </svg>
El contenido del elemento <title> no se representa visualmente por defecto (aunque se puede mostrar mediante estilos).
En el ejemplo anterior, el contenido del elemento <title> da al elemento <svg> su nombre accesible, permitiendo a los lectores de pantalla diferenciar esa parte de contenido SVG de cualquier otra en la página.
En pocas palabras, el elemento <title> proporciona una descripción de texto alternativo para el contenido SVG. Piensa en ello de la misma manera que lo harías con el atributo alt en el elemento <img>.
Cuando ARIA 1.0 está presente en el código HTML, hace que el navegador actualice la información que pone a disposición a través de su API de accesibilidad. ARIA tiene un buen soporte en todos los navegadores y lectores de pantalla, por lo que puede ayudar a reforzar la accesibilidad de los contenidos SVG para las personas ciegas y deficientes visuales.
ARIA se introduce oficialmente en la especificación SVG 2.0, pero todavía es posible utilizar ARIA con contenido SVG 1.1.
<svg version="1.1" width="300" height="200" aria-labelledby="title"> <title id="title">Rectángulo verde</title> <rect width="75" height="50" rx="20" ry="20" fill="#90ee90" stroke="228b22" stroke-fill="1" /> </svg>
El atributo aria-labelledby en este ejemplo re-aplica la relación entre los elementos <svg> y <title>.
En otras palabras, se asegura de que el contenido del elemento <title> sea reconocido como el nombre accesible por el contenido SVG.
El efecto es que ahora Chrome y Safari también muestran "rectángulo verde" como nombre accesible para el contenido SVG, y los lectores de pantalla, incluyendo VoiceOver, TalkBack, Jaws y NVDA hacen uso de la misma en al menos un navegador.
4- Proporciona una descripción
El elemento SVG <desc> es similar al elemento <title>. En lugar de proporcionar un nombre para el elemento padre, proporciona una descripción. En términos de accesibilidad, el elemento <desc> es donde se proporciona información más detallada sobre el contenido del SVG.
<svg version="1.1" width="300" height="200"> <title>Rectángulo verde</title> <desc>Un rectángulo de color verde claro con esquinas redondeadas y un borde verde oscuro</desc> <rect width="75" height="50" rx="20" ry="20" fill="#90ee90" stroke="228b22" stroke-fill="1" /> </svg>
La accesibilidad en navegador para el elemento <desc> es aproximadamente la misma que para el elemento <title>. El contenido del elemento <desc> debería ser mostrado como la descripción accesible para el elemento que contiene, pero de nuevo sólo IE y Firefox hacen los honores.
ARIA viene al rescate también en este caso, pero no de la manera que podrías pensar. La solución obvia es utilizar el atributo aria-describedby para reforzar la relación entre los elementos <svg> y <desc>.
<svg version="1.1" width="300" height="200" aria-labelledby="title" aria-describedby="desc"> <title id="title">Rectángulo verde</title> <desc id="desc">Un rectángulo de color verde claro con esquinas redondeadas y un borde verde oscuro</desc> <rect width="75" height="50" rx="20" ry="20" fill="#90ee90" stroke="228b22" stroke-fill="1" /> </svg>
Aunque el navegador ahora muestra la información correcta a través de su API de accesibilidad, la compatibilidad con los lectores de pantalla es mucho menos consistente. Jaws y NVDA con IE, VoiceOver con Safari y Chrome TalkBack con todos hacen uso de la descripción accesible, pero Jaws y NVDA con Chrome y Firefox no lo hacen.
Por el momento, una solución es hacer que el atributo aria-labelledby trabaje un poco más.
<svg version="1.1" width="300" height="200" aria-labelledby="title desc"> <title id="title">Rectángulo verde</title> <desc id="desc">Un rectángulo de color verde claro con esquinas redondeadas y un borde verde oscuro</desc> <rect width="75" height="50" rx="20" ry="20" fill="#90ee90" stroke="228b22" stroke-fill="1" /> </svg>
Esto no es ideal porque el nombre y la descripción son partes conceptualmente diferentes, y sirven para diferentes propósitos. En aras de difundir la información lo más ampliamente posible este enfoque lo permite, aunque manteniendo la prudencia.
5- Utiliza texto
El texto es de acceso general, con la excepción de las imágenes de mapa de bits (png, jpg, etc.) El texto insertado en estas imágenes no puede ser detectado por los lectores de pantalla (o motores de búsqueda), y no se puede cambiar de tamaño para facilitar la comodidad de lectura.
<svg version="1.1" width="300" height="200" aria-labelledby="title desc"> <title id="title">Rectángulo verde</ title> <desc id="desc">Un rectángulo de color verde claro con esquinas redondeadas y un borde verde oscuro</ desc> <rect width = "75" height = "50" rx = "20" ry = "20" fill = "# 90ee90" golpe = "228b22" stroke- fill = "1" /> <text x="35" y="30" font-size="1em" text-anchor="middle" fill="#000000"> Web </ text> </ svg>
El elemento SVG <text> hace que el texto en el contenido gráfico sea de muy fácil acceso. El contenido del elemento <text> se representa como texto sin formato en el navegador, para que esté disponible para los lectores de pantalla, y al ser SVG se puede cambiar el tamaño proporcionalmente con el contenido gráfico para el beneficio de cualquier persona con dificultades de visión.
6- Haz que sea accesible por teclado
Si tu SVG tiene contenido que es interactivo, necesitas asegurarte de que es accesible por teclado. Al igual que con HTML, la mejor manera de hacer esto es utilizar un elemento nativa diseñado para sacar el foco en el primer lugar.
<svg version="1.1" width="300" height="200" aria-labelledby="title desc"> <title id="title">Rectángulo verde</title> <desc id="desc">Un rectángulo de color verde claro con esquinas redondeadas y un borde verde oscuro</desc> <a xlink:href="http://example.com"> <rect width="75" height="50" rx="20" ry="20" fill="#90ee90" stroke="228b22" stroke-fill="1" /> <text x="35" y="30" font-size="1em" text-anchor="middle" fill="#000000">Website</text> </a> </svg>
El elemento SVG <a> permite que los usuarios de teclado se centren en el enlace al usar la tecla de tabulación para desplazarse por el contenido. Todas las combinaciones de lector / navegador de pantalla mencionados en este artículo permiten ese comportamiento.
7- Dale su característica concreta
Hemos llegado al punto en que podemos resolver el problema de que elemento <svg> no se muestre correctamente en todos los navegadores.
Todos los elementos tienen una finalidad. Ésta se debe mostrar a través de la API de accesibilidad del navegador, pero te recuerdo que sólo IE y Firefox muestran correctamente el elemento <svg> a AT, y sólo Jaws con IE utiliza esa información.
El atributo role de ARIA se puede utilizar para forzar la característica correcto para ser mostrada a los lectores de pantalla. En el caso del elemento <svg> podemos aplicar la función img .
<svg version="1.1" width="300" height="200" aria-labelledby="title desc" role="img"> <title id="title">Rectángulo verde</title> <desc id="desc">Un rectángulo de color verde claro con esquinas redondeadas y un borde verde oscuro</desc> <rect width="75" height="50" rx="20" ry="20" fill="#90ee90" stroke="228b22" stroke-fill="1" /> </svg>
Esto mejora las posibilidades del navegador considerablemente, IE, Firefox, Chrome y Safari lo muestran correctamente. La compatibilidad con lectores de pantalla sigue siendo un poco contradictoria, pero también mejora, con la excepción de Jaws y NVDA en Chrome, y Jaws en Firefox. VoiceOver con Safari, Chrome y TalkBack con Jawds y NVDA con IE ahora todos reconocen que hay contenidos gráficos en la página.
No siempre puede ser apropiado utilizar la función img en el elemento <svg> sin embargo. No pasa nada si el contenido SVG es puramente gráfico, pero si contiene contenido interactivo, puede ser necesario un enfoque diferente.
<svg version="1.1" width="300" height="200" aria-labelledby="title desc"> <title id="title">Rectángulo verde</title> <desc id="desc">Un rectángulo de color verde claro con esquinas redondeadas y un borde verde oscuro</desc> <a xlink:href="http://ejemplo.com" tabindex="0" role="link"> <rect width="75" height="50" rx="20" ry="20" fill="#90ee90" stroke="228b22" stroke-fill="1" /> <text x="35" y="30" font-size="1em" text-anchor="middle" fill="#000000">Website</text> </a> </svg>
En este ejemplo, la función de vínculo se ha aplicado al elemento <a> del SVG. Ahora todas las combinaciones de lector / navegador de pantalla que hemos visto en este artículo reconocen que el enlace es un enlace, con la excepción de NVDA en IE.
8- Crea una alternativa
Aunque puedes actuar en varios frentes para reforzar la accesibilidad SVG utilizando ARIA, el soporte de accesibilidad nativo para SVG entre navegadores y AT sigue evolucionando. SVG 2.0 va a cambiar esto, pero por ahora hay que ser realistas sobre el actual estado de las cosas.
Cuando creas algo en SVG, es bueno para proporcionar la misma información en un formato que tenga un mejor soporte de accesibilidad. Si el contenido SVG es puramente gráfico, utiliza los elementos <title> y <desc> de ARIA para mejorarlo.
Si tu SVG contiene algo más complejo o interactivo, entonces necesitas presentarlo de otras maneras. Por ejemplo, la información contenida en un gráfico SVG también se puede proporcionar en una tabla HTML, por ejemplo desglosando la información en pestañas.
En algunos aspectos, SVG es la tecnología olvidada de la web. Tiene un enorme potencial práctico y creativo, y también de accesibilidad utilizando los recursos que hemos sugerido en este artículo.
Comentarios