Modèles parfaits pour les utilisateurs de lecteurs d'écran

À propos de l'auteur

Carie Fisher est une auteur, conférencière et développeur passionnée par l'intersection du code frontal et de l'UX, de l'accessibilité numérique et de la diversité dans…
En savoir plus sur
Carie
↬

Découvrez quels modèles SVG nous devrions éviter et quels modèles sont les plus inclusifs lorsque vous comparez différentes combinaisons de systèmes d'exploitation, de navigateurs et de lecteurs d'écran. Carie animera également un atelier en ligne sur Modèles frontaux accessibles tout autour de l'accessibilité frontale.

Alors que les graphiques vectoriels évolutifs (SVG) ont été introduits pour la première fois à la fin des années 90, ils ont vu un énorme regain de popularité 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 comptent plus que jamais. Les progrès de JavaScript et l'introduction de requêtes multimédias CSS telles que @ prefers-color-scheme et @ prefer-reduction-motion ont étendu la fonctionnalité des SVG bien au-delà de leur cas d'utilisation initial de simplement affichage d'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 des SVG doit également progresser. Une partie de cette avancée comprend la prise en compte de l'impact de ces conceptions et codes 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 lorsque 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 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 balise

Le premier groupe de quatre modèles utilise la balise reliant un SVG déposer. C'est un bon choix pour les images simples et simples sur votre site Web, application ou autre produit numérique. Bien que l'utilisation de ce modèle présente l'inconvénient de ne pas pouvoir contrôler facilement de nombreux éléments visuels ou animations en tant que SVG en ligne, ce modèle devrait rendre des images plus claires et plus rapides dans l'ensemble et permettre une maintenance plus facile sur les SVG que vous utilisez à plusieurs endroits.

Pattern # 1: + alt = "[words]"

Motif n ° 2: + role = "img" + alt = "[words]"

Motif n ° 3: + role = "img" + aria-label = "[words]"

Pattern # 4: + role = " img " + aria-labelledby =" [ID] "

 Que dit le renard? 

Descriptions alternatives de base Usin g La balise

Le deuxième groupe de quatre modèles utilise la balise avec un fichier SVG en ligne. Bien que l'ajout du code SVG directement dans le balisage puisse potentiellement ralentir le chargement de la page, cette inefficacité mineure sera compensée par un meilleur contrôle des éléments visuels ou des animations de vos images. En ajoutant directement votre SVG au HTML, vous avez également plus d'options pour fournir des informations d'image aux utilisateurs de votre lecteur d'écran.

Motif n ° 5: + role = "img" + [design code]

Motif n ° 6: + role = "img" +

Motif n ° 7: + role = "img" + [design code]

Motif n ° 8: + role = "img" + [design code]

Descriptions alternatives étendues utilisant le Balise

T Le dernier groupe de quatre modèles utilise la balise 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 modèle 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 des troubles cognitifs – pourraient bénéficier de cette information d'image supplémentaire facilement disponible sur l'écran au lieu d'être enterrée 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 totalement différente.

Motif n ° 9: + role = "img" + Saurons-nous jamais? [design code]

Motif n ° 10: + role = "img" + [19659042] +

Motif n ° 11: + role = "img" ] + Le saurons-nous un jour? [design code]

Motif n ° 12: + role = "img" + Saurons-nous jamais? [design code]

Voir l'intégralité du CodePen [Accessible SVG Pattern Comparison (Fox Version)] (https://codepen.io// smashingmag / pen / dyvvbKj) par Carie Fisher .

Gagnants et perdants des modèles 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 quelques gagnants et perdants de modèles SVG clairs plus quelques modèles quelque part au milieu que vous pouvez implémenter aussi longtemps que vous en êtes conscient et pouvez accepter leurs limites. En examinant le tableau des résultats, nous pouvons conclure ce qui suit:

Descriptions alternatives de base utilisant la balise (groupe 1)

Best In Show

• Pattern 2 : + role = " img " + alt =" [words] "
• Motif 3 : + role =" img " + aria-label =" [words] "

Soyez prudent

• Motif 4 : + role =" img " + aria-labelledby =" [ID] "

Non recommandé

• Modèle 1 : + alt = "[words]"

Descriptions alternatives de base utilisant la balise (Groupe 2)

Best In Show

• Modèle 5 : + role = "img" +