L’attribut HTML inert : Comment rendre une zone inactive pour une navigation plus accessible

Créer un site web moderne demande souvent d’afficher des éléments qui se superposent, comme des fenêtres surgissantes (modales) ou des menus qui glissent sur le côté. Mais une question se pose alors : comment être certain que l’utilisateur ne va pas cliquer sur un bouton resté “derrière” ou naviguer avec son clavier dans une zone qu’il ne voit plus ?

Pendant longtemps, cette tâche simple a été un cauchemar pour les développeurs. Il fallait écrire des scripts JavaScript très longs et compliqués pour empêcher le curseur de se déplacer n’importe où. Aujourd’hui, il existe une solution beaucoup plus simple et intégrée directement dans le langage HTML : l’attribut inert.

Dans ce guide, nous allons voir comment cet outil minuscule permet de rendre vos sites plus rapides, plus légers et surtout beaucoup plus simples à utiliser pour les personnes handicapées.

#Qu’est-ce que l’attribut inert exactement ?

Le mot “inerte” signifie qui ne bouge pas, qui n’agit pas. En programmation web, lorsqu’on ajoute l’attribut inert sur une partie de votre page (une div, une section, ou un main), on dit au navigateur de considérer que cette zone n’existe plus pour l’utilisateur.

Ce n’est pas seulement une modification visuelle. C’est une mise en sommeil profonde de l’élément. Voici les trois effets principaux qu’il produit immédiatement :

1. On ne peut plus cliquer : Tous les liens, boutons ou formulaires présents dans la zone deviennent impossibles à
2. cliquer avec une souris ou à toucher sur un écran tactile.
3. Le clavier l’ignore : Si un utilisateur utilise la touche “Tab” pour passer d’un lien à un autre, le navigateur
4. sautera directement toute la partie marquée comme inert. C’est une aide immense pour les personnes qui ont des
5. difficultés motrices.
6. Les lecteurs d’écran se taisent : Les logiciels utilisés par les personnes aveugles ignorent totalement le
7. contenu de la zone. Cela évite de lire des informations qui ne sont pas pertinentes à ce moment-là.

Une approche radicalement simple

Contrairement aux anciennes méthodes qui demandaient de modifier chaque bouton un par un, inert s’applique sur un parent. Si vous mettez une boîte en “inerte”, tout ce qui se trouve à l’intérieur le devient aussi automatiquement. C’est ce qu’on appelle la propagation en cascade.

#Pourquoi est-ce une révolution pour l’accessibilité ?

Pour un utilisateur qui voit bien et qui utilise une souris, il est facile de comprendre qu’il ne faut pas cliquer sur ce qui se trouve derrière une fenêtre ouverte. Mais pour une personne handicapée, la situation est différente.

Protéger l’utilisateur des “erreurs de navigation”

Imaginez une personne aveugle qui ouvre un menu de navigation sur son smartphone. Si le développeur n’a pas rendu le reste de la page inactif, le lecteur d’écran continuera de proposer les liens du pied de page ou des articles de fond, alors que le menu est toujours ouvert. L’utilisateur se sent perdu, il ne sait plus où il se trouve sur le site.

En utilisant inert, vous créez une sorte de “garde-fou”. Vous guidez l’utilisateur pour qu’il reste concentré sur l’action importante du moment (remplir un formulaire, choisir une option dans un menu) sans risquer de sortir de cette zone par erreur.

Simplifier l’usage du clavier

Beaucoup de personnes utilisent le clavier au lieu de la souris, soit par habitude, soit par nécessité (handicap moteur). Sans l’attribut inert, ces utilisateurs doivent parfois appuyer 50 fois sur la touche “Tab” pour traverser une page entière avant d’arriver au bouton “Fermer” d’une fenêtre. Avec inert, vous supprimez tous les obstacles inutiles. La navigation devient fluide et naturelle.

#Comment utiliser ‘inert’ dans votre code ?

L’un des plus grands avantages de cette solution est sa simplicité technique. Vous n’avez pas besoin d’être un expert en programmation pour l’utiliser.

Exemple pratique : la fenêtre modale

C’est le cas le plus courant. Voici comment structurer votre page pour que cela fonctionne parfaitement :

Copy<body>
  <!-- On enveloppe tout le contenu principal dans une div -->
  <div id=contenu-principal>
    <header>...</header>
    <main>...</main>
    <footer>...</footer>
  </div>

  <!-- La fenêtre qui s'affiche par-dessus -->
  <div id=ma-fenetre-modale role=dialog aria-modal=true>
    <button onclick="fermer()">Fermer</button>
    <p>Ceci est une information importante.</p>
  </div>
