En ce qui concerne l'accessibilité, les concepteurs ont tendance à se concentrer sur les couleurs (c'est-à-dire le contraste) et la copie 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, souvent, des lignes épaisses sont tracées entre «qui fait quoi».
De plus, comme la création d'applications et de sites Web accessibles n'est pas considérée comme passionnante, cette ligne n'est presque jamais remise en question. [19659003] L'accessibilité est toujours un mouton noir, même en 2020.
Donc puisque la copie UX est la responsabilité du concepteur et les attributs ARIA sont la responsabilité du développeur, exactement à qui incombe la responsabilité de répondre lecteurs d'écran? Depuis:
- La copie UX du lecteur d'écran est exprimée en braille ou en dictée (alors, comment pouvons-nous communiquer cela lorsque nos outils d'interface utilisateur sont visuels?)
- L'implémentation est le territoire du développeur (nous pouvons donc vraiment transférer la responsabilité d'écrire une copie UX vers développeurs?)
Comme vous pouvez le voir, c'est un travail à deux – et pourtant, les outils n'existent tout simplement pas pour faciliter cela. Je veux dire, ne vous y trompez 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 du contraste des couleurs par eux-mêmes). Cependant, d'autres aspects tels que la conception pour les lecteurs d'écran nécessitent une collaboration entre les concepteurs et les développeurs.
C'est là que les fonctionnalités de transfert de conception d'Adobe XD CC et et de prototypage vocal sont utiles. Dans cet article, nous aborderons les éléments à prendre en compte lors de la conception de lecteurs d'écran et nous expliquerons également 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 à 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 doivent onglet et entrer au lieu d'utiliser la souris), mais il peut également être utilisé en combinaison avec l'écran le matériel du lecteur, 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 serez quelque peu au courant de Apple VoiceOver qui est le logiciel natif de dictée Apple qui fait office de lecteur d'écran. Les utilisateurs de Windows, cependant, utilisent généralement JAWS ou NVDA car il n'y a aucun outil natif de lecteur d'écran dans le système d'exploitation Windows.
Plongeons dedans.
1. Utiliser des titres
Les lecteurs d'écran utilisent souvent des titres comme un moyen de déchiffrer la structure d'un site Web, et si nous réfléchissons trop visuellement, nous courons le risque de laisser de côté ces titres. Dans l'exemple ci-dessous, l'omission de la rubrique «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 manifestement pas le cas.
Bien qu'il existe des solutions de contournement de code disponibles (comme aria-label ), ayant un titre visible inclus offre une expérience plus claire pour tout le monde qu'il soit handicapé ou non.
Bien sûr, la section est très clairement 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 le stockage où aucune des cases n'est étiquetée. Nos conceptions ont besoin de ces étiquettes et en-têtes.
Sur le plan technique, la règle est que chaque section (telle que définie par une balise
) doit avoir non seulement un en-tête, mais un en-tête explicite en conflit avec pas d'autre rubrique. Par exemple, si l'en-tête de niveau le plus élevé d'une section est un
il ne devrait pas y avoir d'autre
en-tête dans cette section. Sinon, les lecteurs d'écran ne savent pas quel titre est le libellé de la section.
2. Utiliser des étiquettes
Les icônes sont meilleures – pour tout le monde – lorsqu'elles ont une étiquette de texte. Si cette approche semble encombrée, envisagez d'utiliser uniquement une étiquette de texte. Vous préférez l'icône? Eh bien, dans ce cas, déclarez au moins une «étiquette invisible» aux développeurs qui n'apparaîtra qu'aux lecteurs d'écran (oui, je parle de aria-label ). La même chose s'applique aux champs de saisie, où une étiquette de texte visible est toujours meilleure. aria-label devrait être un dernier recours.
Les images ont une exigence similaire, sauf que leur texte descriptif est implémenté via la balise alt . Cela étant dit, assurez-vous de communiquer lorsqu'une image est décorative, car les développeurs devront ensuite la cacher aux lecteurs d'écran en utilisant aria-hidden = "true" .
Utilisation de Design Handoff pour communiquer le lecteur d'écran Texte
Que vous utilisiez du texte alternatif, 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é 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 à quelque chose comme ceci:
- Cliquez sur l'espace de travail "Partager".
- Configurez le
- Cliquez sur "Créer un lien" puis cliquez sur le lien lui-même.
- Dans la fenêtre de transfert de conception, cliquez sur le bouton icône "Placer une épingle" pour commenter des éléments spécifiques dans la conception.
- Laisser des commentaires. Par exemple:
- Dictez la version non abrégée de chaque monnaie
- Cette image se traduit par «Auteur avatar: Daniel Schwarz»
- Cette image est décorative – les lecteurs d'écran doivent l'ignorer
3. Élaborer quand cela est nécessaire
Supposons un composant à onglets composé de deux boutons. L'un est étiqueté «Récence» et l'autre «Séquentiellement».
Sans aucun contexte visuel, on peut se demander… quelle est la récence? Qu'est-ce qui est séquentiel? Ce sont des 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: nous avons la possibilité de trier l'ordre des chapitres.
Cependant, les déficiences visuelles avec pourraient faire l'objet d'une élaboration . Plus précisément, la copie doit être plus exploitable.
La copie UX suivante est meilleure pour ceux qui utilisent des lecteurs d'écran:
- "Ordonner les chapitres par récence"
- "Ordonner les chapitres séquentiellement"
Et lorsqu'un bouton est cliqué sur:
- «Les chapitres sont désormais classés par récence»
- «Les chapitres sont désormais classés séquentiellement»
Utilisation du prototypage vocal pour communiquer les changements dynamiques
Bien que le transfert de conception soit un excellent moyen de communiquer ce qui doit se produire lorsqu'un l'utilisateur de la 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 produire comme résultat d'une interaction.
Le flux de travail Adobe XD CC ressemblerait à ceci:
- Cliquez sur l'espace de travail "Prototype".
- Créez une interaction comme vous le feriez normalement. [19659006] Sélectionnez «Action» → Voice Playback "(sur le côté droit).
- Écrivez le texte à prononcer par les lecteurs d'écran sous" Speech ".
Quand quelque chose change -écran, ces changements doivent être clairement communiqués aux utilisateurs de la lecture d'écran – en particulier si lesdits changements nécessitent que les utilisateurs répondent. Voici quelques exemples supplémentaires:
- «(X) vous a envoyé un message»
- «Votre session expirera dans (x) secondes»
- «Voulez-vous vraiment annuler? [Yes/No] »
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, donc la conception pour les lecteurs d'écran est un peu plus complexe que la simple traduction de visuels en texte. Nous devons considérer le contexte dans lequel l'utilisateur se trouve déjà, répondre à divers degrés de handicap, et plus important encore, les concepteurs et les développeurs doivent travailler ensemble pour que l'accessibilité ne devienne pas une réflexion après coup.
Tirez parti du transfert de conception et de la voix d'Adobe XD CC les fonctionnalités de prototypage à votre avantage, et toujours, toujours, toujours pensez à votre application et à vos conceptions Web dans la fenêtre des utilisateurs malvoyants. Tout le monde n'a pas le luxe du contexte visuel.
Bonus: fonctionnalités de contraste des couleurs dans les outils de conception d'interface utilisateur
UXPin offre une fonction native pour vérifier le contraste des couleurs, ainsi qu'un simulateur de daltonisme. Petits haricots, mais c'est quand même une première. Si vous n'utilisez pas UXPin, les choix sont des outils Web tels que WebAIM des extensions d'outils d'interface utilisateur telles que Stark Plugin Contraste pour macOS ou Analyseur de contraste des couleurs pour Windows . Malheureusement, pour une raison quelconque, le contraste des couleurs n'a jamais été une considération primordiale dans les outils de conception d'interface utilisateur.
Voici l'espoir pour 2020!
Bonus: Adobe XD active le contrôle vocal
Adobe XD a récemment commencé à prendre en charge la voix Control ce qui signifie qu'il existe désormais plus de façons d'interagir avec Adobe XD et, par extension, d'être concepteur. C'est une excellente nouvelle pour ceux qui ont des problèmes d'accessibilité, et l'outil profite même à ceux qui ne sont pas désactivés.
«Open XD!»
En savoir plus sur l'accessibilité avec Accessibilité pour tous dans A List Apart on SitePoint Premium.
Source link