Une modale doit-elle se fermer au clic extérieur ?

La question revient à chaque revue de composant, et elle reçoit généralement une réponse de principe : « oui, il faut pouvoir fermer au clic extérieur ». C'est une bonne intention appliquée trop largement. Selon ce que la modale attend de l'utilisateur, fermer facilement est un confort ou une faute.

Trois cas, trois comportements

Adrian Roselli propose un découpage qui a le mérite de trancher vite. Il tient en une question : que se passe-t-il si l'utilisateur ferme par erreur ?

Le dialogue qui exige une décision. Supprimer un compte, accepter des conditions, confirmer un paiement : l'utilisateur doit répondre, et une fermeture accidentelle lui fera croire qu'il a répondu. Ici, ni le clic extérieur ni Échap ne doivent fermer. Un bouton « Annuler » explicite fait le travail, et il a l'avantage d'être atteignable par tout le monde.

Le dialogue informatif. Une confirmation d'envoi, une aide contextuelle, une proposition d'inscription à une lettre d'information : rien ne se perd à la fermeture. Fermer au clic extérieur est alors un confort réel, et Échap doit faire exactement la même chose.

Les motifs dérivés. Tiroir latéral, panneau glissant, visionneuse d'images : ils empruntent au dialogue sans en être. Deux questions permettent de trancher au cas par cas. L'utilisateur perd-il une saisie en fermant ? Et le comportement est-il cohérent avec les autres composants du même site ? L'incohérence interne coûte souvent plus cher que le choix lui-même.

La règle qui vaut dans tous les cas

Le clic extérieur et la touche Échap doivent se comporter identiquement. Ce sont deux formulations du même geste : sortir sans décider.

Une modale qui se ferme au clic extérieur mais résiste à Échap n'a pas fait un choix de conception, elle a oublié le clavier. Et elle pénalise précisément les personnes qui n'utilisent pas de souris. L'inverse existe aussi et pose le même problème en miroir.

Ce que le RGAA exige, indépendamment du choix

Quel que soit l'arbitrage sur la fermeture, trois exigences s'appliquent et se vérifient au clavier seul.

Le focus entre dans la modale à l'ouverture. Sur le premier élément interactif utile, ou sur le conteneur du dialogue. Une modale qui s'ouvre en laissant le focus derrière elle est invisible pour qui ne la voit pas.

Le focus ne sort pas tant qu'elle est ouverte. C'est l'objet du critère 12.9 sur les pièges au clavier, dans son versant inverse : ici, ce n'est pas l'utilisateur qui est piégé dans la modale, c'est l'arrière-plan qui doit être rendu inerte. L'attribut inert sur le conteneur principal fait ce travail proprement, là où aria-hidden seul laisse les éléments atteignables à la tabulation.

Le focus revient au déclencheur à la fermeture. Sans quoi l'utilisateur repart du haut de la page, sans indication de l'endroit où il en était.

<div id="contenu-principal" inert>
  <!-- page rendue inerte pendant que la modale est ouverte -->
</div>

<div role="dialog" aria-modal="true" aria-labelledby="titre-modale">
  <h2 id="titre-modale">Confirmer la suppression</h2>
  <p>Cette action est irréversible.</p>
  <button type="button">Annuler</button>
  <button type="button">Supprimer</button>
</div>

Sur le choix entre inert et aria-hidden, notre article sur aria-hidden détaille pourquoi le second ne suffit pas seul.

L'erreur qui reste la plus fréquente

Ce n'est aucune des précédentes : c'est la modale sans nom accessible. Un role="dialog" sans aria-labelledby pointant vers son titre produit une annonce du type « boîte de dialogue », sans dire laquelle. L'utilisateur sait qu'une fenêtre s'est ouverte et ignore ce qu'elle lui demande.

Conclusion

Il n'y a pas de réponse universelle à la question de départ, et c'est précisément pour cela qu'elle mérite d'être posée composant par composant plutôt que réglée une fois pour toutes dans le design system. Ce qui, en revanche, ne se discute pas, c'est la symétrie entre clic extérieur et Échap, et le trajet du focus.

Analysez la page qui porte vos modales : l'absence de nom accessible et les éléments focusables masqués ressortent automatiquement. Le trajet du focus, lui, se vérifie en ouvrant la modale et en tabulant.

Source de l'analyse initiale : Should a Dialog Close When Clicked Outside?, Adrian Roselli, août 2026.