Accessibilité aux icônes SVG et Emoji

SVG and Emoji Icon Accessibility

Passons en revue quelques conseils sur l'iconographie accessible : les SVG, les entités HTML et les emoji !

SVG

Nous savons tous que les icônes SVG sont fantastiques pour de nombreuses raisons (telles que l'évolutivité, leur capacité à s'animer et leur capacité à s'adapter et à répondre aux exigences d'une fenêtre d'affichage), mais comment s'assurer qu'elles sont accessibles ?

Jetons un coup d'œil à quelques scénarios différents où SVG intégré dans HTML peut être utilisé et comment s'assurer qu'ils sont accessibles aux personnes utilisant une technologie d'assistance.

Informatif ou décoratif ?

Comme les images sur le Web utilisant l'élément img , nous devons déterminer si un SVG est informatif (sa présence est digne d'ajouter du contenu au contexte actuel) ou est purement décoratif (ajoutant un peu de plaisir pour les yeux pour les utilisateurs voyants, mais pas important suffisant pour justifier une alternative textuelle.)

Informatif

Dans le cas où un SVG est informatif , il existe un modèle qui restitue le SVG et son contenu de manière cohérente dans les navigateurs et lecteurs d'écran modernes. Ce modèle se compose de trois éléments clés :

  • L'attribut role appliqué à l'élément SVG lui-même, avec une valeur de "img" - garantit que la technologie d'assistance annonce son rôle en tant que "image"
  • L'attribut aria-labelledby sur le SVG avec sa valeur définie pour correspondre à l' id de l'élément de title SVG - garantit que la technologie d'assistance annonce systématiquement la valeur dans le title
  • L'élément de title SVG avec son contenu défini sur le nom accessible du SVG
 <svg aria-labelledby="icon-title" role="img"> <title id="icon-title">SVG image description</title> <!-- Other required elements... --> </svg>

Avec ces éléments maintenant en place, tous les navigateurs + lecteurs d'écran annonceront avec précision le contenu SVG comme :

"Description d'image SVG, image"

Quand appliquer cela

Voici quelques cas où cela serait utilisé :

  • Un SVG utilisé comme logo ou image autonome ajoutant du contenu à une page
  • Une icône de réseau social intégrée dans un lien sans autre texte
  • Une icône isolée intégrée dans un bouton d'action sans autre texte
  • Un point dans un graphique ou un tableau

Lorsque le SVG est le seul élément de contenu à l'intérieur d' a élément button ou a, ce modèle sert de nom accessible à l'élément, donnant un contexte à l'objectif de l'élément actuellement focalisé.

Décoratif

Un SVG décoratif n'existe que pour servir d'aide visuelle aux utilisateurs voyants. Dans ce cas, nous devons configurer le SVG pour qu'il soit "caché" aux utilisateurs de lecteurs d'écran, car annoncer la présence d'un élément sans contenu ne serait qu'une nuisance.

Tout comme son cousin informatif, le SVG décoratif nécessite quelques attributs supplémentaires :

  • L'attribut de role avec une valeur de "présentation" - aide à éliminer toute signification sémantique
  • L'attribut aria-hidden avec sa valeur définie sur "true" - masque le SVG de la technologie d'assistance
  • L'attribut focusable défini sur "false" - cela permet d'éviter un bogue d'Internet Explorer où si le SVG était intégré dans un élément focusable, tel qu'un a ou un button , cela entraînerait une tabulation supplémentaire
 <svg role="presentation" aria-hidden="true" focusable="false"> <!-- Other required elements... --> </svg>

Une fois ces attributs mis en place, l'élément SVG sera complètement supprimé de la technologie d'assistance.

Quand appliquer cela

Voici quelques cas où cela serait utilisé :

  1. Une image SVG qui sert uniquement d'aide visuelle
  2. Une icône de réseau social intégrée dans un lien avec du texte visuel
  3. Une seule icône intégrée dans un bouton d'action avec du texte visuel

Lorsque le SVG est à côté du contenu textuel associé, ce modèle sert à supprimer le SVG de la technologie d'assistance, évitant ainsi toute annonce inutile.

Masquage des caractères d'entité

Il n'est pas rare qu'une exigence de conception soit imposée pour inclure une flèche ou des images plus/moins à l'intérieur d'un lien ou d'un bouton. Pour des raisons telles que les performances et l'inclusion d'images nettes sur une variété d'appareils et d'écrans, cela se fait généralement en incluant un caractère d'entité HTML. Cependant, ce faisant, ce modèle peut avoir introduit un problème d'accessibilité.

