Stop stopPropagation !

Une carte cliquable, un bouton imbriqué et stopPropagation pour limiter les dégâts. Cette méthode a une place de choix dans la longue et triste histoire des mauvaises pratiques.

En bref :

Les éléments interactifs imbriqués entraînent souvent une propagation accidentelle d'événements et posent de réels problèmes d'accessibilité pour la navigation au clavier et les lecteurs d'écran. Bloquer la propagation des événements masque des comportements utiles du DOM et peut rendre des outils inutilisables. Une meilleure approche consiste à éviter complètement d'imbriquer des éléments interactifs. Soit en aplatissant le DOM et en utilisant CSS pour l'empilement visuel, soit, idéalement, en concevant des cartes avec des zones cliquables clairement séparées, rendant chaque action explicite et accessible.

Le problème

Cliquer sur l'élément interne déclenche également l'écouteur externe, car les événements se propagent en remontant dans le DOM. De plus, l'imbrication d'éléments interactifs perturbe les plugins et les technologies d'assistance.

La pire solution

evt.stopPropagation();

De nombreux développeurs bloquent la propagation de l'événement. Or, la propagation des événements est une fonctionnalité utile du DOM. Vous pourriez avoir besoin ultérieurement d'écouter tous les événements du document pour l'audit, et certains plugins ou outils d'accessibilité s'appuient également sur la propagation. Sans oublier que les problèmes d'accessibilité sont toujours là.

Solution à peine meilleure

if(evt.target === inner) return;

Ignorer les événements de l'élément interne dans l'écouteur externe permet d'éviter d'interférer avec le comportement par défaut des événements. Malheureusement, l'accessibilité reste compromise.

Le W3C met en garde contre l'imbrication d'éléments interactifs. Cette pratique nécessite d'altérer la gestion des événements dans JavaScript et pose problème aux outils d'accessibilité tels que les lecteurs d'écran.

Lors de la navigation au clavier, le focus doit-il se déplacer d'abord vers l'élément interne ou vers l'élément externe ?

Lorsqu'un lecteur d'écran se trouve sur l'élément externe, doit-il lire le texte de l'élément interne ? Si ce n'est pas le cas, des informations sont perdues. Si c'est le cas, les utilisateurs risque de croire que l'élément externe déclenche l'action de l'élément interne.

Meilleure solution

Aplatir le DOM et utiliser le CSS pour empiler visuellement les éléments. Suivez les bonnes pratiques d'accessibilité, notamment la sémantique et l'ordre de focus corrects.

Comme les éléments sont côte-à-côte dans le DOM, les clics sur l'élément interne ne se propagent pas à l'élément externe. L'accessibilité est ainsi améliorée, car les technologies d'assistance privilégient le DOM et l'ordre de focus à la présentation visuelle.

Meilleure solution

Dans la mesure du possible, évitez d'imbriquer des éléments interactifs, que ce soit dans le DOM ou dans la présentation. Divisez plutôt la carte en zones cliquables clairement identifiées. Cela permet aux utilisateurs et aux outils de comprendre plus facilement l'action de chaque clic.

Comment gérez-vous les éléments interactifs imbriqués dans les cartes ?