L'attribut inert est un attribut HTML global qui simplifie la suppression et la restauration des événements d'entrée utilisateur pour un élément, y compris les événements de sélection et les événements issus de technologies d'assistance.
L'inerte est un comportement par défaut dans les éléments de boîte de dialogue, par exemple lorsque vous utilisez showModal pour ouvrir une boîte de dialogue permettant aux utilisateurs de faire une sélection, puis de la fermer de l'écran.
Après avoir ouvert un <dialog>, le reste de la page devient inerte. Par exemple, vous ne pouvez plus cliquer sur les liens ni utiliser la touche de tabulation pour y accéder.
Vous pouvez utiliser l'attribut inert pour obtenir le même comportement sur les autres éléments.
Inerte signifie ne pas pouvoir se déplacer. Par conséquent, lorsque vous marquez un élément inerte, vous supprimez le mouvement ou l'interaction de ces éléments DOM.
<div>
<label for="button1">Button 1</label>
<button id="button1">I am not inert</button>
</div>
<div inert>
<label for="button2">Button 2</label>
<button id="button2">I am inert</button>
</div>
Ici, inert a été déclaré sur le deuxième élément <div> contenant button2. Par conséquent, tout le contenu de ce <div>, y compris le bouton et le libellé, ne peut pas être sélectionné ni cliqué.
L'attribut inert est particulièrement utile pour l'accessibilité, en particulier pour éviter que la mise au point ne soit piégée.
Meilleure accessibilité
Les Consignes d'accessibilité des contenus Web exigent une gestion de la sélection, ainsi qu'un ordre de mise au point pertinent et utilisable. Cela inclut à la fois la visibilité et l'interactivité. Auparavant, la visibilité pouvait être supprimée avec aria-hidden="true", mais l'interactivité est plus difficile.
inert permet aux développeurs de supprimer un élément de l'ordre de tabulation et de l'arborescence d'accessibilité. Cela vous permet de contrôler à la fois la visibilité et l'interactivité, et de créer des modèles plus faciles à utiliser et plus accessibles.
Il existe deux principaux cas d'utilisation d'appliquer inert à un élément pour améliorer l'accessibilité:
- Élément qui fait partie de l'arborescence DOM, mais se trouve hors de l'écran ou est masqué.
- Lorsqu'un élément fait partie de l'arborescence DOM, mais ne doit pas être interactif.
Éléments DOM masqués ou hors écran
Un problème d'accessibilité courant concerne les éléments tels qu'un panneau, qui ajoute au DOM des éléments qui ne sont pas toujours visibles par l'utilisateur.
Avec inert, vous pouvez vous assurer que les utilisateurs du clavier ne peuvent pas interagir accidentellement avec les sous-éléments du panneau hors écran.
Éléments DOM non interactifs
Un autre problème d'accessibilité courant concerne les conceptions d'interface utilisateur visibles ou partiellement visibles, mais clairement non interactives. Cela peut se produire, par exemple, pendant le chargement de la page, l'envoi d'un formulaire ou si une boîte de dialogue en superposition est ouverte.
Pour offrir la meilleure expérience utilisateur possible, indiquez l'état de l'interface utilisateur et bloquez le focus sur la partie interactive de la page.
Mise au point
Le piègement de la sélection est un concept central d'une bonne accessibilité de l'interface utilisateur. Vous devez vous assurer que le lecteur d'écran se concentre sur des éléments d'interface utilisateur interactifs et qu'il détecte qu'un élément bloque l'interactivité. Cela permet également d'éviter que les lecteurs d'écran non autorisés passent derrière une superposition de page ou qu'ils envoient accidentellement un formulaire alors que le premier envoi est toujours en cours de traitement.
inert vous permet de vous assurer que le seul contenu visible est accessible. Cette fonctionnalité est utile pour:
- Éléments bloquants tels qu'une boîte de dialogue modale, un menu qui permet de couper le curseur ou une barre de navigation latérale
- Carrousel d'éléments inactifs.
- Contenu du formulaire non applicable (par exemple, fondu en fondu et désactivation des champs "Adresse de livraison" lorsque la case "Identique à l'adresse de facturation" a été cochée)
- Désactiver l'ensemble de l'interface utilisateur dans un état incohérent
indiquer visuellement les éléments inert ;
Par défaut, il n'y a pas d'indication visuelle indiquant qu'une sous-arborescence est inerte. Il est recommandé de marquer clairement les parties du DOM qui sont actives et celles qui sont inertes.
[inert], [inert] * {
opacity: 0.5;
pointer-events: none;
cursor: default;
user-select: none;
}
Tous les utilisateurs ne peuvent pas voir toutes les parties d'une page en même temps. Par exemple, les utilisateurs de lecteurs d'écran, de petits appareils ou de loupes, et même ceux qui n'utilisent que des fenêtres particulièrement petites, peuvent ne pas voir la partie active d'une page et être frustrés si les sections inertes ne sont pas manifestement inertes. Pour les commandes individuelles, l'attribut "désactivé" est probablement plus approprié.
Quelles interactions et quels mouvements sont bloqués ?
Par défaut, inert bloque les événements de sélection et de clic. Pour les technologies d'assistance, cela bloque également les onglets et la visibilité. Le navigateur peut également ignorer la recherche sur les pages et la sélection de texte dans l'élément.
La valeur par défaut de inert est false.