Quel problème, me demanderez-vous ? Les caractères d'entité ont leur propre sémantique intégrée et un nom accessible. Lorsqu'un lecteur d'écran entre en contact avec un caractère d'entité, il est annoncé comme n'importe quel autre morceau de texte. L'annonce de contenu supplémentaire, même mineure, pourrait conduire à une expérience utilisateur déroutante pour certains.

Dans le cadre de l'exemple d'ajout d'une icône de flèche à un bouton, l'icône d'entité est purement décorative. De la même manière que la suppression d'une alt de texte alternatif d'une image considérée comme "décorative" afin de se cacher des lecteurs d'écran, le même traitement doit être appliqué aux caractères d'entité.

Passons en revue quelques techniques courantes pour ajouter un caractère d'entité et s'assurer qu'il est ignoré par la technologie d'assistance.

Utiliser CSS

Un modèle CSS courant pour inclure une icône de style flèche dans un élément de button consiste à utiliser un pseudo-élément CSS . Le code suivant devrait atteindre ce que nous recherchons :

 .btn--continue:after { content: ' →'; }

Ce code ajoutera l'icône de flèche à chaque instance du sélecteur correspondant, cependant, le caractère sera annoncé par un lecteur d'écran. Ce n'est pas idéal. (Il était prévu que la spécification CSS3 permette au CSS de masquer le contenu de la technologie d'assistance. Malheureusement, le travail sur le CSS Speech Module a été interrompu.)

Directement en HTML

Passons en revue un autre modèle, en plaçant l'icône de flèche directement dans HTML :

 <button class="btn btn--continue">Continue →</button>

Encore une fois, ce code ajoutera l'icône de flèche à chaque instance de l'élément de bouton, cependant, le caractère sera annoncé par un lecteur d'écran.

Envelopper avec aria-hidden

La méthode pour rendre une icône d'entité cachée des lecteurs d'écran et d'autres technologies d'assistance, c'est-à-dire la définir comme décorative, consiste à envelopper l'icône elle-même avec un élément aria-hidden .

<button class="btn btn--continue"> Continue <span aria-hidden="true">→</span> </button>

Avec cela en place, l'icône de flèche sera ignorée par la technologie d'assistance et seules les informations vitales de "Continuer" seront annoncées.

Émojis accessibles

Les emoji sont un excellent outil pour exprimer rapidement une émotion ou une action via des icônes. Cependant, en ce qui concerne les emoji et l'accessibilité, ce qui est affiché visuellement peut ne pas être le même pour quelqu'un qui utilise une technologie d'assistance.

Prenez par exemple les phrases courantes, "Je ❤️ vous" - annoncées comme "Je vous adore" . Ce n'est pas exactement la bonne signification derrière ce message. Rendons cet emoji plus convivial pour les utilisateurs de lecteurs d'écran.

Afin de rendre le contenu comme on peut s'y attendre, nous pouvons envelopper le caractère emoji avec un élément conteneur HTML et ajouter quelques attributs :

  • Enveloppez l'emoji avec un élément span car il n'a aucune signification sémantique et est stylisé en ligne par défaut
  • Ajoutez l'attribut role en définissant sa valeur sur "img" afin d'annoncer l'emoji sous forme d'image
  • Ajoutez l'attribut aria-label , en définissant sa valeur sur le texte attendu à annoncer (ceci est similaire à la définition d'un attribut alt sur un élément d'image réel)
 <p> I <span role="img" aria-label="love">❤️</span> you. </p>

Désormais, avec cette configuration, les lecteurs d'écran entendront le message comme prévu !

Texte et icônes

Du point de vue de la convivialité, l'utilisation conjointe d'icônes et de texte fournit le plus de contexte pour que les gens comprennent l'iconographie. Pour certaines personnes, être capable de reconnaître une icône régulièrement utilisée est un moyen rapide d'obtenir un contexte. Pour les autres (y compris les personnes qui pourraient utiliser des outils de traduction), le texte peut être plus utile. Pour les personnes ayant des difficultés de lecture, la combinaison du texte et de l'icône peut aider à renforcer les concepts et à rassurer. Les icônes qui représentent des concepts ou des objets littéraux sont toujours plus claires que celles qui représentent des métaphores.

Lorsque vous utilisez des icônes informatives, réfléchissez toujours au texte qui les décrit le mieux. Utilisez le même texte de manière cohérente afin que les gens comprennent toujours la signification de l'icône. Les icônes ne doivent être utilisées seules que lorsqu'elles représentent un concept universellement compris dans le système. Si une icône est utilisée seule, un équivalent textuel est toujours nécessaire pour les personnes qui utilisent des lecteurs d'écran ou d'autres outils de synthèse vocale.

Ressources:

Retour au blog