Comment concevoir pour les lecteurs d’écran avec Adobe XD CC

Comment concevoir pour les lecteurs d’écran avec Adobe XD CC

En matière d’accessibilité, les concepteurs ont tendance à se concentrer sur les couleurs (c’est-à-dire le contraste) et le texte UX (c’est-à-dire la formulation), tandis que les développeurs ont tendance à se concentrer sur les attributs ARIA (c’est-à-dire le code qui rend les sites Web plus accessibles). Cela est dû au fait que, assez souvent, des lignes épaisses sont tracées entre « qui fait quoi ».

En outre, comme la création d’applications et de sites Web accessibles n’est pas considérée comme passionnante, cette ligne n’est pratiquement jamais remise en question.

L’accessibilité reste un mouton noir, même en 2020.

Donc, puisque la copie UX est la responsabilité du concepteur et que les attributs ARIA sont la responsabilité du développeur, à qui incombe exactement la responsabilité de répondre aux lecteurs d’écran ? Depuis :

  1. La copie UX pour lecteur d’écran est exprimée en braille ou sous forme de dictée (alors comment communiquer cela alors que nos outils UI sont visuels ?)
  2. La mise en œuvre est le domaine des développeurs (pouvons-nous vraiment transférer la responsabilité de la rédaction de l’interface utilisateur aux développeurs ?)

Comme vous pouvez le constater, c’est un travail à deux – et pourtant, les outils n’existent tout simplement pas pour faciliter cela. Je veux dire, ne vous méprenez pas, certains aspects de la conception de l’accessibilité sont unilatéraux (par exemple, les concepteurs d’interface utilisateur peuvent très facilement s’occuper eux-mêmes du contraste des couleurs). Cependant, d’autres aspects, comme la conception pour les lecteurs d’écran, nécessitent une collaboration entre les concepteurs et les développeurs.

C’est là que les fonctions de transfert de conception et de prototypage vocal d’Adobe XD CC s’avèrent très utiles. Dans cet article, nous examinerons les éléments à prendre en compte lors de la conception pour les lecteurs d’écran, et nous vous expliquerons comment utiliser les fonctionnalités mentionnées ci-dessus.

Que sont les lecteurs d’écran ?

Un lecteur d’écran est un type de technologie d’assistance qui communique ce qui se passe sur l’écran (pour les personnes ayant une déficience visuelle). Le logiciel de lecture d’écran peut être utilisé en combinaison avec le clavier (par exemple, les utilisateurs utiliseront la tabulation et la saisie au lieu d’utiliser la souris), mais il peut également être utilisé en combinaison avec le matériel de lecture d’écran, qui permet une navigation plus efficace et s’adresse également aux utilisateurs qui utilisent le braille.

Si vous êtes un utilisateur Apple, par exemple, vous connaissez Apple VoiceOver, le logiciel de dictée natif d’Apple qui fait office de lecteur d’écran. Les utilisateurs de Windows, en revanche, utilisent généralement JAWS ou NVDA, car le système d’exploitation Windows ne comporte pas d’outils de lecture d’écran natifs.

Plongeons dans le vif du sujet.

1. Utilisez les titres

Les lecteurs d’écran utilisent souvent les titres pour déchiffrer la structure d’un site Web, et si nous pensons de manière trop visuelle, nous courons le risque d’omettre ces titres. Dans l’exemple ci-dessous, l’omission de l’en-tête « Chapitres » amène les lecteurs d’écran à supposer que la liste des chapitres est une continuation du contenu sur le côté gauche, ce qui n’est évidemment pas le cas.

"Chapters" needs to be a heading

Par conséquent, les utilisateurs de lecteurs d’écran ne pourront pas passer à « Chapitres », et ils risquent de ne pas découvrir les informations qu’ils contiennent.

Bien qu’il existe des solutions de contournement du code (comme l’attribut aria-label ), le fait d’avoir un titre visible de manière inclusive offre une expérience plus claire pour tout le monde, qu’il soit handicapé ou non.

