Optimisations UX pour les utilisateurs de technologies d'assistance et à clavier uniquement

(Cet article est sponsorisé.) L’un des avantages intéressants de l’accessibilité est qu’il vous oblige à voir et à penser à votre application au-delà de l'expérience utilisateur visionnaire typique basée sur la souris. Les utilisateurs qui naviguent uniquement au clavier (KO) et / ou aux technologies d'assistance (TA) dépendent fortement non seulement de l'architecture réfléchie de votre application, mais également des avantages de votre application pour rendre l'expérience aussi simple que possible pour tous les types d'utilisateurs.

Dans cet article, nous allons passer en revue quelques-unes de ces avantages qui peuvent améliorer l'expérience de vos utilisateurs KO / AT sans modifier réellement l'expérience de ceux qui le souhaitent.

Compléments à l'UX de votre application

Ce sont des fonctionnalités que vous pouvez ajouter à votre application pour améliorer l'UX pour les utilisateurs de KO / AT.

Ignorer les liens

Un lien permettant d'éviter les sauts est une fonctionnalité de navigation située de manière invisible au sommet des sites Web ou des applications. Quand il est présent, il est évoqué et devient visible sur le premier taquet de tabulation de votre application.

Un lien permettant d’ignorer permet à votre utilisateur de «passer» à diverses sections d’intérêt de l’application sans avoir à le parcourir. Le lien peut être associé à plusieurs liens si votre application comporte plusieurs domaines d’intérêt, ce qui signifie que vos utilisateurs doivent pouvoir accéder rapidement au point d’entrée de votre application.

Pour les utilisateurs de KO / AT, c’est un outil utile pour leur permettre. parcourir rapidement votre application et peut les aider à les orienter vers l’architecture d’information de votre application. Pour tous les autres utilisateurs, ils ne sauront probablement jamais que cette fonctionnalité existe.

Voici un exemple de la façon dont nous gérons les liens sautés. Après avoir cliqué sur le lien, appuyez sur Onglet ⇥ et regardez dans le coin supérieur gauche. Le lien de saut contient deux liens: Contenu principal et Exemples de code . Vous pouvez utiliser l'onglet ⇥ pour vous déplacer, puis appuyez sur Entrez pour accéder au lien.

C’est une fonctionnalité que tout le monde connaît bien: raccourcis et touches de raccourci. Vous les avez probablement utilisées de temps en temps, elles sont très populaires parmi les utilisateurs expérimentés d’une application et se présentent sous différentes incarnations.

Pour les utilisateurs de KO / AT, les raccourcis / raccourcis clavier sont inestimables. Ils leur permettent d’utiliser les applications comme prévu sans avoir à viser quoi que ce soit ou à parcourir l’application pour accéder à un élément ou à un contenu. Bien que les actions et le contenu fréquents soient toujours appréciés lorsqu’ils sont représentés dans un menu de raccourcis / touches de raccourci, vous pouvez également envisager certaines actions un peu moins fréquentes qui peuvent être enfouies dans votre interface utilisateur (pour une bonne raison), mais qui restent néanmoins quelque chose qu'un utilisateur souhaiterait. pouvoir accéder.

Créer des raccourcis pour ces fonctions sera extrêmement utile pour les utilisateurs de KO / AT. Vous pouvez impliquer un peu plus la commande, par exemple en utilisant la combinaison de touches (3) pour l’évoquer, ce qui implique qu’il s’agit d’une fonctionnalité moins fréquemment utilisée. Si vous avez un menu de raccourcis / touches de raccourci, veillez à trouver un moyen de le promouvoir dans vos applications afin que vos utilisateurs, en particulier vos utilisateurs de KO / AT, puissent le trouver et l’utiliser efficacement.

User Education

une fonctionnalité qui indique aux utilisateurs quoi faire, où aller ou à quoi s'attendre. Les infobulles, les sorties d’aiguille, les bulles d’information, etc. sont des exemples de formation des utilisateurs.

Lors de la conception, de la mise en place et / ou de la rédaction d’une copie, vous devez vous poser les questions suivantes:

«Si je pouvais Ne vois pas cela, serait-il toujours utile de comprendre le ______? ”

Souvent, il s’agit simplement de réorienter la formation des utilisateurs dans cette optique, ce qui peut offrir une bien meilleure expérience à tout le monde. Par exemple, plutôt que de dire «Ensuite, cliquez sur le bouton ci-dessous», vous voudrez peut-être écrire: «Pour commencer, cliquez sur le bouton DÉMARRER.» La deuxième méthode supprime l’orientation visuelle et se concentre plutôt sur l’information commune et les utilisateurs de KO / AT auraient à leur disposition.

Note : Je devrais mentionner qu'il est parfaitement correct d'utiliser les fonctionnalités d'éducation des utilisateurs, telles que les point out, pour signaler visuellement des éléments de l'application uniquement. assurez-vous que le texte d'accompagnement permet à vos utilisateurs de KO / AT de comprendre les mêmes choses que celles auxquelles il est fait référence visuellement.

Augmentations de l'UX de votre application

Modifications ou modifications à apporter aux composants / fonctionnalités courants pour améliorer l'UX pour les utilisateurs de KO / AT.

Mise au point modale

Nous passons maintenant à la Nitty-Gritty. L’un des points forts de l’accessibilité est la façon dont il ouvre la porte à de nouvelles façons de résoudre des problèmes que vous n’avez peut-être pas envisagés auparavant. Vous pouvez créer quelque chose de complètement WCAG 2.0 AA accessible et résoudre le problème avec des approches très différentes. Pour les modaux, chez Deque, nous avons proposé une approche intéressante qui serait totalement invisible pour la plupart des utilisateurs malvoyants, mais que les utilisateurs de KO / AT remarqueraient presque immédiatement.

