SVG accesibles: patrones perfectos para usuarios de lectores de pantalla
Publicado: 2022-03-10Si bien los gráficos vectoriales escalables (SVG) se introdujeron por primera vez a finales de los 90, su popularidad ha resurgido masivamente en la última década debido a su extrema flexibilidad, alta fidelidad y relativa ligereza en un mundo donde el ancho de banda y el rendimiento importan más que nunca. . Los avances en JavaScript y la introducción de consultas de medios CSS como @prefers-color-scheme y @prefers-reduced-motion han ampliado la funcionalidad de los SVG mucho más allá de su caso de uso inicial de simplemente mostrar imágenes vectoriales en un sitio web.
A medida que avanza la tecnología SVG, nuestra comprensión de cómo diseñamos y desarrollamos SVG también debe avanzar. Parte de ese avance incluye considerar el impacto de dichos diseños y códigos en humanos reales, también conocidos como nuestros usuarios finales.
Este artículo describe doce patrones SVG distintos que se encuentran "en la naturaleza" y cada descripción alternativa anunciada cuando se accede a través de diferentes combinaciones de sistemas operativos, navegadores y lectores de pantalla.
Por supuesto, los siguientes ejemplos no pretenden ser una lista exhaustiva de todos los patrones posibles que se utilizan en la esfera digital, pero destacan algunos de los patrones SVG más populares o ubicuos que puede encontrar. ¡Continúe leyendo para descubrir qué patrones SVG debe evitar y qué patrones son los más inclusivos!
Descripciones alternativas básicas utilizando la <img>
El primer grupo de cuatro patrones utiliza la etiqueta <img> que se vincula a un archivo SVG. Esta es una buena opción para imágenes básicas y sin complicaciones en su sitio web, aplicación u otro producto digital. Si bien el inconveniente de usar este patrón es que no puede controlar fácilmente muchos elementos visuales o animaciones como un SVG en línea, este patrón debería generar imágenes más livianas y rápidas en general y permitir un mantenimiento más fácil en los SVG que usa en múltiples ubicaciones.
Patrón #1: <img> + alt="[words]"
<img class="fox" alt="What does the fox say?" src="https://upload.wikimedia.org/wikipedia/commons/3/39/Toicon-icon-fandom-howl.svg"> Patrón #2: <img> + role="img" + alt="[words]"
<img role="img" class="fox" alt="What does the fox say?" src="https://upload.wikimedia.org/wikipedia/commons/3/39/Toicon-icon-fandom-howl.svg"> Patrón #3: <img> + role="img" + aria-label="[words]"
<img role="img" class="fox" aria-label="What does the fox say?" src="https://upload.wikimedia.org/wikipedia/commons/3/39/Toicon-icon-fandom-howl.svg"> Patrón #4: <img> + role="img" + aria-labelledby="[ID]"
<p class="visually-hidden">What does the fox say?</p> <img role="img" aria-labelledby="caption1" class="fox" src="https://upload.wikimedia.org/wikipedia/commons/3/39/Toicon-icon-fandom-howl.svg"> Descripciones alternativas básicas usando la etiqueta <svg>
El segundo grupo de cuatro patrones utiliza la etiqueta <svg> con un archivo SVG en línea. Aunque agregar el código SVG directamente en el marcado podría hacer que la página se cargue un poco más lentamente, esa pequeña ineficiencia se compensará al tener más control sobre los elementos visuales o las animaciones de sus imágenes. Al agregar su SVG al HTML directamente, también tiene más opciones cuando se trata de proporcionar información de imagen a los usuarios de su lector de pantalla.
Patrón #5: <svg> + role="img" + <title>
<svg role="img" ...> <title>What does the fox say?</title> [design code] </svg> Patrón #6: <svg> + role="img" + <text>
<svg role="img" ...> <text class="visually-hidden" font-size="0">What does the fox say?</text> [design code] </svg> Patrón #7: <svg> + role="img" + <title> + aria-describedby="[ID]"
<svg role="img" ...> <title>What does the fox say?</title> [design code] </svg> Patrón #8: <svg> + role="img" + <title> + aria-labelledby="[ID]"
<svg role="img" aria-labelledby="fox8" ...> <title>What does the fox say?</title> [design code] </svg> Descripciones alternativas extendidas usando la etiqueta <svg>
El último grupo de cuatro patrones utiliza la etiqueta <svg> con un archivo SVG en línea, al igual que el segundo grupo. Sin embargo, en este caso, estamos ampliando las descripciones alternativas simples con información adicional debido a la complejidad de la imagen.
Esta sería una buena opción de patrón para imágenes más complicadas que necesitan más explicación. Sin embargo, es importante tener en cuenta que hay algunas personas con discapacidades, como trastornos cognitivos, que podrían beneficiarse de tener esta información de imagen adicional disponible en la pantalla en lugar de enterrada en el código SVG.
Según el tipo y la cantidad de información que necesite agregar a su SVG, podría considerar adoptar un enfoque completamente diferente.
Patrón #9: <svg> + role="img" + <title> + <text>
<svg role="img" ...> <title>What does the fox say?</title> <text class="visually-hidden" font-size="0">Will we ever know?</text> [design code] </svg> Patrón #10: <svg> + role="img" + <title> + <desc>
<svg role="img" ...> <title>What does the fox say?</title> <desc>Will we ever know?</desc> [design code] </svg> Patrón #11: <svg> + role="img" + <title> + <desc> + aria-labelledby="[ID]"
<svg role="img" aria-labelledby="fox11 description11" ...> <title>What does the fox say?</title> <desc>Will we ever know?</desc> [design code] </svg> Patrón #12: <svg> + role="img" + <title> + <desc> + aria-describedby="[ID]"
<svg role="img" ...> <title>What does the fox say?</title> <desc>Will we ever know?</desc> [design code] </svg> Vea el CodePen completo [Comparación de patrones SVG accesibles (versión de Fox)] (https://codepen.io/smashingmag/pen/dyvvbKj) de Carie Fisher.
Ganadores y perdedores del patrón SVG
Al ejecutar varios lectores de pantalla en diferentes combinaciones de sistemas operativos y navegadores, vemos patrones definidos que emergen en la tabla de resultados finales. Hay algunos ganadores y perdedores de patrones SVG claros , además de algunos patrones en algún punto intermedio que podría implementar siempre que los conozca y pueda aceptar sus limitaciones. Mirando la tabla de resultados, podemos concluir lo siguiente:
Descripciones alternativas básicas usando la <img> (Grupo 1)
Mejor de la exposición
- Patrón 2 :
<img> + role="img"+alt="[words]" - Patrón 3 :
<img>+role="img"+aria-label="[words]"
Con precaución
- Patrón 4 :
<img>+role="img"+aria-labelledby="[ID]"
No recomendado
- Patrón 1 :
<img>+alt="[words]"
Descripciones alternativas básicas usando la etiqueta <svg> (Grupo 2)
Mejor de la exposición
- Patrón 5 :
<svg>+role="img"+<title> - Patrón 8 :
<svg>+role="img"+<title>+aria-labelledby="[ID]"
Con precaución
- Patrón 7 :
<svg>+role="img"+<title>+aria-describedby="[ID]"
No recomendado
- Patrón 6 :
<svg>+role="img"+<text>
Descripciones alternativas extendidas usando la etiqueta <svg> (Grupo 3)
Mejor de la exposición
- Patrón 11 :
<svg>+role="img"+<title>+<desc>+aria-labelledby="[ID]"
Nota : si bien este patrón no es perfecto, ya que repite descripciones alternativas, no ignoró ninguno de los elementos de la prueba, a diferencia de los patrones de "precaución".
Con precaución
- Patrón 9 :
<svg>+role="img"+<title>+<text> - Patrón 10 :
<svg>+role="img"+<title>+<desc> - Patrón 12 :
<svg>+role="img"+<title>+<desc>+aria-describedby="[ID]"
No recomendado
- Ninguno de los patrones de este grupo falló completamente las pruebas.
Resultados de las pruebas
Consulte el Pen [Resultados de las pruebas] (https://codepen.io/smashingmag/pen/YzZQBwG) de Carie Fisher.
Terminando
Es importante tener en cuenta que parte de la interpretación de los resultados de las pruebas de patrón SVG es comprender que los creadores de cada lector de pantalla tienen navegadores recomendados que son totalmente compatibles. Esto no significa que no debas o no puedas usar un lector de pantalla en un navegador diferente, solo significa que si lo haces, los resultados pueden no ser tan precisos como si usaras los recomendados.
Las pruebas de patrones para este artículo incluyeron algunas combinaciones de navegadores y lectores de pantalla que pueden caer en la categoría "margen", pero también hay notas sobre qué combinaciones de sistemas operativos, navegadores y lectores de pantalla se recomiendan para su propia prueba. Los resultados de estas pruebas deberían ayudarlo a tomar la mejor decisión posible sobre el patrón SVG, en función de las necesidades y limitaciones de su patrón.
Un recordatorio de que antes de decidirse por un patrón, asegúrese de conocer los conceptos básicos de cómo y cuándo crear imágenes accesibles y que comprende completamente la información alternativa necesaria para los diferentes tipos de imágenes.
Si necesita ayuda adicional para decidir qué patrón usar para su entorno, consulte el artículo Bueno, mejor, mejor: desenredar el complejo mundo de los patrones accesibles para ayudarlo a navegar por las aguas difíciles de los patrones accesibles. Armado con toda esta información y solo un poco de esfuerzo, sus SVG están en camino de ser más inclusivos para todos.
Nota del editor : puede aprender las prácticas recomendadas sobre accesibilidad con Carie en su próximo taller en línea sobre Patrones de front-end accesibles , con pautas, herramientas de prueba, tecnología de asistencia y patrones de diseño inclusivos. En línea y en vivo.