SVG accessibles : modèles parfaits pour les utilisateurs de lecteurs d'écran
Publié: 2022-03-10Alors que les graphiques vectoriels évolutifs (SVG) ont été introduits pour la première fois à la fin des années 90, ils ont connu un regain de popularité massif au cours de la dernière décennie en raison de leur extrême flexibilité, de leur haute fidélité et de leur relative légèreté dans un monde où la bande passante et les performances importent plus que jamais. . Les progrès de JavaScript et l'introduction de requêtes média CSS telles que @prefers-color-scheme et @prefers-reduced-motion ont étendu la fonctionnalité des SVG bien au-delà de leur cas d'utilisation initial consistant simplement à afficher des images vectorielles sur un site Web.
À mesure que la technologie SVG progresse, notre compréhension de la façon dont nous concevons et développons les SVG doit également progresser. Une partie de cette avancée comprend la prise en compte de l'impact de ces conceptions et de ce code sur les humains réels, c'est-à-dire nos utilisateurs finaux.
Cet article décrit douze modèles SVG distincts trouvés "dans la nature" et chaque description alternative annoncée lorsqu'elle est accessible par différentes combinaisons de systèmes d'exploitation, de navigateurs et de lecteurs d'écran.
Bien sûr, les exemples suivants ne sont pas censés être une liste exhaustive de tous les modèles possibles utilisés dans la sphère numérique, mais ils mettent en évidence certains des modèles SVG les plus populaires ou omniprésents que vous pourriez rencontrer. Continuez à lire pour découvrir quels modèles SVG vous devriez éviter et quels modèles sont les plus inclusifs !
Descriptions alternatives de base utilisant la <img>
Le premier groupe de quatre modèles utilise la <img> liée à un fichier SVG. C'est un bon choix pour les images basiques et simples sur votre site Web, votre application ou tout autre produit numérique. Bien que l'inconvénient de l'utilisation de ce modèle soit que vous ne pouvez pas contrôler facilement de nombreux éléments visuels ou animations en tant que SVG en ligne, ce modèle devrait rendre les images plus légères et plus rapides dans l'ensemble et permettre une maintenance plus facile des SVG que vous utilisez à plusieurs endroits.
Modèle #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"> Modèle 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"> Modèle #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"> Modèle #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"> Descriptions alternatives de base utilisant la <svg>
Le deuxième groupe de quatre modèles utilise la <svg> avec un fichier SVG en ligne. Bien que l'ajout du code SVG directement dans le balisage puisse potentiellement ralentir un peu le chargement de la page, cette inefficacité mineure sera compensée en ayant plus de contrôle sur les éléments visuels ou les animations de vos images. En ajoutant directement votre SVG au HTML, vous disposez également de plus d'options pour fournir des informations sur l'image aux utilisateurs de votre lecteur d'écran.
Modèle #5 : <svg> + role="img" + <title>
<svg role="img" ...> <title>What does the fox say?</title> [design code] </svg> Modèle #6 : <svg> + role="img" + <text>
<svg role="img" ...> <text class="visually-hidden" font-size="0">What does the fox say?</text> [design code] </svg> Motif #7 : <svg> + role="img" + <title> + aria-describedby="[ID]"
<svg role="img" ...> <title>What does the fox say?</title> [design code] </svg> Motif #8 : <svg> + role="img" + <title> + aria-labelledby="[ID]"
<svg role="img" aria-labelledby="fox8" ...> <title>What does the fox say?</title> [design code] </svg> Descriptions alternatives étendues utilisant la <svg>
Le dernier groupe de quatre modèles utilise la <svg> avec un fichier SVG en ligne, un peu comme le deuxième groupe. Cependant, dans ce cas, nous étendons les descriptions alternatives simples avec des informations supplémentaires en raison de la complexité de l'image.
Ce serait un bon choix de motif pour les images plus compliquées qui nécessitent plus d'explications. Cependant, il est important de garder à l'esprit que certaines personnes handicapées - comme les troubles cognitifs - pourraient bénéficier de la disponibilité de ces informations d'image supplémentaires sur l'écran au lieu d'être enfouies dans le code SVG.
Selon le type et la quantité d'informations que vous devez ajouter à votre SVG, vous pouvez envisager d'adopter une approche complètement différente.
Modèle #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> Modèle #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> Modèle 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> Modèle 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> Voir le CodePen complet [Comparaison des modèles SVG accessibles (version Fox)] (https://codepen.io/smashingmag/pen/dyvvbKj) par Carie Fisher.
Gagnants et perdants du motif SVG
En exécutant divers lecteurs d'écran sur différentes combinaisons de systèmes d'exploitation et de navigateurs, nous voyons des modèles définis émerger dans le tableau des résultats finaux. Il y a des gagnants et des perdants de modèles SVG clairs , ainsi que quelques modèles quelque part au milieu que vous pouvez implémenter tant que vous en êtes conscient et que vous pouvez accepter leurs limites. En examinant le tableau des résultats, nous pouvons conclure ce qui suit :
Descriptions alternatives de base utilisant la <img> (Groupe 1)
Meilleur de l'émission
- Modèle 2 :
<img> + role="img"+alt="[words]" - Modèle 3 :
<img>+role="img"+aria-label="[words]"
Faites attention
- Modèle 4 :
<img>+role="img"+aria-labelledby="[ID]"
Non recommandé
- Modèle 1 :
<img>+alt="[words]"
Descriptions alternatives de base utilisant la <svg> (Groupe 2)
Meilleur de l'émission
- Motif 5 :
<svg>+role="img"+<title> - Motif 8 :
<svg>+role="img"+<title>+aria-labelledby="[ID]"
Faites attention
- Motif 7 :
<svg>+role="img"+<title>+aria-describedby="[ID]"
Non recommandé
- Motif 6 :
<svg>+role="img"+<text>
Descriptions alternatives étendues utilisant la <svg> (Groupe 3)
Meilleur de l'émission
- Motif 11 :
<svg>+role="img"+<title>+<desc>+aria-labelledby="[ID]"
Remarque : Bien que ce modèle ne soit pas parfait car il répétait des descriptions alternatives, il n'a ignoré aucun des éléments du test, contrairement aux modèles "utiliser la prudence".
Faites attention
- Motif 9 :
<svg>+role="img"+<title>+<text> - Motif 10 :
<svg>+role="img"+<title>+<desc> - Motif 12 :
<svg>+role="img"+<title>+<desc>+aria-describedby="[ID]"
Non recommandé
- Aucun des motifs de ce groupe n'a complètement échoué aux tests.
Résultats des tests
Voir le stylo [résultats des tests] (https://codepen.io/smashingmag/pen/YzZQBwG) par Carie Fisher.
Emballer
Il est important de noter qu'une partie de l'interprétation des résultats des tests de modèle SVG consiste à comprendre que les créateurs de chaque lecteur d'écran ont un ou plusieurs navigateurs recommandés qu'ils prennent entièrement en charge. Cela ne signifie pas que vous ne devriez pas ou ne pourriez pas utiliser un lecteur d'écran sur un autre navigateur, cela signifie simplement que si vous le faites, les résultats pourraient ne pas être aussi précis que si vous utilisiez celui(s) recommandé(s).
Les tests de modèles pour cet article incluaient certaines combinaisons de navigateurs et de lecteurs d'écran pouvant appartenir à la catégorie "frange", mais il existe également des notes sur les combinaisons de systèmes d'exploitation, de navigateurs et de lecteurs d'écran recommandées pour vos propres tests. Les résultats de ces tests devraient vous aider à prendre la meilleure décision de modèle SVG possible, en fonction de vos besoins et contraintes en matière de modèle.
Un rappel qu'avant de choisir un modèle, assurez-vous de connaître les bases de comment et quand créer des images accessibles et que vous comprenez parfaitement les informations alternatives requises pour les différents types d'images.
Si vous avez besoin d'aide supplémentaire pour décider quel modèle utiliser pour votre environnement, consultez l'article Good, Better, Best : Untangling The Complex World Of Accessible Patterns pour vous aider à naviguer dans les eaux délicates des modèles accessibles. Armés de toutes ces informations et d'un peu d'effort, vos SVG sont sur la bonne voie pour être plus inclusifs pour tous.
Note de l'éditeur : Vous pouvez apprendre les meilleures pratiques en matière d'accessibilité avec Carie dans son prochain atelier en ligne sur les modèles frontaux accessibles — avec des lignes directrices, des outils de test, des technologies d'assistance et des modèles de conception inclusifs. En ligne et en direct.