Mise à jour!
Après avoir partagé cela sur Twitter, j'ai reçu des commentaires fantastiques de la part de quelques personnes qui utilisent régulièrement des lecteurs d'écran.
Le principal élément de retour étant la cohérence de la découverte de contenu lors de l'utilisation de différents modes de navigation :
Le principal problème que j'ai cependant est qu'avec JAWS et NVDA , les descriptions ne sont lues que si je traverse les liens en appuyant sur tab ou shift + tab. Ils ne lisent pas si je flèche avec le curseur virtuel ou si j'affiche une liste de liens.
Dans cet esprit, j'ai créé une démo secondaire qui a été plus positivement accueillie !
Comme pour tout concept d'interface utilisateur/d'expérience, assurez-vous de partager, de tester et de recueillir les commentaires de personnes réelles ! 👍
Avis au lecteur…
Veuillez noter qu'il ne s'agit que d'un concept et non d'un élément à utiliser en production en tant que tel .
En ce qui concerne l'imagerie sur le Web et l'accessibilité, il existe un tas de concepts d'image différents à prendre en compte. Des concepts tels qu'une image de « contenu » pour aider à décrire un produit ou une image « décorative » pour aider au contexte visuel dans une interface utilisateur graphique.
Ces concepts vous aident à décider de la meilleure façon de représenter l'image pour la technologie d'assistance. Ensuite, à son tour, une technologie d'assistance pour aider à transmettre le sens ou le but de l'image aux personnes handicapées.
Que se passe-t-il, cependant, lorsqu'aucun des concepts ne permet de décrire votre contexte particulier ? 🤔
La petite image qui ne pouvait pas
Considérez la vue de contenu suivante pour un magasin de meubles en ligne :
La capture d'écran ci-dessus présente une vue de liste d'articles. Chacun des éléments affichés est composé d'un élément d'ancrage. Chaque élément comprend :
- une image miniature intégrée ;
- le titre du produit ;
- le fournisseur du produit ;
- et le prix.
Le problème ici est la verbosité potentielle de chaque lien lorsqu'il est rencontré par un lecteur d'écran. Le titre, le fournisseur et le prix sont de nombreuses informations à prendre en compte ; voulons-nous également inclure la description de l'image ici ?
Cela semble être beaucoup de contenu à consommer en une seule fois.
Une solution possible…
Je pense que nous pouvons tous convenir que puisque l'image fait partie du lien, avoir une description détaillée de l'image via l'attribut alt générerait une annonce trop verbeuse.
Essayons d'éviter de submerger nos utilisateurs avec trop d'informations à la fois.
Alors, quelle est la solution ici ? Peut-être pourrions-nous supprimer entièrement la description du texte alternatif et déclarer chaque image comme "décorative ?" Avec cela, les utilisateurs de lecteurs d'écran pourraient activer chaque lien et accéder à la page de destination de l'article pour une description plus précise, n'est-ce pas ?
En fait, s'agit-il d'images "décoratives" ? Dans ce contexte particulier d'une liste d'éléments, la description textuelle est-elle suffisante pour que quelqu'un comprenne tout en naviguant dans la liste ?
Le dilemme
En tant qu'utilisateur voyant, j'ai l'avantage de parcourir la liste des articles avec mes yeux pour comprendre rapidement ce qu'est le produit et à quoi il ressemble . Si je vois quelque chose qui m'intéresse, je peux cliquer sur le lien et voir le produit plus loin. Si l'élément ne me plaît pas, je peux facilement passer à autre chose et voir ce qu'il y a d'autre dans la liste.
D'un autre côté, quelqu'un qui s'appuie sur une technologie d'assistance, comme un lecteur d'écran, n'aurait qu'une compréhension de base de chaque élément.
Dans l'exemple ci-dessus, considérez les "mots clés" disponibles pour un utilisateur de lecteur d'écran dans chaque élément de la liste pour décrire le produit. Ils pourraient être:
- "chaise"
- "sofa"
- "table"
Est-ce vraiment suffisant pour obtenir une image claire de l'article ? Plus important encore, est-ce un exemple d' égalité ? Un ** ** utilisateur voyant pourrait comprendre en visualisant simplement l'image miniature, mais quelqu'un qui est aveugle ne recevrait qu'une description textuelle de base. Non, je dirais que ce n'est pas une expérience égale.
Les utilisateurs aveugles devraient avoir un accès égal au contenu auquel les utilisateurs voyants ont accès.
Pour que quelqu'un puisse mieux comprendre chaque élément avec le concept d'image "décoratif", il doit activer chaque lien, naviguer sur la page de destination et trouver la description. Cela entraînerait beaucoup plus de travail pour un utilisateur de lecteur d'écran afin d'avoir cette image complète disponible, où un utilisateur voyant pourrait comprendre simplement à partir de la vue de la liste.
Un nouveau concept d'image à considérer
Donc, nous savons que si nous incluons une description détaillée du texte alternatif de l'image, ce serait trop d'informations à la fois. D'autre part, ne pas inclure de description créerait une disparité dans l'expérience utilisateur que nous devrions également nous efforcer d'éviter.
Que pouvons-nous faire pour soulager la situation ?
Considérons un nouveau concept d'image non documenté ( encore ), quelque chose que j'appelle :
L'image "complémentaire"
Quoi - il a dit le titre du message dans le message ! 😱
L'idée est de rendre la description de l'image disponible, mais de la placer en tant que contenu secondaire par rapport au contenu de l'élément d'ancrage principal.
Comment accomplissons-nous cela? Examinons d'abord un exemple de base de l'un des liens d'éléments actuels :
Exemple d'article actuel
<a href="#"> <img class="image" src="table.jpg" alt="Round table top, birch wood color. Table is supported by three legs, black color. Legs stem from the middle of the table outward towards the floor." /> <span class="title">Key Side Table by GamFratesi</span> <span class="price">$179.00</span> </a>Dans cet exemple, nous voyons la description de l'image définie dans l'attribut alt. C'est génial d'avoir, mais comme nous en avons discuté, cela pourrait générer une expérience trop verbeuse pour que quelqu'un consomme tout à la fois.
Alors qu'est-ce qu'implique une image "complémentaire" ?
Exemple d'image complémentaire
<a href="#" aria-describedby="image-description"> <img class="image" src="table.jpg" alt="" /> <span class="title">Key Side Table by GamFratesi</span> <span class="price">$179.00</span> </a> <span id="image-description" hidden> Round table top, birch wood color. Table is supported by three legs, black color. Legs stem from the middle of the table outward towards the floor. </span>La différence ici est :
- Le contenu du texte alternatif a été supprimé. Avec cela, les lecteurs d'écran ignoreront l'image et passeront devant lorsqu'ils parcourent le contenu de la page.
- Un élément de conteneur caché a été ajouté qui contiendra le contenu de la description de l'image. Ce conteneur a également un identifiant unique appliqué.
- L'attribut aria- dedicatedby a été ajouté à l'élément a avec sa valeur définie sur l'ID du conteneur de description d'image.
Avec ce balisage, la description de l'image sera toujours annoncée, mais elle sera secondaire, ou « complémentaire », au contexte courant ; une liste de liens.
En d'autres termes, la description textuelle de l'image est lue après le texte du lien principal. Cette solution permet désormais à l'utilisateur d'entendre le texte du lien principal et le texte de description de l'image complémentaire lors de la navigation dans la liste de liens, générant une expérience utilisateur égale ! 💯
Ce qui est génial avec cette solution particulière, c'est que certains lecteurs d'écran ajoutent une pause entre le texte du lien principal et la description de l'image complémentaire lorsqu'ils sont lus à haute voix via l'attribut aria-dedicatedby.
Démo !
Découvrez la démo en action !
Essayez de charger un lecteur d'écran et écoutez le son de chacun des liens de la liste ! 🎧
Les pensées?
Que pensez-vous de cette solution ? Le concept d'image "complémentaire" est-il quelque chose que vous envisageriez d'utiliser dans votre projet actuel ou prochain ? Fais-moi savoir!
Bon piratage ! 😄⌨️🚀