</body>

Lorsque vous affichez la fenêtre, il vous suffit d’ajouter l’attribut sur la zone que vous voulez rendre inactive : document.getElementById('contenu-principal').setAttribute('inert', '');

Et quand vous fermez la fenêtre, vous retirez l’attribut : document.getElementById('contenu-principal').removeAttribute('inert');

En une seule ligne de code, vous avez réglé tous les problèmes d’interactivité de votre page.

#Inert vs aria-hidden : ne faites plus la confusion

C’est une confusion très fréquente lors du développement. Beaucoup de sites utilisent aria-hidden="true". C’est une bonne intention, mais c’est incomplet.

• aria-hidden="true" : Dit au lecteur d’écran de ne pas lire la zone. Mais l’utilisateur peut toujours cliquer
• dessus ou y accéder avec la touche Tab de son clavier. C’est très déroutant car on peut interagir avec quelque chose
• qu’on ne nous annonce pas.
• inert : Bloque tout en même temps. La souris, le clavier et la voix. C’est la solution complète.

#Performance et éco-conception : coder moins pour faire mieux

Sur ce blog, je parle souvent de performance et de respect de l’environnement numérique (éco-conception). L’attribut inert est un excellent exemple de cette philosophie.

Réduire le poids des pages

Auparavant, pour gérer le blocage de la navigation, on téléchargeait des bibliothèques JavaScript (comme focus-trap) qui pesaient plusieurs dizaines de kilo-octets. Multiplié par des millions de visiteurs, cela représente une consommation d’énergie importante pour les serveurs et les réseaux.

En utilisant une fonction native du navigateur, vous supprimez ces fichiers inutiles. Votre site se charge plus vite, ce qui améliore votre score LCP (Largest Contentful Paint). Pour Google, c’est un signal positif qui peut aider votre SEO.

Moins de travail pour l’ordinateur de l’utilisateur

Chaque script qui tourne sur un navigateur consomme de la batterie sur un smartphone. inert est géré directement par le moteur du navigateur (en langage C++ très rapide). C’est beaucoup plus économe en énergie qu’un script JavaScript qui surveille chaque mouvement de souris ou chaque touche pressée.

#Le point sur la compatibilité (baseline 2024)

Pendant quelques années, inert était une nouveauté expérimentale. Ce n’est plus le cas. Depuis 2024, il fait partie de ce qu’on appelle la “Baseline”. Cela signifie que tous les navigateurs modernes le supportent parfaitement.

Si vous devez encore supporter des navigateurs très anciens (ce qui est de plus en plus rare), il existe des “polyfills” (petits scripts de secours), mais pour 96% des internautes, cela fonctionnera nativement sans aucun effort supplémentaire de votre part.

#Astuce de design : styliser les zones inactives

Pour améliorer l’expérience utilisateur (UX), il est conseillé de montrer visuellement que le contenu en arrière-plan n’est plus disponible. Vous pouvez utiliser l’attribut inert comme un sélecteur dans votre fichier CSS :

Copy/* On réduit la visibilité de tout ce qui est inerte */
[inert] {
  opacity        : .4;
  filter         : blur(2px);
  user-select    : none;
  pointer-events : none;
}

Ainsi, l’utilisateur comprend immédiatement, par le regard, qu’il doit se concentrer sur la fenêtre active. C’est une manière élégante de marier le design et la technique.

#Conclusion : Vers un artisanat du code responsable

L’adoption de l’attribut inert n’est pas seulement un gain de temps pour le développeur. C’est une preuve de respect envers les utilisateurs. En choisissant des solutions natives et légères, on construit un web qui ne laisse personne de côté, qu’il s’agisse de personnes handicapées ou d’utilisateurs avec des connexions internet lentes.

En 2026, la qualité d’un site ne se mesure plus à la complexité de ses scripts, mais à la pertinence de ses choix techniques. Utilisez inert, simplifiez votre code, et faites de l’accessibilité une force pour votre projet.

Questions fréquemment posées

Lionel Péramo

Expert Performance Web & Écoconception

Développeur full stack et créateur du framework OTRA (PHP) et de la librairie EcoComposer. J'écris pour rendre le web plus rapide et inclusif.

En savoir plus →