Pour qu'un modal soit accessible, il doit s'annoncer dès qu'il est évoqué. . Il existe deux façons courantes de le faire: centrer le corps du modal après l’ouverture du modal ou la tête du modal (s’il en possède un) après l’ouverture du modal. Vous faites cela pour que l'AT de l'utilisateur puisse lire l'intention du modal telle que "Modifier le profil" ou "Créer un nouvel abonnement".

Après avoir focalisé le corps ou l'en-tête, cliquez sur l'onglet pour activer le focus. L'élément suivant pouvant être mis au point dans le modal – généralement un champ ou, s'il est dans l'en-tête, parfois, c'est le bouton de fermeture (X). Poursuivre sur l'onglet vous permet de parcourir tous les éléments du modal qui peuvent être mis au point, en terminant généralement par des boutons de terminal tels que SAVE et / ou CANCEL.

Nous en arrivons maintenant à la partie intéressante. Une fois que vous avez focalisé le dernier élément dans le modal, appuyez à nouveau sur l'onglet 27 pour revenir au premier arrêt, qui, dans le cas du modal, correspond au corps ou à l'en-tête, car c'est là que nous avons commencé. Cependant, dans nos modaux, nous «sautons» cet onglet initial et vous conduisons au deuxième arrêt (qui, dans nos modaux, correspond à la fermeture (X) dans le coin supérieur. Nous le faisons car le modal n'a pas besoin de continue d'annoncer encore et encore à chaque cycle. Il suffit de le faire lors de l'évocation initiale et non lors de passages ultérieurs, nous avons donc un arrêt programmatique spécial qui se saute après la première fois.

Une amélioration (mais appréciée) de la convivialité que nous avons conçue exclusivement pour les utilisateurs de KO / AT serait totalement inconnue de tous les autres.

Menus de navigation traversés par une gestion ciblée / sélectionnée

Les menus de navigation sont complexes: ils peuvent être structurés de multiples façons, être hiérarchisés, imbriqués et comporter d'innombrables mécanismes d'évocation, de divulgation et de traversée. Cela rend important de considérer comment ils sont interagi avec et représenté pour les utilisateurs KO / AT pendant la phase de conception. Les bons menus doivent être "entrés" et "sortis", ce qui signifie que vous insérez un menu dans un menu et que vous le sortez (si vous ne l'utilisez pas).

Cette idée est mieux illustrée par un littéral. Par exemple, jetons un coup d’œil à notre navigation verticale à deux niveaux depuis Cauldron.

1. Allez à https://pattern-library.dequelabs.com/ ;
2. Hit . ⇥ trois fois. Le premier onglet est le lien de saut (que nous avons déjà vu), le deuxième est le logo qui fait office de lien «retour à la maison» et le troisième onglet entre dans le menu;
3. Maintenant que vous êtes dans le menu, utilisez les touches fléchées ( → et ) pour déplacer et ouvrir des sections du menu;
4. cliquez sur l'onglet pour vous faire quitter menu et vous renvoyer au contenu de la page.

conjointement avec certaines des rubriques précédentes, telles que les menus de raccourcis / touches de raccourci, pour rendre l’utilisation du menu encore plus efficace.

Rétention de la focalisation logique (IE Suppression d’une ligne, retour à une page)

La rétention de la focale est très importante. La plupart des gens connaissent, du moins dans leur concept, les éléments de focalisation dans leur ordre logique prévu sur la page; Cependant, il peut devenir trouble lorsqu'un élément ou un contenu change / apparaît / disparaît.

• Où se trouve la mise au point lorsque le champ sur lequel vous vous trouvez est supprimé?
• Qu'en est-il lorsque vous êtes envoyé vers un autre onglet où l'application a un nouveau contexte?
• Qu'en est-il après la fermeture d'un modal en raison d'une action terminale telle que SAVE?

Pour un utilisateur voyant, il existe des indices visuels qui peuvent l'informer de ce qui s'est passé.

Voici un exemple: Vous avez un modal Edit Recipe qui permet à votre utilisateur d’ajouter et de retirer des ingrédients. Il y a un champ d'ingrédient avec un bouton «Ajouter un autre ingrédient» en dessous. (Oui, il s’agit d’un lien, mais c’est un sujet pour un autre jour.) L’accent est mis sur le bouton. Vous cliquez sur le bouton et un nouveau champ apparaît entre le bouton et le premier champ. Où doit-on se concentrer? Il est fort probable que votre utilisateur ait ajouté un autre ingrédient à utiliser, de sorte que le bouton doit désormais passer au champ nouvellement ajouté.

La principale conclusion de tout ceci n'est pas tant les exemples spécifiques que la mentalité qui les soutient – considérez l'UX pour votre application du point de vue de l'utilisateur de KO / AT, aussi bien voyant, que souris. seul utilisateur. Certaines des meilleures idées et des plus intelligentes proviennent des défis les plus intéressants et les plus importants.

Si vous avez besoin d'aide pour garantir l'accessibilité de vos fonctionnalités, tous les exemples ci-dessus, ainsi que d'innombrables autres, peuvent être testés à l'aide de l'application de test d'accessibilité Web gratuite de Deque: ax pro. C’est gratuit et vous pouvez vous inscrire ici ici .

(ra, il)