Arrière-plan inerte et aria-modal

Même lorsque le focus est captif, le contenu derrière votre fenêtre modale se trouve toujours dans le DOM. Un lecteur d’écran peut y accéder à moins que vous ne l’en empêchiez.

L’attribut inert rend un élément et tous ses enfants impossibles à focaliser ou à cliquer, et les exclut des technologies d’assistance en une seule opération.

Lorsque la fenêtre modale s’ouvre, ajoutez inert à tout ce qui se trouve à l’extérieur. La page située derrière devient alors réellement inaccessible à quiconque.

Lorsque la fenêtre modale se ferme, retirez l’attribut inert afin que la page redevienne interactive. Si vous l’oubliez, la page reste figée.

Une boîte de dialogue native dialog ouverte avec showModal() rend automatiquement le reste de la page inerte. Vous bénéficiez donc de cette protection sans code supplémentaire.

Ajouter aria-modal avec la valeur true indique aux technologies d’assistance que le contenu extérieur à cette boîte de dialogue n’est pas disponible pendant son ouverture.

Attention : aria-modal informe uniquement le lecteur d’écran. Il ne bloque réellement ni le focus ni les clics : vous avez donc toujours besoin de inert.

Le modèle robuste associe inert sur l’arrière-plan à aria-modal sur la boîte de dialogue. L’un impose la limite, l’autre l’annonce.

Avant que inert soit largement pris en charge, les développeurs plaçaient aria-hidden sur l’arrière-plan. Cela masquait le contenu aux lecteurs, mais n’empêchait pas le focus du clavier.

Un bogue classique consiste à appliquer aria-hidden à une zone si large qu’elle couvre aussi la boîte de dialogue. Assurez-vous que votre fenêtre modale reste en dehors de la région masquée.

Ouvrez l’arbre d’accessibilité du navigateur avec la fenêtre modale ouverte. Vérifiez que la page située derrière en a disparu et qu’il ne reste que la boîte de dialogue. ✅

Vous avez appris à rendre la page située derrière inerte et à déclarer aria-modal, afin que la fenêtre modale soit réellement la seule chose accessible aux utilisateurs. 🎯