Enter The Dragon (Drop): réorganisation de la liste accessible

Au fil des années en tant que développeur Web axé sur l'accessibilité, j'ai principalement traité des composants d'interface utilisateur standardisés et largement adoptés, bien pris en charge par les technologies d'assistance (AT). Pour ces types de widgets, il existe des pratiques de création ARIA concises ainsi que d'excellents outils comme axe-core qui peuvent être utilisés pour tester les composants Web pour les problèmes d'accessibilité. La création de widgets moins courants, en particulier ceux qui n'ont pas de conventions largement adoptées pour l'interaction de l'utilisateur, peut être très délicate.

L'un des défis les plus difficiles que j'ai rencontrés est la liste réorganisable par glisser-déposer. Bien qu'une liste réorganisable soit un widget assez couramment utilisé avec des conventions intuitives pour les utilisateurs de souris, il n'est pas clair comment les utilisateurs de technologies d'assistance au clavier uniquement peuvent effectuer cette tâche simple. En raison de l'absence d'attributs ARIA pris en charge, Dragon Drop utilise des régions en direct pour transmettre les informations nécessaires à tous les utilisateurs pour réorganiser une liste.

Régions en direct

Les régions actives sont des éléments HTML dotés d'attributs ARIA qui peuvent être utilisés pour informer les lecteurs d'écran des modifications de contenu. Ils nous permettent de fournir une annonce de lecteur d'écran entièrement personnalisée sans avoir à déplacer le focus ! Les régions en direct sont idéales pour les mises à jour en temps réel dans les parties distantes de la page, les mises à jour de statut et les informations urgentes.

Ils sont couramment utilisés dans les journaux de discussion, les indicateurs de progression, les mises à jour des scores sportifs et les alertes météo, mais doivent être utilisés avec parcimonie car ils peuvent facilement créer une expérience trop détaillée pour les utilisateurs de lecteurs d'écran. Si vous êtes nouveau dans les régions en direct ou si vous souhaitez simplement explorer ce qu'elles peuvent faire, consultez mon terrain de jeu de région en direct, qui vous permet de configurer votre propre région en direct personnalisée.

Si vous souhaitez utiliser des régions en direct dans votre application, reportez-vous au module Région en direct sur npm.

 <div aria-live="assertive" role="log" aria-relevant="additions" aria-atomic="true"></div>

Pourquoi utiliser les régions en direct ?

Dans un monde idéal, j'aurais pu simplement compter sur les attributs ARIA par glisser-déposer aria-grabbed -grabbed et aria-dropeffect . Cependant, en réalité, la prise en charge de ces attributs est rare et, lorsqu'elle est prise en charge, l'expérience est déroutante et contre-intuitive pour les utilisateurs de lecteurs d'écran. De plus, ces deux attributs sont obsolètes depuis ARIA 1.1, ce qui signifie que nous ne verrons pas la prise en charge de ces attributs augmenter à l'avenir.

La conversation du W3C sur cette dépréciation peut être consultée ici. En raison de ces problèmes, j'ai décidé de ne pas utiliser aria-grabbed -grabbed et aria-dropeffect dans Dragon Drop. La prise en charge variable des attributs ARIA au sein de la vaste gamme d'associations technologie d'assistance/navigateur est assez répandue dans le monde de l'accessibilité. Heureusement, les attributs de région en direct tels que role , aria-live , aria-relevant et aria-atomic sont assez largement pris en charge par les lecteurs d'écran tels que JAWS, NVDA et VoiceOver.

Accessibilité optimisée

Dragon Drop est un module de réorganisation de liste hautement configurable qui fonctionne pour les utilisateurs de souris, de clavier et de technologie d'assistance. Il y a quelques années, lorsque j'ai décidé de l'écrire, des listes de réorganisation accessibles avaient été évoquées à plusieurs reprises sur des projets sur lesquels je travaillais, mais je n'avais pas encore trouvé de solution de travail. Parmi les dizaines de plugins de réorganisation de listes par glisser-déposer que j'ai rencontrés, la plupart d'entre eux n'ont pas été conçus dans un souci d'accessibilité et, par conséquent, étaient très inaccessibles.

Dragon Drop a été testé avec VoiceOver, JAWS et NVDA et permet aux utilisateurs AT de réorganiser avec succès une liste.

J'ai entrepris de répondre à toutes les questions que tout utilisateur pourrait se poser lorsqu'il rencontre une liste réorganisable. Ces questions ont été résolues pour les utilisateurs de souris voyants grâce à des conventions courantes, mais qu'en est-il du reste des utilisateurs ?

Comment puis-je récupérer un article ?

En fournissant un contrôle qui transmet l'état saisi d'un élément, ainsi qu'un texte d'aide de niveau supérieur, nous pouvons répondre à cette question. Par exemple, un contrôle avec le texte accessible (rassemblé par AT bien que son nom, son rôle et sa valeur) "Réorganiser l'élément 1, bouton bascule" indique à l'utilisateur qu'il s'agit d'un bouton qui, lorsqu'il est activé, sélectionnera l'élément et lancera un réorganisation.

Dragon drop utilise l'attribut aria-pressed pour informer les utilisateurs AT lorsqu'un élément est "glissé" et quand il ne l'est pas. Il peut être configuré pour permettre à un élément entier d'être déplaçable, ou juste à une "poignée de glissement" enfant, ce qui, dans les deux cas, garantit la présence de role="button" et tabindex="0" .

Lorsqu'un élément de glissement est activé, aria-pressed="true" est appliqué à l'élément et une annonce configurable, telle que "Item 1 grabbed" est lue aux lecteurs d'écran via la région en direct.

Comment puis-je déplacer un article ?

Utiliser aria-describedby pour associer les commandes à un texte d'aide utile tel que "Activez le bouton de réorganisation et utilisez les touches fléchées pour réorganiser la liste ou utilisez votre souris pour faire glisser/réorganiser". indique à l'utilisateur comment s'y prendre pour réorganiser réellement. Cela permet aux utilisateurs de lecteurs d'écran de savoir que lorsqu'un élément est pressé, les touches fléchées vers le haut et vers le bas déplaceront l'élément vers le haut et vers le bas de la liste respectivement.

Comment puis-je déposer un article ?

Étant donné que l'attribut aria-pressed est utilisé, les utilisateurs peuvent facilement dire comment déposer un élément. D'une certaine manière, forme ou forme, tous les lecteurs d'écran les plus largement utilisés transmettent l'état enfoncé d'un bouton bascule. L'attribut aria-pressed est défini sur « false » lorsqu'un élément est supprimé et qu'une annonce personnalisée telle que « Élément 1 supprimé » est lue sur les lecteurs d'écran.

Comment puis-je savoir quand la liste a été réorganisée ?

Chaque fois que les touches fléchées haut et bas sont utilisées pour modifier l'ordre de la liste, nous devons nous assurer que tous les utilisateurs sont informés de ce changement. Pour les utilisateurs non-voyants, il faut encore une fois s'appuyer sur les régions en direct. Une annonce configurable telle que « La liste a été réorganisée, l'élément 1 est désormais le 4e de la liste ». , est lu pour transmettre l'état mis à jour de la liste réordonnée. Ceci est important car les utilisateurs voyants ont un retour visuel immédiat de l'ordre modifié et cette même information doit être transmise aux utilisateurs AT.

Comment puis-je annuler la commande ?

Puisque nous ne pouvons pas compter sur une convention largement adoptée pour une telle interaction, nous pouvons simplement inclure des instructions telles que "Appuyez sur Échap pour annuler la réorganisation" dans le texte d'aide. De plus, nous utilisons la région en direct pour fournir une lecture personnalisée qui informe l'utilisateur de l'annulation.

Interaction clavier

Voir le dragon en action

Consultez la démo de Dragon Drop dans laquelle vous rencontrez quelques configurations différentes.

Déposer Dragon Drop dans votre application

Dragon Drop convertit votre liste ordinaire en une liste réorganisable par glisser-déposer entièrement accessible :

 <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> <script> const dragon = document.getElementById('dragon'); // Enter the dragon new DragonDrop(dragon); </script>

Installation

Dragon Drop est un projet open source (licence MIT) et peut être installé via npm :

 $ npm install drag-on-drop

Il peut être utilisé avec des modules comme browserify ou webpack :

 // if you're not down with ES6, you can require('drag-on-drop') import DragonDrop from 'drag-on-drop';

Dragon Drop peut également être facilement déposé dans votre page avec le CDN unpkg :

 <script source="https://unpkg.com/drag-on-drop"></script> <script> var dragonDrop = new DragonDrop(listElement); </script>

Configuration

Pour prendre en charge un large éventail de cas d'utilisation, Dragon Drop est très configurable.

Ci-dessous la configuration par défaut :

 { item: 'li', handle: 'button', activeClass: 'dragon-active', inactiveClass: 'dragon-inactive', announcement: { grabbed: el => `Item ${el.innerText} grabbed`, dropped: el => `Item ${el.innerText} dropped`, reorder: (el, items) => { const pos = items.indexOf(el) + 1; const text = el.innerText; return `The list has been reordered, ${text} is now item ${pos} of ${items.length}`; }, cancel: 'Reordering cancelled' } }

Annonces

L'option de configuration "annonce" de Dragon Drop est la plus importante car elle constitue l'épine dorsale de l'expérience de lecture d'écran fournie par Dragon Drop. Il s'agit d'un objet contenant les fonctions "grabbed" , "dropped" , "reorder" et "cancel" permettant des annonces personnalisées de région en direct pour toutes les interactions qui ont lieu.

Chacune de ces fonctions doit renvoyer une chaîne de texte d'annonce qui est ajoutée à la région en direct lorsque l'action donnée se produit. Un avantage supplémentaire de l'utilisation de ces fonctions est qu'elles prennent en charge la localisation des messages régionaux en direct.

Pour faciliter les annonces, l'élément d'élément de liste dans lequel l'action a eu lieu et le tableau d'éléments de la liste sont respectivement transmis comme arguments.

 { announcement: { // grabbed is called when an item is picked up grabbed: (targetItem, items) => `${targetItem.innerText} grabbed`, // dropped is called when an item is dropped dropped: (targetItem, items) => `${targetItem.innerText} grabbed`, // reorder is called each time the order of the list is altered reorder: (targetItem, items) => { return `${targetItem.innerText} is now ${items.indexOf(targetItem) + 1} of ${items.length}` }, // cancel is called when a reordering is cancelled (via escape key) cancel: () => 'The initial order has been restored, reordering cancelled' } }

Texte d'aide

Il est absolument vital que vous fournissiez un texte d'aide décrivant comment utiliser la liste réorganisable. C'est quelque chose que Dragon Drop ne fait pas pour vous afin de rester moins opiniâtre sur la façon dont ce texte est mis à la disposition de la technologie d'assistance. L'implémentation recommandée consiste à utiliser aria-describedby pour associer le texte d'aide aux éléments interactifs comme suit :

 <p>Activate the reorder button and use the arrow keys to reorder the list or use your mouse to drag/reorder. Press escape to cancel the reordering.</p> <ul> <li> <button>Reorder Item 1</button> <span>Item 1</span> </li> <li> <button>Reorder Item 2</button> <span>Item 2</span> </li> <li> <button>Reorder Item 3</button> <span>Item 3</span> </li> </ul>

Goutte de dragon sur GitHub

La troisième version de Dragon Drop est sortie récemment. Si vous souhaitez l'utiliser, veuillez vous référer à la documentation de Dragon Drop sur GitHub. Un merci spécial aux créateurs de Dragula, le module utilisé par Dragon Drop pour l'interaction avec la souris, ainsi qu'à Aaron Pearlman qui a conçu le superbe logo !

L'avenir du dragon

Si l'interaction glisser-déposer est ajoutée à la spécification technique WAI-ARIA à l'avenir, le fait que Dragon Drop repose sur une interaction non standard et des régions en direct pourrait changer. Je continuerai à effectuer des tests en veillant à ce qu'il reste bien pris en charge par autant de lecteurs d'écran que possible et à me tenir au courant des dernières spécifications ARIA. En outre, de nombreuses fonctionnalités sont en cours de développement, notamment la prise en charge des écrans tactiles/appareils mobiles ainsi que des listes à plusieurs colonnes (comme les tableaux de sprint). Une autre fonctionnalité qui pourrait être ajoutée à l'avenir est un composant Dragon Drop React.

Actuellement, Dragon Drop peut être utilisé avec React, comme indiqué dans la démo ci-dessous, mais ce n'est pas idéal car les modifications DOM causées par la réorganisation de la liste ne sont pas captées par React, ce qui peut provoquer un comportement inattendu. J'invite toute personne qui trouve des bogues dans Dragon Drop, ou qui a même des idées de fonctionnalités, à créer un problème sur GitHub. Tous les commentaires et contributions sont les bienvenus et grandement appréciés !