L'attribut inerte

Emma Twersky

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 provenant de technologies d'assistance.

"Inerte" est un comportement par défaut dans les éléments dialog, 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 ni utiliser la touche de tabulation pour accéder aux liens.

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

Inert signifie ne pas pouvoir se déplacer. Par conséquent, lorsque vous marquez un élément comme inerte, vous supprimez tout mouvement ou 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, Ainsi, tout le contenu de ce <div>, y compris le bouton et le libellé, ne peut pas être sélectionné ni être sélectionné.

L'attribut inert est particulièrement utile pour l'accessibilité, en particulier pour éviter de bloquer la sélection.

Meilleure accessibilité

Les Règles pour l'accessibilité des contenus Web exigent une gestion des priorités, ainsi qu'un ordre de ciblage judicieux 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 utilisables et accessibles.

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

• Lorsqu'un élément fait partie de l'arborescence DOM, mais qu'il est masqué ou hors écran.
• 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 des éléments tels qu'un tiroir, qui ajoutent au DOM des éléments 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 est lorsqu'une conception d'interface utilisateur 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 lorsque la superposition d'une boîte de dialogue est ouverte, par exemple.

Pour offrir la meilleure expérience utilisateur possible, indiquez l'état de l'UI et introduisez une "erreur" le focus sur la partie de la page qui est interactive.

Piège de concentration

Le piège de ciblage est un concept central d'une bonne accessibilité d'interface utilisateur. Vous devez vous assurer que le lecteur d'écran cible les éléments interactifs de l'interface utilisateur et savoir quand un élément bloque l'interactivité. Cela permet également d'éviter que des lecteurs d'écran non autorisés passent derrière une superposition de page ou n'envoient 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. Cette fonctionnalité est utile pour:

• Blocage d'éléments tels qu'une boîte de dialogue modale, un menu qui empêchait le focus de sélectionner un élément ou une barre de navigation latérale
• Carrousel avec des éléments inactifs.
• Contenu du formulaire non applicable (par exemple, la disparition et la désactivation des 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 montre qu'une sous-arborescence est inerte. Nous vous recommandons d'indiquer 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 à la fois. Par exemple, les utilisateurs de lecteurs d'écran, de petits appareils ou de loupes, ou même ceux qui n'utilisent que des fenêtres particulièrement petites, peuvent ne pas être en mesure de 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é.

Quels mouvements et interactions 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 la 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.