Attribut HTML universel : inert
Baseline
Widely available
*
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis avril 2023.
* Certaines parties de cette fonctionnalité peuvent bénéficier de prise en charge variables.
L'attribut universel inert est un attribut booléen qui indique que l'élément et tous ses descendants dans l'arbre plat deviennent inertes. L'attribut inert peut être ajouté à des sections de contenu qui ne doivent pas être interactives. Lorsqu'un élément est inerte, lui et tous ses descendants, y compris les éléments normalement interactifs comme les liens, boutons et contrôles de formulaire, sont désactivés car ils ne peuvent pas recevoir la sélection ni être cliqués. L'attribut inert peut aussi être ajouté à des éléments qui doivent être hors écran ou masqués. Un élément inerte, ainsi que ses descendants, est retiré de l'ordre de tabulation et de l'arbre d'accessibilité.
Les <dialog> modaux générés avec showModal() échappent à l'inertie, ce qui signifie qu'ils n'héritent pas de l'inertie de leurs ancêtres, mais peuvent être rendus inertes si l'attribut inert leur est explicitement appliqué. Aucun autre élément ne peut échapper à l'inertie.
Note :
Bien que inert soit un attribut universel et puisse être appliqué à n'importe quel élément, il est généralement utilisé pour des sections de contenu. Pour rendre des contrôles individuels « inertes », il est préférable d'utiliser l'attribut disabled avec les styles CSS :disabled.
Les éléments HTML inertes et leurs descendants dans l'arbre plat :
- Ne déclenchent pas d'évènements
clicklorsqu'on clique dessus. - Ne peuvent pas recevoir la sélection et les évènements
focusne peuvent pas être déclenchés sur eux. - Ne sont pas trouvables avec la fonction de recherche dans la page du navigateur (aucun de leur contenu n'est trouvé ou mis en correspondance).
- Interdisent aux utilisateur·ice·s de sélectionner le texte contenu dans leur contenu — comme si on utilisait la propriété CSS
user-selectpour désactiver la sélection de texte. - Ne peuvent pas voir leur contenu éditable modifié. Cela inclut, par exemple, le contenu des champs
<input>textuels, et des éléments de texte aveccontenteditableactivé. - Sont masqués des technologies d'assistance car ils sont exclus de l'arbre d'accessibilité.
Les fonctionnalités suivantes peuvent aussi être utilisées pour rendre un élément et ses descendants inertes :
- La propriété CSS
interactivity. - La propriété DOM
HTMLElement.inert.
Problèmes d'accessibilité
Faites très attention à l'accessibilité lorsque vous appliquez l'attribut inert. Par défaut, il n'existe aucun moyen visuel de savoir si un élément ou son sous-arbre est inerte. En tant que développeur·euse web, il est de votre responsabilité d'indiquer clairement quelles parties du contenu sont actives et lesquelles sont inertes.
En fournissant des indices visuels et non visuels sur l'inertie du contenu, gardez aussi à l'esprit que la zone d'affichage visuelle peut ne contenir que des sections de contenu. Les utilisateur·ice·s peuvent être zoomé·e·s sur une petite section de contenu, ou ne pas pouvoir voir le contenu du tout. Des sections inertes qui ne sont pas clairement inertes peuvent entraîner de la frustration et une mauvaise expérience utilisateur.
Exemples
Dans cet exemple, le deuxième <div> et tous ses descendants sont rendus inertes grâce à l'attribut inert :
<div>
<label for="button1">Bouton 1</label>
<button id="button1">Je ne suis pas inerte</button>
</div>
<div inert>
<label for="button2">Bouton 2</label>
<button id="button2">Je suis inerte</button>
</div>
Spécifications
| Specification |
|---|
| HTML # the-inert-attribute |
Compatibilité des navigateurs
Voir aussi
- L'élément
<dialog> - La propriété DOM
HTMLElement.inert - La propriété CSS
interactivity