Explorons les défis de la création d’une liste sortable accessible (glisser-déposer)

Le glisser-déposer est une interface hautement interactive et visuelle. Nous utilisons souvent le glisser-déposer pour des tâches telles que le téléchargement de fichiers, le réarrangement des favoris du navigateur ou même le déplacement d’une carte au solitaire.

L’équipe d’accessibilité de GitHub considère le glisser-déposer comme un « motif à haut risque », entraînant souvent des barrières d’accessibilité et un manque de solutions efficaces dans l’industrie.

Résumé des principaux défis et solutions rencontrés lors du développement d’une liste sortable plus accessible.

Défi : Les lecteurs d’écran utilisent les touches fléchées pour naviguer dans le contenu

L’un des premiers défis a été de configurer un modèle d’interaction pour déplacer un élément via la navigation au clavier. Nous avons choisi d’utiliser les touches fléchées pour que l’opération au clavier soit naturelle pour un utilisateur de clavier visuel. Cependant, ce choix posait problème aux utilisateurs qui se fiaient aux lecteurs d’écran pour naviguer sur une page web.

Pour contourner ces liaisons de touches, nous avons utilisé . En appliquant le rôle au déclencheur du glisser-déposer, nous avons restreint la portée du DOM impacté par . De plus, nous avons exclusivement ajouté au DOM lorsque l’utilisateur active le glisser-déposer. Nous supprimons lorsque l’utilisateur termine ou annule le glisser-déposer. En utilisant , nous sommes en mesure de remplacer ou réaffecter les commandes de flèches du lecteur d’écran pour correspondre à nos commandes de glisser-déposer.

Défi : NVDA simule des événements de souris lorsqu’un utilisateur appuie sur Entrée ou Espace

Un autre défi était de déterminer si un événement de souris ou de clavier était déclenché lorsqu’un utilisateur activait le glisser-déposer.

Lorsqu’un utilisateur utilise une souris pour déplacer des éléments, on s’attend à ce que le relâchement du bouton de la souris (déclenchant un événement ) finalise l’opération de glisser-déposer. En revanche, lors de l’opération de glisser-déposer via le clavier, Entrée ou Echap est utilisé pour finaliser l’opération de glisser-déposer.

Parce que la plupart des utilisateurs de NVDA se fient aux opérations au clavier pour effectuer le glisser-déposer au lieu d’une souris, nous avons dû trouver un moyen de nous assurer que notre code ignorait l’événement déclenché par une touche Entrée ou Espace de NVDA.

Nous avons accompli cela en utilisant deux éléments HTML pour séparer la fonctionnalité du clavier et de la souris :

1. Un pour gérer les interactions au clavier.
2. Un recouvrement invisible pour capturer les interactions de la souris.

Défi : Annoncer des mouvements en succession rapide

Une fois nos opérations au clavier fonctionnelles, notre prochain grand obstacle était , en particulier annoncer des mouvements rapides d’un élément sélectionné.

Pour préparer les tests utilisateurs externes, nous avons testé nos annonces nous-mêmes avec des lecteurs d’écran. Cependant, les tests avec des lecteurs d’écran ne reflétaient pas la réalité de l’interaction des utilisateurs avec notre fonctionnalité.

Pour résoudre ce problème, nous avons ajouté un petit délai à nos annonces de mouvement. Nous avons testé diverses vitesses de délai avec les utilisateurs et avons opté pour 100 ms pour garantir que nous n’entravions pas la capacité d’interaction des utilisateurs avec le glisser-déposer. De plus, nous avons utilisé pour garantir que les annonces de position obsolètes sont interrompues par la nouvelle annonce de position.

Défi : Expérience utilisateur pour la première utilisation d’un nouveau motif

Pendant les tests utilisateurs, nous avons découvert que certains utilisateurs trouvaient difficile d’opérer le glisser-déposer avec un clavier. Souvent, le glisser-déposer n’est pas accessible au clavier ou aux lecteurs d’écran. Pour résoudre ce problème, nous avons ajouté une boîte de dialogue avec un ensemble d’instructions qui s’ouvrirait lorsque l’utilisateur activait le glisser-déposer via le clavier.

Défi : Déplacer des éléments avec la commande vocale dans un conteneur défilable

L’un des derniers grands défis était d’opérer le glisser-déposer en utilisant la technologie d’assistance de commande vocale. Nous avons trouvé essentiel de prendre en charge deux modes d’opération pour garantir que les utilisateurs de commande vocale puissent trier les éléments dans une liste.

Le premier mode d’opération, le glisser-déposer traditionnel, a été discuté précédemment. Le deuxième mode est une boîte de dialogue de déplacement.

La boîte de dialogue de déplacement est un formulaire qui permet aux utilisateurs de déplacer des éléments dans une liste sans avoir à utiliser le glisser-déposer traditionnel. Le formulaire comprend deux champs d’entrée : action et position. Le champ action spécifie le mouvement ou la direction de l’opération, par exemple, « déplacer l’élément avant » ou « déplacer l’élément après ». Et la position spécifie l’emplacement où l’élément doit être déplacé.

En résumé, la création d’un motif de glisser-déposer accessible est un défi et il est important de tirer parti des retours et de prendre en compte une gamme diversifiée de besoins des utilisateurs. Si vous travaillez à rendre le glisser-déposer accessible, nous espérons que notre parcours vous aide à comprendre les subtilités et les pièges de ce motif complexe.

Source de l’article