L'attribut inerte

Emma Twersky

L'attribut inert est un attribut HTML global qui simplifie la suppression et la restauration des événements de saisie utilisateur pour un élément, y compris les événements de mise au point et les événements provenant de technologies d'assistance.

L'inactivité 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. Une fois un <dialog> ouvert, le reste de la page devient inerte. Par exemple, vous ne pouvez plus cliquer sur les liens ni les sélectionner avec la touche Tabulation.

Vous pouvez utiliser l'attribut inert pour obtenir le même comportement sur d'autres éléments.

Inerte signifie qu'un élément ne peut pas bouger. Par conséquent, lorsque vous marquez un élément comme 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 contenu dans cet élément <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 le piégeage du focus.

Meilleure accessibilité

Les consignes pour l'accessibilité du contenu Web exigent une gestion du focus et un ordre de focus pertinent et utilisable. Cela inclut 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é. Vous pouvez ainsi contrôler à la fois la visibilité et l'interactivité, et créer des modèles plus utilisables et accessibles.

Il existe deux principaux cas d'utilisation de l'application de inert à un élément pour améliorer l'accessibilité :

• Lorsqu'un élément fait partie de l'arborescence DOM, mais qu'il est hors écran ou masqué.
• Lorsqu'un élément fait partie de l'arborescence DOM, mais ne doit pas être interactif.

Éléments DOM hors écran ou masqués

Un problème d'accessibilité courant concerne les éléments tels qu'un panneau latéral, qui ajoutent des éléments au DOM qui ne sont pas toujours visibles par l'utilisateur. inert vous permet de vous assurer que même si les sous-éléments du panneau sont hors écran, un utilisateur du clavier ne peut pas interagir accidentellement avec eux.

Éléments DOM non interactifs

Un autre problème d'accessibilité courant se produit lorsqu'une conception d'UI est visible ou partiellement visible, mais clairement non interactive. Cela peut se produire lors du chargement de la page, lors de l'envoi d'un formulaire ou si une superposition de boîte de dialogue est ouverte, par exemple.

Pour offrir la meilleure expérience possible aux utilisateurs, indiquez l'état de l'UI et "enfermez" le focus sur la partie de la page qui est interactive.

Blocage de la concentration

Le piège de focus est un concept central pour une bonne accessibilité d'interface utilisateur. Vous devez vous assurer que le focus du lecteur d'écran est placé sur les éléments d'interface utilisateur interactifs et qu'il est informé lorsqu'un élément bloque l'interactivité. Cela permet également d'empêcher les lecteurs d'écran non autorisés d'accéder à l'arrière d'une superposition de page ou d'envoyer accidentellement un formulaire alors que le premier envoi est toujours en cours de traitement.

Avec inert, vous pouvez vous assurer que le seul contenu visible est accessible. Cela peut être utile pour :

• Éléments bloquants tels qu'une boîte de dialogue modale, un menu qui capture le focus ou une barre de navigation latérale.
• Carrousel avec des éléments inactifs
• Contenu du formulaire non applicable (par exemple, disparaître et désactiver les champs "Adresse de livraison" lorsque la case "Identique à l'adresse de facturation" a été cochée)
• Désactiver l'intégralité de l'UI lorsque l'état n'est pas cohérent.

Indiquer visuellement les éléments inert

Par défaut, aucune indication visuelle ne permet de savoir si un sous-arbre est inerte. Nous vous recommandons de marquer clairement les parties du DOM qui sont actives et celles qui sont inactives.

[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 se contentent d'utiliser des fenêtres particulièrement petites, peuvent ne pas voir la partie active d'une page et être frustrés si les sections inactives ne sont pas clairement inactives. 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 mise au point et de clic. Pour les technologies d'assistance, cela bloque également la navigation par tabulation et la visibilité. Le navigateur peut également ignorer la recherche de page et la sélection de texte dans l'élément.

La valeur par défaut de inert est false.