Dans chaque page web, les actions déclenchées au moyen d’un dispositif de pointage sur un point unique de l’écran peuvent-elles faire l’objet d’une annulation (hors cas particuliers) ?
Un utilisateur aux mains tremblantes pose son doigt sur un bouton « Vider le panier » par erreur. Si l’action se déclenche dès le contact (événement pointerdown ou mousedown), il n’y a rien à faire. Le geste est irréversible avant même d’avoir voulu confirmer. Ce critère impose qu’une porte de sortie existe.
Trois approches permettent d’être conforme. La première, et la plus simple : l’action se déclenche au relâchement du dispositif (pointerup, mouseup, click). La deuxième : l’action démarre à l’appui mais s’annule automatiquement si le curseur ou le doigt quitte la cible avant le relâchement. La troisième : un mécanisme d’annulation ou d’abandon existe, comme une boîte de confirmation, un bouton « Annuler », ou la possibilité de replacer l’élément à son état initial.
Pour le glisser-déposer, deux conditions doivent être réunies. Relâcher l’élément hors de toute zone de dépôt valide doit annuler l’opération en cours. Une fois déposé, l’utilisateur doit pouvoir défaire son geste, soit via un dialogue de confirmation avant la finalisation, soit en pouvant remettre l’élément à sa position d’origine.
Bonne nouvelle : un <button> natif activé via onclick est conforme par défaut. L’événement click se déclenche au relâchement.
Un test pour s'assurer que l'action au pointage peut être annulée
Déclenchement au relâchement ou mécanisme d'annulation des actions au pointage
- Repérez tous les éléments interactifs activables par un clic ou un tap : boutons, liens, zones cliquables, composants personnalisés.
- Pour chaque élément, inspectez les écouteurs d’événements dans les outils de développement (onglet « Event Listeners »).
- Testez manuellement : appuyez sur l’élément et maintenez le bouton enfoncé. Si l’action se déclenche avant le relâchement, passez à l’étape 4. Sinon, cet élément est conforme.
- Si l’action se déclenche à l’appui, vérifiez qu’au moins l’une de ces conditions est remplie : a. L’action s’annule si le curseur quitte la cible avant le relâchement. b. Un mécanisme permet d’abandonner ou d’annuler l’action (dialogue de confirmation, bouton Annuler, retour à l’état initial).
- Pour le glisser-déposer : vérifiez qu’un relâchement hors zone annule l’opération ET qu’une fois déposé, l’utilisateur peut annuler le dépôt.
- Si aucune condition n’est satisfaite pour un élément, le test échoue pour cet élément.
Exemples
❌ Non conforme : Action déclenchée sur mousedown — non conforme
<button onmousedown="supprimerCompte()">Supprimer mon compte</button>L’action s’exécute dès que l’utilisateur appuie, avant le relâchement. Il est impossible de déplacer le curseur hors du bouton pour annuler. Une personne qui tremble ou qui appuie par mégarde n’a aucun recours.
✅ Conforme : Action déclenchée sur click (relâchement) — conforme
<button type="button" onclick="supprimerCompte()">Supprimer mon compte</button>L’événement click se déclenche au relâchement. Si l’utilisateur appuie par erreur, il peut glisser le curseur hors du bouton avant de relâcher : l’action ne s’exécutera pas. C’est le comportement natif des boutons HTML, aucune configuration requise.
✅ Conforme : Glisser-déposer avec dialogue de confirmation — conforme
<div id="item" draggable="true" ondragstart="startDrag(event)">
rapport-q3.pdf
</div>
<div
id="archive"
ondragover="event.preventDefault()"
ondrop="handleDrop(event)"
>
Dossier Archives
</div>
<dialog id="confirm-dialog">
<p>Archiver ce fichier ?</p>
<button type="button" onclick="confirmDrop()">Confirmer</button>
<button type="button" onclick="cancelDrop()">Annuler</button>
</dialog>Le dialogue de confirmation laisse à l’utilisateur la possibilité d’annuler le dépôt. Un relâchement hors de la zone « Dossier Archives » annule automatiquement le glissement. Les deux exigences du critère sont couvertes.
Astuces et pièges
⚠️ Les sliders et carousels maison déclenchent souvent l’action sur pointerdown
Les composants de type range ou carousel développés sans framework utilisent fréquemment pointerdown pour initier le déplacement. Le problème survient quand un simple clic sur la piste repositionne la valeur immédiatement, sans possibilité d’annuler. Testez : appuyez sur la piste du slider sans relâcher. Si la valeur change à ce moment et qu’aucun mécanisme d’annulation n’existe, le critère est en échec.
💡 L’événement click est conforme par conception
Dans tous les navigateurs, click correspond à la séquence pointerdown → pointerup → click. Il se déclenche au relâchement. Utiliser addEventListener('click', ...) ou onclick sur un élément HTML natif est conforme sans configuration supplémentaire. Pas besoin de réécrire quoi que ce soit.
⚠️ Quand le déclenchement à l’appui est fonctionnellement inévitable
Un instrument de musique virtuel, un jeu dont la mécanique repose sur la précision temporelle de l’appui, ou tout composant où la durée du contact fait partie de la fonctionnalité sont exemptés. Ces cas particuliers doivent être documentés dans la déclaration d’accessibilité. L’exemption ne couvre pas les boutons, liens ou formulaires ordinaires.
⚠️ Soumission automatique sur événement « up » : conforme pour 13.11, vigilance sur 7.4
Un composant qui soumet un formulaire automatiquement au relâchement, sans bouton de soumission dédié, est conforme au critère 13.11 car l’action est déclenchée au bon moment. Attention toutefois : cette soumission automatique peut constituer un changement de contexte inattendu, ce qui relève du critère 7.4.
⚠️ Les bibliothèques UI peuvent introduire des écouteurs mousedown silencieux
Des bibliothèques comme Bootstrap, Ant Design ou certaines implémentations de menus déroulants capturent parfois mousedown pour anticiper la fermeture ou gérer le focus. Testez toujours le comportement réel, pas seulement le code que vous avez écrit. Inspectez l’onglet « Event Listeners » des outils de développement pour identifier tous les écouteurs actifs sur un élément interactif.
Questions fréquentes
Pourquoi l'événement click est-il conforme par défaut au critère RGAA 13.11 ?
Oui. L’événement click se déclenche au relâchement du pointeur, après mouseup ou pointerup. Il satisfait la première condition du critère 13.11 sans configuration supplémentaire. C’est pourquoi les boutons et liens HTML natifs sont conformes par défaut.
Comment vérifier la conformité de l'annulation au pointage lors d'un audit RGAA ?
Appuyez sur un bouton ou un contrôle interactif sans relâcher, déplacez le curseur en dehors de l’élément, puis relâchez. Si l’action s’est exécutée à l’appui, le test échoue. Sur mobile, effectuez le même test avec un doigt. Pour le glisser-déposer, testez l’abandon en cours de route et vérifiez qu’une annulation est possible après le dépôt.
Quand une interaction déclenchée sur mousedown reste-t-elle conforme à l'annulation au pointage RGAA ?
Le début du tracé sur mousedown est fonctionnellement justifié. Ce cas est couvert par la troisième condition : un mécanisme d’annulation doit exister (Ctrl+Z, bouton « Annuler », ou appui sur Échap pour interrompre le tracé en cours). Si l’action finale est annulable, le critère 13.11 est respecté.
Comment concevoir un glisser-déposer conforme au critère d'annulation au pointage RGAA 13.11 ?
Non, à condition que l’utilisateur puisse replacer l’élément déposé à son emplacement d’origine. Le RGAA accepte deux formes d’annulation après dépôt : un dialogue de confirmation au moment du dépôt, ou la possibilité de défaire l’opération par repositionnement manuel. Si aucune des deux n’est disponible, le critère n’est pas respecté.
Quels gestes multi-points comme le pinch-to-zoom sont couverts par le critère RGAA 13.11 ?
Non. Le critère 13.11 concerne uniquement les actions déclenchées sur un point unique de l’écran. Les gestes nécessitant plusieurs points de contact simultanés relèvent du critère 13.10, qui traite des interactions basées sur des trajectoires ou des gestes complexes.