SVG accesibles: inclusión más allá de los patrones

Los gráficos vectoriales escalables (SVG) se convirtieron en un estándar abierto de W3C en 1999, cuando la nueva tecnología era el teléfono Blackberry, Napster invadió por primera vez los dormitorios universitarios y el error Y2K provocó miedo en todos nosotros. Avance rápidamente a nuestro mundo digital moderno y notará que, si bien las otras tendencias tecnológicas han disminuido, los SVG todavía existen y prosperan.

Esto se debe en parte a que los SVG tienen una huella pequeña para una fidelidad visual tan alta, en un mundo donde el ancho de banda y el rendimiento importan más que nunca, especialmente en dispositivos móviles y situaciones/ubicaciones donde los datos son escasos. Pero también porque los SVG son muy flexibles con sus estilos integrados, interactividad y opciones de animación. Lo que podemos hacer con los SVG hoy en día va mucho más allá de las formas básicas de antaño.

Si nos enfocamos en el aspecto de accesibilidad de los SVG, también hemos recorrido un largo camino. Hoy en día, tenemos muchos patrones y técnicas sólidas para ayudarnos a optimizar la inclusión. Esto es cierto independientemente de si está creando iconos, imágenes simples o imágenes más complejas.

Si bien el patrón específico que decida usar puede variar según su situación particular y el nivel de cumplimiento de las WCAG objetivo, la realidad es que la mayoría de las personas se detiene allí, centrándose en el cumplimiento del código y no en los usuarios finales reales y sus necesidades. Si la verdadera inclusión se encuentra más allá de los patrones, ¿qué otros factores debemos considerar al diseñar y desarrollar SVG accesibles?

SVG color y contraste

El enfoque principal de los SVG accesibles es el cumplimiento de los lectores de pantalla, que es solo una parte del problema y parte de la solución. A nivel mundial, las personas con baja visión y daltonismo superan en número a las personas ciegas 14:1. Estamos hablando de la asombrosa cifra de 546 millones en total (246 millones de usuarios con baja visión más 300 millones de usuarios daltónicos) frente a 39 millones de usuarios que son legalmente ciegos. Muchas personas con problemas de visión y daltónicos no confían en los lectores de pantalla, sino que pueden usar herramientas como el cambio de tamaño del navegador, hojas de estilo personalizadas o software de ampliación para ayudarlos a ver lo que hay en la pantalla. Para estos 546 millones de personas, la salida del lector de pantalla probablemente no sea tan importante para ellos como asegurarse de que el color y el contraste sean lo suficientemente buenos como para que puedan ver el SVG en la pantalla, pero ¿cómo hacemos para verificar esto?

herramientas y cheques

El primer paso que debe tomar al diseñar su paleta de colores SVG es revisar las pautas de relación de contraste de color de WCAG. Si bien los SVG y otros íconos estaban exentos de los requisitos de relación de contraste de color no hace mucho tiempo (al apuntar al cumplimiento de WCAG AA), la actualización reciente de las pautas WCAG 2.1 ha hecho que todas las imágenes esenciales que no sean texto deben cumplir con una relación de contraste de al menos menos 3:1 contra colores adyacentes. Básicamente, significa que si su SVG desapareciera, ¿cambiaría fundamentalmente la información o la funcionalidad del contenido? Si puede responder "no", es probable que esté exento de esta directriz. Si puede responder "sí" o "tal vez", entonces debe asegurarse de que las proporciones de contraste de color de su SVG estén bajo control.

Un ejemplo de una imagen sin texto esencial es un ícono SVG que se usa como un botón o enlace de CTA, como el que vemos en este botón de inicio. En este SVG, vemos un dibujo lineal de una casa sin texto visual. Cuando observamos el código, vemos el texto "Inicio" en un lapso con una clase llamada "solo sr" (solo lector de pantalla). Esta clase, junto con el CSS relacionado, oculta el texto de intervalo a los usuarios videntes, pero no a los usuarios de AT (este es solo un ejemplo de un patrón de imagen/gráfico accesible) .