Bien entendu, la section est de toute évidence une liste de chapitres, comme nous pouvons le déduire du contexte (c’est-à-dire du contenu). Cependant, ceux qui utilisent des lecteurs d’écran ont très rarement le luxe du contexte. C’est comme essayer de trouver un objet dans un entrepôt dont aucune des boîtes n’est étiquetée. Nos conceptions ont besoin de ces étiquettes et de ces rubriques.

Du point de vue technique, la règle est que chaque section (telle que définie par un


ou


) doit avoir non seulement un titre, mais un titre explicite qui n’entre en conflit avec aucun autre titre. Par exemple, si le titre de niveau le plus élevé d’une section est une balise


alors il ne doit pas y avoir d’autres


dans cette section. Sinon, les lecteurs d’écran ne savent pas quel titre est l’étiquette de la section.

The same heading for like sections

2. Utilisez des étiquettes

Les icônes sont meilleures – pour tout le monde – lorsqu’elles sont accompagnées d’un libellé. Si cette approche semble encombrée, envisagez de n’ utiliser qu’ un libellé de texte. Vous préférez l’icône ? Eh bien, dans ce cas, déclarez au moins aux développeurs une « étiquette invisible » qui n’apparaîtra qu’aux lecteurs d’écran (oui, je parle d’aria-label). Il en va de même pour les champs de saisie, où une étiquette textuelle visible est toujours préférable. aria-label devrait être un dernier recours.

Menu links as icons or text-based links

Les images ont une exigence similaire, sauf que leur texte descriptif est implémenté via la balise alt. Ceci étant dit, veillez à communiquer lorsqu’une image est décorative, car les développeurs devront alors la masquer aux lecteurs d’écran en utilisant aria-hidden="true".

Utilisation du transfert de conception pour communiquer le texte des lecteurs d’écran

Que vous utilisiez du texte alt, des étiquettes ARIA pour les éléments qui n’ont pas de texte visible, des étiquettes ARIA destinées à « écraser » le texte visible (pour un contexte supplémentaire), ou même simplement indiquer quand une image doit être totalement ignorée par les lecteurs d’écran, l’outil de transfert de conception d’Adobe XD CC est le bon outil à utiliser pour cela.

Le flux de travail ressemblerait un peu à ceci :

  1. Cliquez sur l’espace de travail « Partager ».
  2. Configurez les paramètres (sur le côté droit).
  3. Cliquez sur « Créer un lien », puis cliquez sur le lien lui-même.
  4. Dans la fenêtre de transfert du design, cliquez sur l’icône-bouton « Placer une épingle » pour commenter des éléments spécifiques du design.
  5. Laissez des commentaires. Par exemple :
    • Dictez la version non abrégée de chaque devise
    • Cette image se traduit par « Avatar de l’auteur : Daniel Schwarz »
    • Cette image est décorative – les lecteurs d’écran doivent l’ignorer

A design handoff with comments

3. Elaborer quand c’est nécessaire

Supposons un composant à onglets composé de deux boutons. L’un est étiqueté « Récence », et l’autre, « Séquentiel ».

Sans contexte visuel, on peut se demander … qu’est-ce que la récence ? Qu’est-ce que « séquentiellement » ? S’agit-il de boutons ? Suis-je censé faire quelque chose ? Associés au contenu environnant, les utilisateurs sans déficience visuelle peuvent facilement déduire ce qui se passe : on nous donne l’occasion de trier l’ordre des chapitres.

Cependant, les personnes souffrant de déficiences visuelles auraient besoin d’un peu plus d’explications. Plus précisément, le texte doit être plus facile à suivre.

La copie UX suivante est plus adaptée aux personnes utilisant des lecteurs d’écran :

  • « Ordonner les chapitres par récurrence »
  • « Ordonner les chapitres par ordre de récence »

