logo oujood
🔍

 HTML Attribut inert – Élément inerte

L’attribut HTML inert permet de rendre un élément non interactif, ce qui améliore l’accessibilité et le contrôle des interfaces.

OUJOOD.COM

Définition et utilisation de l'attribut inert

HTML – Les attributs globaux (nouveaux standards)

L'attribut inert est un nouveau standard HTML5 qui rend un élément et son contenu non interactifs. Les éléments marqués comme inertes ne peuvent pas recevoir le focus et ne répondent pas aux événements utilisateur, même si leurs enfants contiennent des liens, des boutons ou des champs de formulaire.

L'attribut inert est particulièrement utile pour gérer les boîtes de dialogue modales ou les sections désactivées dans une page web sans altérer leur affichage visuel.

Syntaxe :

<element inert>...</element>

Exemple d'utilisation de l'attribut inert

Exemple :   📋 Copier le code 

  <!DOCTYPE html>
  <html lang="fr">
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Exemple inert</title>
  </head>
  <body>
  
  <div inert>
    <h2>Section inerte</h2>
    <button>Je ne peux pas être cliqué</button>
    <input type="text" value="Non éditable">
  </div>
  
  <div>
    <button>Je suis actif</button>
  </div>

  </body>
  </html>

Dans cet exemple, le bouton et le champ texte situés dans le conteneur <div inert> sont affichés mais ne sont pas interactifs.

Navigateurs pris en charge

Google Chrome - Supporté depuis la version 84 Firefox - Support partiel via polyfillPolyfill disponible pour fire-fox Opera - Supporté depuis la version 70 Safari - Supporté depuis la version 15

L'attribut inert est bien pris en charge dans Chrome, Opera et Safari récents. Sur Firefox, un polyfill peut être utilisé pour ajouter le support.

Polyfill pour l'attribut inert

Tous les navigateurs ne supportent pas encore l'attribut inert nativement, en particulier certaines versions de Firefox. Pour garantir un comportement uniforme, il est possible d'utiliser un polyfill en JavaScript. Un polyfill est un script qui ajoute une fonctionnalité manquante dans un navigateur plus ancien.

Code du polyfill :

Exemple :   📋 Copier le code 

<script>
(function() {
  if ('inert' in HTMLElement.prototype) return; // Si déjà supporté, ne rien faire

  function setInert(element, inert) {
    if (inert) {
      element.setAttribute('aria-hidden', 'true');
      element.querySelectorAll('a, button, input, textarea, select, [tabindex]').forEach(function(el) {
        el.setAttribute('tabindex', '-1');
        el.setAttribute('disabled', 'true');
      });
      element.style.pointerEvents = 'none';
    } else {
      element.removeAttribute('aria-hidden');
      element.querySelectorAll('a, button, input, textarea, select, [tabindex]').forEach(function(el) {
        el.removeAttribute('tabindex');
        el.removeAttribute('disabled');
      });
      element.style.pointerEvents = '';
    }
  }

  function applyInertAttributes() {
    document.querySelectorAll('[inert]').forEach(function(el) {
      setInert(el, true);
    });
  }

  var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
      if (mutation.type === 'attributes' && mutation.attributeName === 'inert') {
        setInert(mutation.target, mutation.target.hasAttribute('inert'));
      }
    });
  });

  document.addEventListener('DOMContentLoaded', function() {
    applyInertAttributes();
    document.querySelectorAll('[inert]').forEach(function(el) {
      observer.observe(el, { attributes: true });
    });
  });
})();
</script>

Ce script doit être placé juste avant la balise </body> de votre page HTML. Il détecte tous les éléments ayant l'attribut inert et les rend inertes en simulant le comportement natif. Il gère également l'ajout et la suppression dynamique de l'attribut inert via JavaScript, par exemple :

Exemple :   📋 Copier le code 

// Rendre un élément inerte
document.querySelector('#maSection').setAttribute('inert', '');

// Retirer l'état inerte
document.querySelector('#maSection').removeAttribute('inert');

Différences avec disabled et hidden

  • disabled s'applique uniquement aux éléments de formulaire, alors que inert peut s'appliquer à tout élément HTML.
  • hidden masque un élément, tandis que inert le rend inactif sans le cacher.

Cas d'utilisation

Cas Description
Dialogues modaux Rendre le reste de la page inerte pendant l'affichage d'une fenêtre modale.
Sections désactivées Rendre un formulaire ou un bloc temporairement non interactif sans altérer son apparence.

Conclusion

L'attribut inert est un ajout important pour l'accessibilité et la gestion de l’interactivité dans les interfaces modernes. Il est particulièrement utile pour contrôler les éléments actifs lors de l'utilisation de dialogues, menus et composants dynamiques.

 Retour à la liste des attributs globaux      
Accueil HTML 5
Par gerywa – 30 juillet 2025