Este es un buen primer paso, pero elegir el patrón SVG correcto es una pieza del rompecabezas; otra pieza es el contraste de color entre el ícono y su fondo. Volviendo al ejemplo, a primera vista parece que ambos SVG podrían ser accesibles. Sin embargo, cuando usamos una herramienta de contraste de color y probamos el icono de la casa contra su fondo, vemos que el primer SVG no cumple con una relación de contraste de color de 2:1 entre el trazo ( #8f8f8f ) y el fondo ( #cccccc ), mientras que el el segundo SVG pasa con una relación de contraste de color de 3:1 entre el trazo ( #717171 ) y el fondo ( #cccccc ). Al usar el mismo patrón accesible, pero dando un paso más y cambiando el color del trazo a algo un poco más oscuro, hicimos que nuestro SVG fuera más inclusivo para una gama más amplia de habilidades.

Para verificar las proporciones de contraste de color accesibles, hay muchas herramientas disponibles para su uso. Para una verificación rápida del punto de contraste de color, puede usar Contrast Checker en Chrome DevTools. Para verificar el contraste de color en diseños no codificados, consulte la herramienta Analizador de contraste de color. Y para una revisión de la paleta de colores, A11y Color Palette es una excelente manera de ayudarlo a ver qué combinaciones de colores son las más accesibles. Por supuesto, asegúrese de probar algunas de las herramientas y elija la que funcione mejor para usted y su equipo: la mejor herramienta es la que realmente usa.

Modo claro/oscuro

Más allá de verificar las proporciones de contraste de color, también debe considerar la consulta de medios cada vez más popular y compatible llamada @prefers-color-scheme que permite a un usuario elegir una versión con un tema claro u oscuro del sitio web o la aplicación que está visitando. Si bien esta consulta de medios no reemplaza la verificación de las proporciones de contraste de color, puede brindar a sus usuarios más opciones en lo que respecta a la experiencia general de su sitio web o aplicación.

Permitir que sus usuarios elijan su experiencia siempre es mejor que asumir que sabe lo que quieren.

“

Al igual que con otras consultas de medios, para ver los cambios de tema claro/oscuro, el sitio web o el desarrollador de la aplicación debe agregar un código adicional para la consulta. Volviendo al ejemplo anterior del ícono de la casa, puede ver en el siguiente código que el CSS controla los colores de trazo, relleno y fondo del SVG. Dado que estos elementos de estilo están controlados externamente y no están codificados en el marcado SVG, podemos agregar algunas líneas adicionales de CSS para que el SVG funcione en un tema oscuro.

Luz/modo predeterminado:

 body { background: #cccccc; } .nav-home1 { stroke: #8f8f8f; } .nav-home2 { stroke: #717171; } #home-svg1, #home-svg2 { fill: #64b700; } #home-door-svg1, #home-door-svg2 { fill: #b426ff; }

Modo oscuro:

 @media (prefers-color-scheme: dark) { body { background: #333333; } .nav-home1 { stroke: #606060; } .nav-home2 { stroke: #7C7C7C; } }

Como muestra este ejemplo, configurar sus diseños para usar CSS para controlar elementos de estilo significa que crear una versión de tema oscuro de su SVG puede ser relativamente simple. Por el contrario, si tiene estilos codificados en el marcado SVG, es posible que deba volver a imaginar su SVG de una manera que permita que CSS tenga más control sobre el diseño. O puede considerar crear una versión oscura completamente nueva de su SVG y cambiar la versión clara cuando cambien las preferencias del tema. Solo recuerde, si planea mostrar/ocultar diferentes imágenes según el modo de usuario, ¡también debe ocultar el SVG no visible de los usuarios de AT!

Nota: en este ejemplo en particular, el tema predeterminado ya era claro, por lo que tenía sentido convertirlo también en la experiencia predeterminada y crear un tema oscuro para una experiencia alternativa. De lo contrario, si empezáramos con un tema oscuro, podríamos haber hecho lo contrario haciendo que el tema oscuro fuera la experiencia predeterminada y usando @media (prefers-color-scheme: light) para crear un tema claro.

En el siguiente ejemplo, estamos viendo un SVG más complejo con versiones de modo claro y oscuro a través de la consulta de medios @prefers-color-scheme . Nuestro amigo Karma Chameleon (en formato SVG) tiene un tema oscuro y un tema claro/predeterminado. Al cambiar la configuración de preferencia claro/oscuro (configuración de modo oscuro de Mac OS + Win OS) y navegar a un navegador que admita la consulta de medios @prefers-color-scheme , puede ver cómo cambia el entorno. En el modo claro/predeterminado, Karma Chameleon está sentado en una rama en un bosque verde rodeado por una mariposa roja que revolotea. En modo oscuro, está sentada en una rama en el espacio con un cohete azul que pasa zumbando. En ambos entornos, sus colores cambian automáticamente y sus ojos se mueven.

Accesibilidad de color y contraste

Si bien los ejemplos anteriores son formas divertidas de mostrar lo que puede hacer con el color y el contraste y la consulta de medios @prefers-color-scheme , existen algunas razones realmente buenas del mundo real para considerar agregar un tema oscuro, que incluyen:

• Los temas oscuros son útiles para las personas con fotofobia o sensibilidad a la luz. Las personas con fotofobia pueden desencadenar dolores de cabeza y migrañas cuando ven un sitio web o una aplicación que es demasiado brillante.
• Algunas personas encuentran que el texto en un sitio web o aplicación es más fácil de leer en modo oscuro, mientras que otros pueden encontrar que los temas más claros son más fáciles de leer; básicamente se trata de darle una opción al usuario y permitirle establecer su preferencia.
• A diferencia de otras consultas de medios basadas en color o contraste como @inverted-colors (actualmente solo compatible con Safari) y @forced-colors (desarrollado por ingenieros de Edge/IE con compatibilidad con Chromium próximamente), la compatibilidad del navegador es bastante universal para @prefers-color-scheme : por lo que esta consulta de medios es útil hoy en día y debería quedarse por un tiempo. Además, con los cambios recientes en MS Edge usando Chromium bajo el capó, hay aún más soporte para esta consulta de medios en el futuro (RIP -ms-high-contrast-mode ).

Animación SVG

Junto con el color y el contraste, la forma en que su SVG se mueve en la pantalla es otro aspecto a considerar al diseñar y desarrollar teniendo en cuenta la inclusión. Las pautas de movimiento de las WCAG son claras: la información no esencial en movimiento, parpadeo o desplazamiento que se inicia automáticamente, dura más de cinco segundos y forma parte de otros elementos de la página debe permitir al usuario pausarla, detenerla u ocultarla. Pero, ¿por qué necesitamos esta regla?

Para algunos usuarios, mover, parpadear o desplazar el contenido puede ser una gran distracción. Las personas con TDAH y otros trastornos por déficit de atención pueden distraerse tanto con sus SVG animados que olvidan por qué visitaron su sitio web/aplicación en primer lugar. Mientras que para otras personas, el movimiento puede desencadenar reacciones físicas. Por ejemplo, las personas con problemas vestibulares pueden tener náuseas y mareos al ver el movimiento. Mientras que otros pueden sufrir una convulsión al ver contenido que parpadea o es brillante, una situación que obviamente desea evitar.

Si bien a todos nos gusta estar "encantados" con las funciones interesantes de sitios web y aplicaciones, debemos lograr un equilibrio entre ser creativos y distraer (o dañar) a nuestros usuarios durante su interacción con el contenido en movimiento.

“

Parada manual/automática

Dado que las animaciones SVG, al igual que otros contenidos en movimiento, no deben reproducirse automáticamente durante más de cinco segundos, debe crear una forma para que los usuarios pausen o detengan la animación. Una forma de hacer esto es crear un botón de alternar JS para reproducir/pausar la animación.

Si su SVG es grande o es la característica principal de su sitio web (por ejemplo, animaciones que aparecen y desaparecen a medida que se desplaza hacia abajo en una página), un botón de pausa/reproducción en la parte superior de la pantalla podría ser una opción realista para controlar toda la experiencia de la página. Si sus archivos SVG tienen una escala más pequeña o están relacionados con la entrada del usuario (por ejemplo, se produce una animación cuando un usuario envía un formulario), un botón de pausa/reproducción puede no ser realista para cada imagen individual, por lo que una opción alternativa es codificar la animación para que se detenga. a los cinco segundos frente a reproducirlo en un bucle infinito. ### Movimiento reducido

Además de usar una opción de pausa/reproducción o crear un bucle de animación finito, también puede considerar agregar una consulta de medios @prefers-reduced-motion para abordar la animación en sus SVG. Similar al ejemplo del tema claro/oscuro, la consulta de medios @prefers-reduced-motion verifica la configuración del usuario para las restricciones de movimiento y luego implementa una experiencia visual basada en su preferencia. En el caso de @prefers-reduced-motion , un usuario puede optar por minimizar la cantidad de animación o movimiento que ve.

En el siguiente ejemplo, el SVG animado "escribe" una palabra a medida que se carga la página; esta es su animación predeterminada. En la versión de movimiento reducido, el SVG está estacionario y la palabra se carga sin la animación. Dependiendo de la complejidad de su animación SVG y de cómo desea que se vea la experiencia de movimiento reducido, la cantidad de código adicional involucrada puede variar.

Movimiento predeterminado:

 .svg-color { stroke: #ff4b00; } #a11y-svg { stroke-linecap: round; padding: 0.25rem; stroke-dasharray: 1000; stroke-dashoffset: 0; -webkit-animation: dash 5s linear forwards; animation: dash 5s linear forwards; overflow: visible; font-size: 100px; height: 0; margin: 10rem 0 5rem; position: relative; } #a11y-svg-design { cursor: pointer; stroke-width: 2px; } @-webkit-keyframes dash { from { stroke-dashoffset: 1000; fill: transparent; } to { stroke-dashoffset: 0; fill: #ff4b00; } }

Movimiento reducido:

 @media (prefers-reduced-motion: reduce) { #a11y-svg { animation: none; fill: #ff4b00; } }

Tenga en cuenta que tener el código @prefers-reduced-motion en su lugar es un paso para hacer que sus SVG sean más accesibles, pero también debe considerar la forma en que se reduce el movimiento. Por ejemplo, supongamos que crea una versión más lenta de su animación SVG usando @prefers-reduced-motion . Sin embargo, la versión más lenta está en un bucle infinito, por lo que la animación dura más de cinco segundos, lo que viola una parte de las reglas de movimiento de las WCAG. Si, en cambio, crea una versión de movimiento reducido de su SVG animado que detiene la animación en cinco segundos, entonces pasaría esa parte de la regla. Este sutil cambio de código equivale a dos experiencias de usuario completamente diferentes.

En el siguiente ejemplo, Karma Chameleon regresa con una consulta de medios @prefers-reduced-motion y el código relacionado. Al cambiar la configuración de movimiento (configuración de Mac, Win, Android e iOS) y usar un navegador que admita la consulta de medios @prefers-reduced-motion , puede ver el cambio de animación. En el modo de luz con movimiento reducido, Karma Chameleon en un bosque con una mariposa roja estacionaria. En modo oscuro con movimiento reducido, ella está en el espacio con un cohete azul estacionario en el fondo. En ambos entornos, sus colores y ojos también son fijos, ya que la animación SVG original se elimina por completo.

Accesibilidad de animación

Desde el punto de vista de la accesibilidad, hay algunas buenas razones para considerar limitar el movimiento en su pantalla o proporcionar animaciones alternativas en sus SVG, que incluyen:

• ¡Menos es más! Mantener sus animaciones SVG simples para personas con trastornos cognitivos y de atención puede ayudar con su experiencia de usuario en general. Esto es especialmente cierto para los SVG críticos para el contenido o la funcionalidad de su sitio web o aplicación, como la navegación, los botones, los enlaces o cualquier animación activada por la entrada del usuario.
• ¡No enfermes a la gente! Algunas personas con trastornos convulsivos, vestibulares y de la vista pueden desencadenar una reacción física por movimiento en sus SVG, así que sea responsable con sus diseños y código. Nota: debe volver a verificar cualquier SVG animado que pueda ser problemático en el área parpadeante/parpadeante, utilizando la Herramienta de análisis de epilepsia fotosensible (PEAT) gratuita para asegurarse de no desencadenar convulsiones con su contenido.
• La mayoría de los principales navegadores ahora admiten @prefers-reduced-motion media query tanto en dispositivos de escritorio como móviles, lo que significa que más personas pueden limitar su exposición a movimientos no deseados en sus pantallas. A diferencia de la consulta de medios @prefers-color-scheme que tiene muchos competidores, actualmente no hay otra consulta de medios disponible para reducir el movimiento.

Terminando

El color, el contraste y la animación están en el corazón de cada SVG. Los estudios informan que estos elementos visuales tienen un significado intrínseco, contribuyen al reconocimiento de la marca y están vinculados al valor percibido de una empresa, lo que convierte a los SVG en un área muy amplia donde los diseñadores y desarrolladores pueden tener un impacto directo e inmediato en nuestros usuarios.

Pero también es importante que no pensemos en la accesibilidad de SVG como algo para ayudar a "otras personas", porque ¿quién no se ha encontrado en una situación en la que tiene que luchar contra el resplandor en la pantalla de un dispositivo? O tiene migraña y los SVG siguen flotando dentro y fuera de la pantalla y lo enferman en lugar de “encantarlo”. ¿O tal vez visita un sitio web en un entorno con poca luz y el texto es difícil de leer debido al esquema de color gris sobre gris?

Con el uso de herramientas de accesibilidad, las pautas de WCAG y la adición y el apoyo continuos de nuevas consultas de medios CSS para permitir más opciones, podemos impactar a todas las personas de una manera más responsable e inclusiva.

Porque la verdadera inclusión digital es comprender que cada uno de nosotros puede beneficiarse de diseños y códigos más accesibles.

“