inert

Description

L’attribut booléen inert désactive complètement une section du DOM : les éléments inert ne peuvent plus recevoir le focus, ne répondent plus aux événements (clic, clavier…), sont ignorés par les lecteurs d’écran, et exclus de la recherche dans la page. Il est idéal pour bloquer l’interaction avec du contenu en arrière-plan (modales, panneaux désactivés).

Syntaxe

<div inert>
  <button>Ce bouton est inaccessible</button>
  <input type="text" placeholder="Ce champ est inaccessible">
</div>

Exemples

Fenêtre modale bloquant le contenu principal :

<main id="contenu-principal">
  <p>Contenu de la page</p>
</main>

<dialog id="modal" open>
  <h2>Titre de la modale</h2>
  <button type="button" id="fermer">Fermer</button>
</dialog>

<script>
  const main = document.getElementById('contenu-principal');
  const fermer = document.getElementById('fermer');

  // Bloquer l'interaction avec le fond
  main.inert = true;

  fermer.addEventListener('click', () => {
    main.inert = false;
    document.getElementById('modal').close();
  });
</script>

Notes

Meilleure alternative à tabindex="-1" : inert est plus complet que tabindex="-1" car il bloque aussi les clics, les événements et les lecteurs d’écran sur tout le sous-arbre.

Pas de style visuel par défaut : inert ne modifie pas l’apparence. Ajouter [inert] { opacity: 0.5; pointer-events: none; } pour signaler visuellement l’état inactif.

<dialog> gère inert automatiquement : quand un <dialog> est ouvert avec showModal(), le navigateur pose automatiquement inert sur le reste du document — pas besoin de le gérer manuellement.