Et quand un bouton est cliqué :

  • « Les chapitres sont maintenant classés par ordre de récence »
  • « Les chapitres sont maintenant ordonnés séquentiellement »

Utiliser le prototypage vocal pour communiquer les changements dynamiques

Si le transfert de conception est un excellent moyen de communiquer ce qui doit se passer lorsqu’un utilisateur de lecture d’écran se concentre sur un élément (comme mentionné ci-dessus, aria-label écrase tout texte visible pour offrir un contexte supplémentaire), le prototypage vocal peut être utilisé pour communiquer ce qui doit se passer comme résultat d’une interaction.

Le flux de travail d’Adobe XD CC ressemblerait à ceci :

  1. Cliquez sur l’espace de travail « Prototype ».
  2. Créez une interaction, comme vous le feriez normalement.
  3. Sélectionnez « Action » → « Lecture vocale » (sur le côté droit).
  4. Rédigez le texte qui sera prononcé par les lecteurs d’écran sous « Parole ».

detailing interactions with a button

Lorsque quelque chose change à l’écran, ces changements doivent être communiqués clairement aux utilisateurs de lecture d’écran – en particulier si lesdits changements nécessitent une réaction de la part des utilisateurs. Voici quelques autres exemples :

  • « (X) vous a envoyé un message »
  • « Votre session se terminera dans (x) secondes »
  • « Êtes-vous sûr de vouloir annuler ? [Oui/Non] »

Conclusion

Un site Web n’est pas simplement un document à lire de haut en bas – du moins, pas lorsque des tâches et des interactions sont impliquées.

Les flux de lecture et les flux d’utilisateurs sont rarement linéaires. La conception pour les lecteurs d’écran est donc un peu plus complexe que la simple traduction de visuels en texte. Nous devons tenir compte du contexte dans lequel se trouve déjà l’utilisateur, prendre en compte les différents degrés de handicap et, plus important encore, les concepteurs et les développeurs doivent travailler ensemble pour que l’accessibilité ne soit pas une pensée après coup.

Tirez parti des fonctions de transfert de conception et de prototypage vocal d’Adobe XD CC et pensez toujours, toujours, toujours à vos conceptions d’applications et de sites web en vous plaçant du point de vue des utilisateurs malvoyants. Tout le monde n’a pas le luxe du contexte visuel.

Bonus : Fonctions de contraste des couleurs dans les outils de conception d’IU

UXPin offre une fonction native pour vérifier le contraste des couleurs, ainsi qu’un simulateur de daltonisme. Des petites choses, mais tout de même, c’est une première. Si vous n’utilisez pas UXPin, vous avez le choix entre des outils Web tels que WebAIM, des extensions d’outils d’interface utilisateur telles que le plugin Stark, Contrast pour macOS ou Color Contrast Analyzer pour Windows. Malheureusement, pour une raison quelconque, le contraste des couleurs n’a jamais été une considération majeure dans les outils de conception d’interface utilisateur.

Espérons qu’il le sera en 2020 !

Bonus : Adobe XD permet la commande vocale

Adobe XD a récemment commencé à prendre en charge la commande vocale, ce qui signifie qu’il existe désormais davantage de moyens d’interagir avec Adobe XD et, par extension, d’être un concepteur. C’est une excellente nouvelle pour les personnes ayant des problèmes d’accessibilité, et l’outil profite même à ceux qui ne sont pas handicapés. C’est ce qu’on appelle un design inclusif

« Ouvrez XD ! »

Apprenez-en davantage sur l’accessibilité avec Accessibilité pour tous de A List Apart sur SitePoint Premium.

Laurent

Laurent est un développeur web originaire de Corée. Il aime construire des choses pour le web et partager ce qu'il a appris en écrivant sur son blog. Quand il n'est pas en train de coder ou d'apprendre quelque chose de nouveau, il aime regarder des dessins animés et jouer à des jeux vidéo.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *