# Le critère WCAG 2.2 sur le glisser-déposer et son alternative au clic

> Le critère 2.5.7 impose une alternative au glisser-déposer. Panorama de ce qu'il couvre, comment il fonctionne, et où il s'applique dans un site WordPress.

- Auteur : Clément Hadrot
- Publié le : 2024-02-20
- Mis à jour le : 2024-02-20
- Catégorie : Accessibilité
- URL : https://wpmoderne.dev.wordpress-developpement.fr/accessibilite/glisser-deposer-wcag-22-alternative-clic/

## L’essentiel

- Toute action au glisser-déposer doit avoir une alternative au simple clic ou appui
- Le critère couvre le tri de listes, les curseurs et le réordonnancement
- Il ne s'applique pas quand le glisser est essentiel ou déterminé par l'agent utilisateur

Trier des photos par glisser-déposer, réordonner des lignes dans un tableau de bord, ajuster une valeur avec un curseur qu'on fait glisser : ces interactions sont devenues si naturelles à la souris qu'on oublie qu'elles reposent sur une combinaison de gestes précis — appui maintenu, déplacement continu, relâchement au bon endroit — difficile ou impossible à réaliser pour une personne avec un tremblement, une amplitude de mouvement réduite, ou qui navigue au clavier ou par commande vocale.

C'est ce que couvre le critère 2.5.7 « Mouvements de glisser » de WCAG 2.2, niveau AA : toute fonctionnalité qui utilise un geste de glisser doit pouvoir être réalisée avec une action simple, comme un clic ou un appui, sauf si le glisser est essentiel à la fonction ou déterminé par l'agent utilisateur et non par l'auteur du contenu. Ce billet explique ce que couvre précisément ce critère et comment lui donner une alternative au clic, sans entrer dans le cas particulier du réordonnancement des blocs Gutenberg, traité juste après dans un retour d'expérience dédié.

## Ce que le critère couvre, et ce qu'il ne couvre pas

Le champ d'application du critère 2.5.7 est précis. Il vise les fonctionnalités qui *reposent sur* un mouvement de glisser comme unique moyen d'accomplir une action : réordonner une liste, ajuster un curseur de plage (`<input type="range">` personnalisé), déplacer un élément entre deux zones. Il ne s'applique pas quand le glisser est indispensable à la nature même de la fonctionnalité — un logiciel de dessin où glisser *est* l'action de tracer un trait, par exemple — ni quand le mouvement est géré par le système d'exploitation ou le navigateur plutôt que par le code du site, comme le défilement natif d'une page.

## Fonctionnement interne : ce qu'implique une alternative

Fournir une alternative ne veut pas dire supprimer le glisser-déposer, qui reste une interaction rapide et appréciée à la souris. Cela veut dire qu'il doit exister, en parallèle, un chemin qui n'exige aucun geste de glisser. Concrètement, pour les trois cas les plus fréquents en WordPress :

> L'essentiel à retenir : Toute action au glisser-déposer doit avoir une alternative au simple clic ou appui ; Le critère couvre le tri de listes, les curseurs et le réordonnancement ; Il ne s'applique pas quand le glisser est essentiel ou déterminé par l'agent utilisateur

- **Réordonnancement de liste** : ajouter, à côté de chaque élément, deux boutons « monter » et « descendre » (ou un menu contextuel « déplacer vers »), activables au clic ou à l'appui, en plus du glisser existant.
- **Curseur de plage** : s'assurer que l'élément est un véritable `<input type="range">` natif ou un composant qui répond aux flèches du clavier, sans se limiter à un curseur qu'on ne peut faire bouger qu'en le tirant à la souris.
- **Déplacement entre zones** (par exemple un tableau kanban de tâches) : proposer un menu ou un raccourci clavier qui accomplit le même déplacement sans glisser, par exemple « Déplacer dans la colonne suivante ».

## Cas d'usage : un widget de réorganisation de galerie

Sur un plugin maison qui permet de réorganiser l'ordre des images d'une galerie par glisser-déposer, la mise en conformité a consisté à ajouter, sur chaque vignette, un bouton discret (visible au focus clavier et à la souris) ouvrant un petit menu avec les options « Déplacer au début », « Déplacer d'un rang vers la gauche », « Déplacer d'un rang vers la droite », « Déplacer à la fin ». Le glisser-déposer à la souris reste disponible et inchangé pour qui le préfère ; le menu couvre exactement la même fonction pour qui ne peut pas ou ne veut pas glisser.

```
<li class="galerie-item" data-position="3">
  <img src="photo-3.jpg" alt="Vue du chantier, façade nord">
  <button
    class="galerie-item__menu-deplacer"
    aria-haspopup="menu"
    aria-label="Déplacer cette image">
    ⋮
  </button>
</li>
```

## Pièges fréquents

Le piège le plus courant consiste à croire qu'ajouter une poignée de glisser plus grande, ou un retour visuel plus net pendant le glissement, suffit à répondre au critère. Ce n'est pas le cas : le critère porte sur l'existence d'une alternative sans geste de glisser, pas sur l'ergonomie du glisser lui-même. Un autre piège fréquent est d'oublier les curseurs de plage personnalisés utilisés dans les réglages de thème ou les blocs Gutenberg (opacité d'une superposition, largeur d'une colonne) : s'ils ne répondent pas aux flèches du clavier une fois focalisés, ils échouent au critère même s'ils semblent, à la souris, parfaitement fonctionnels.

## En résumé

Le critère 2.5.7 ne demande pas de renoncer au glisser-déposer, mais d'y adosser systématiquement une alternative activable au clic ou à l'appui — boutons de déplacement, menu contextuel, ou simple support natif des flèches du clavier sur un curseur. La vérification la plus rapide reste de se poser une question simple pour chaque fonctionnalité de glisser du site : « puis-je faire la même chose sans jamais maintenir le bouton de la souris enfoncé ? ». Si la réponse est non, le critère n'est pas respecté.