Cibler

Les éléments interactifs, y compris les commandes de formulaire, les liens et les boutons, sont sélectionnables et accessibles au clavier par défaut. Les éléments pouvant être sélectionnés au clavier font partie de l'ordre de navigation séquentiel du document. Les autres éléments sont inertes, c'est-à-dire qu'ils ne sont pas interactifs. Les attributs HTML permettent de rendre des éléments interactifs inertes et des éléments inertes interactifs.

Par défaut, l'ordre de navigation est le même que l'ordre visuel, qui correspond à l'ordre du code source. Il existe des attributs HTML qui peuvent modifier cet ordre et des propriétés CSS qui peuvent modifier l'ordre visuel du contenu. Modifier l'ordre de tabulation avec HTML ou l'ordre de rendu visuel avec CSS peut nuire à l'expérience utilisateur.

Ne modifiez pas l'ordre de tabulation perçu et réel avec CSS et HTML. Comme le montrent les deux exemples suivants, les ordres de tabulation qui diffèrent de l'ordre visuel attendu sont déroutants pour les utilisateurs et nuisent à l'expérience utilisateur.

Dans cet exemple, la valeur de l'attribut tabindex a rendu l'ordre de tabulation chaotique :

Dans cet exemple, le CSS a créé une divergence entre l'ordre de tabulation et l'ordre visuel du contenu :

La déclaration flex-flow: row-reverse; a inversé l'ordre visuel. De plus, la propriété CSS order a été appliquée au sixième mot, "This", ce qui a déplacé visuellement ce mot. L'ordre de tabulation correspond à l'ordre du code, qui ne correspond plus à l'ordre visuel, ce qui crée une déconnexion pour les utilisateurs de clavier.

Rendre les éléments inertes interactifs

Les attributs contenteditable et tabindex étant des attributs globaux, ils peuvent être ajoutés à n'importe quel élément, ce qui les rend focusables. Les éléments sélectionnables peuvent également être sélectionnés à l'aide d'une souris ou d'un pointeur, en définissant l'attribut autofocus ou à l'aide d'un script, comme avec element.focus().

Attribut tabindex

L'attribut global tabindex, introduit dans attributes, permet aux éléments qui ne pourraient pas recevoir le focus de l'obtenir, généralement avec la touche Tab, d'où son nom.

L'attribut tabindex prend un entier comme valeur. Une valeur négative rend un élément sélectionnable, mais pas accessible au clavier. Une valeur tabindex de 0 rend l'élément sélectionnable et accessible au clavier, en l'ajoutant à l'ordre de navigation séquentielle au clavier dans l'ordre du code source. Une valeur égale ou supérieure à 1 rend l'élément sélectionnable et accessible au clavier, mais l'ajoute à une séquence de tabulation prioritaire. Il est donc préférable de l'éviter.

Sur cette page, le bouton de partage <share-action> est un élément personnalisé. tabindex="0" ajoute cet élément normalement non sélectionnable à l'ordre de tabulation par défaut du clavier :

<share-action authors="@front-end.social/@estellevw" data-action="click" data-category="web.dev" data-icon="share" data-label="share, mastodon" role="button" tabindex="0">
  <svg aria-label="share" role="img" xmlns="http://www.w3.org/2000/svg">
    <use href="#shareIcon" />
  </svg>
  <span>Share</span>
</share-action>

Il existe un autre élément personnalisé sur cette page : la navigation locale comporte un élément personnalisé avec une valeur tabindex négative :

<web-navigation-drawer type="standard" tabindex="-1">

Un attribut tabindex avec une valeur négative rend l'élément sélectionnable, mais pas accessible au clavier. L'élément peut recevoir le focus, par exemple à l'aide de HTMLElement.focus(), mais il ne fait pas partie de l'ordre de navigation séquentiel au clavier. La convention pour les éléments non sélectionnables et pouvant être sélectionnés est d'utiliser tabindex="-1". Si vous ajoutez tabindex="-1" à un élément interactif, il ne sera plus accessible au clavier.

La méthode element.focus() permet de définir le focus sur les éléments pouvant être sélectionnés. Les navigateurs font défiler les éléments sélectionnés pour les afficher. Pour cette raison, évitez d'utiliser element.focus({preventScroll:true}), car se concentrer sur un élément non visible est une mauvaise expérience utilisateur.

Si vous souhaitez interroger le document pour savoir quel élément est sélectionné, utilisez la propriété en lecture seule Document.activeElement.

Les éléments dont la valeur tabindex est supérieure ou égale à 1 sont inclus dans une séquence de tabulation distincte. Comme vous le remarquerez dans Codepen, la navigation au clavier commence dans une séquence distincte, par ordre croissant, avant de passer à ceux de la séquence régulière (sans tabindex défini, ou tabindex="0") dans l'ordre source :

tabindex avec une valeur positive place l'élément dans une séquence de mise au point prioritaire, ce qui peut entraîner un ordre de mise au point chaotique. Évitez de modifier l'ordre du DOM avec tabindex. Non seulement les ordres de tabulation modifiés peuvent créer de mauvaises expériences utilisateur, mais ils sont également difficiles à gérer et à maintenir pour les développeurs.

Attribut contenteditable

Nous avons déjà abordé l'attribut contenteditable. Définir contenteditable="true" sur un élément le rend modifiable, sélectionnable et fait partie de l'ordre de tabulation. Le comportement de mise au point est semblable à la définition de tabindex="0", mais pas identique. Les éléments contenteditable imbriqués sont sélectionnables, mais pas accessibles par tabulation. Pour rendre un élément contenteditable imbriqué accessible au clavier, ajoutez tabindex="0", ce qui l'ajoute à l'ordre de navigation séquentiel au clavier.

Ajouter autofocus aux éléments interactifs

Bien que le booléen autofocus soit un attribut global qui peut être défini sur n'importe quel élément, il ne rend pas un élément inerte interactif. Lorsque la page se charge, le premier élément sélectionnable avec les attributs autofocus est sélectionné, à condition que cet élément soit affiché et ne soit pas imbriqué dans un <dialog>.

Il peut être déroutant de définir automatiquement le focus sur le contenu. Si le paramètre autofocus est défini sur un élément de contrôle de formulaire, cela signifie que l'élément de contrôle de formulaire défile pour s'afficher au chargement de la page. Il est possible que tous vos utilisateurs, y compris ceux qui utilisent un lecteur d'écran et ceux qui ont de petits points de vue, ne "voient" pas les instructions du formulaire, et qu'ils fassent même défiler le libellé normalement visible du contrôle du formulaire. L'attribut autofocus ne modifie pas l'ordre de navigation séquentielle au clavier du document. Les éléments de la séquence qui précèdent l'élément sélectionné automatiquement sont ignorés. Pour ces raisons, il n'est pas conseillé d'inclure l'attribut autofocus.

L'exception à la recommandation "ne pas utiliser autofocus" consiste à inclure l'attribut autofocus dans les éléments <dialog>. Lorsqu'une boîte de dialogue est ouverte, le navigateur se concentre automatiquement sur le premier élément interactif pouvant être sélectionné dans <dialog>. Il n'est donc pas nécessaire d'ajouter autofocus à un élément. Si vous voulez vous assurer qu'un élément interactif spécifique de la boîte de dialogue reçoit le focus lorsque la boîte de dialogue s'ouvre, ajoutez l'attribut autofocus à cet élément.

<dialog open>
  <form method="dialog">
    <button type="submit" autofocus>close</button>
  </form>
</dialog>

L'attribut autofocus défini sur la balise de fermeture <button> lui permet de recevoir le focus lorsque la boîte de dialogue est ouverte. En tant que premier élément de la boîte de dialogue, il aurait reçu le focus dans tous les cas. Par défaut, lorsqu'une boîte de dialogue est ouverte, le premier élément pouvant être sélectionné dans la boîte de dialogue est sélectionné, sauf si un autre élément de la boîte de dialogue a l'attribut autofocus défini.

Rendre les éléments interactifs inertes

Il existe également des attributs HTML qui peuvent supprimer des éléments interactifs de la séquence de tabulation. L'inclusion d'un tabindex négatif aux éléments pouvant être sélectionnés au clavier, l'ajout de l'attribut disabled aux commandes de formulaire compatibles et l'ajout de l'attribut global inert à un conteneur rendent tous les éléments non sélectionnables au clavier. Ces trois attributs ne sont PAS interchangeables.

Valeur tabindex négative

Un attribut tabindex avec une valeur négative rend un élément sélectionnable, mais pas accessible par tabulation. Il n'est pas nécessaire d'ajouter tabindex="0" à un élément pouvant être sélectionné par défaut, y compris les liens, les boutons, les commandes de formulaire et les éléments contenteditable. L'inclusion d'un tabindex avec une valeur négative supprime les éléments normalement sélectionnables par tabulation de l'ordre de navigation séquentiel.

Une valeur tabindex négative empêche les utilisateurs de clavier de se concentrer sur les éléments interactifs, mais ne désactive pas l'élément. Les utilisateurs de pointeurs peuvent toujours se concentrer sur l'élément. Pour désactiver un élément, utilisez l'attribut disabled.

Désactivé

L'attribut booléen disabled rend les éléments de contrôle de formulaire sur lesquels il est appliqué et leurs descendants, le cas échéant, non sélectionnables. Les éléments de contrôle de formulaire désactivés ne peuvent pas être sélectionnés, ne reçoivent pas d'événements de clic et ne sont pas envoyés lors de l'envoi du formulaire.

disabled n'est pas un attribut global. Il s'applique à <button>, <input>, <optgroup>, <option>, <select>, <textarea>, aux éléments personnalisés associés au formulaire et à <fieldset>. Lorsqu'il est défini sur <optgroup> ou <fieldset>, toutes les commandes de formulaire enfant sont désactivées, à l'exception du contenu du premier <legend> de <fieldset>.

Les mêmes éléments qui acceptent disabled peuvent également être ciblés avec les pseudo-classes :disabled et :enabled. Les éléments désactivés avec l'attribut disabled sont généralement stylisés en gris clair avec la feuille de style de l'agent utilisateur, même si un accent-color est défini.

Comme il s'agit d'un attribut booléen, la présence de l'attribut désactive l'élément qui serait autrement activé. Vous ne pouvez pas le définir sur false. Pour réactiver un élément désactivé, l'attribut doit être supprimé, généralement avec Element.removeAttribute('disabled').

La propriété HTMLInputElement.disabled vous permet de vérifier si une entrée est désactivée. Comme disabled n'est pas un attribut global, il n'est pas hérité de l'HTMLElement, mais chaque interface d'élément compatible, comme HTMLSelectElement et HTMLTextareaElement, possède la même propriété en lecture seule.

L'attribut disabled ne s'applique pas aux éléments inert normalement qui sont rendus sélectionnables avec tabindex ou contenteditable, ni à l'élément <form>. Pour désactiver ces éléments, vous pouvez utiliser l'attribut global inert.

Attribut inert

Lorsque l'attribut booléen global inert est ajouté à un élément, cet élément et tout le contenu imbriqué sont désactivés, ce qui signifie qu'il est impossible de cliquer dessus ou d'y accéder à l'aide de la touche de tabulation. Ils sont également supprimés de l'arborescence d'accessibilité. Bien que inert puisse être appliqué à n'importe quel élément, il est généralement utilisé pour les sections de contenu, telles que le contenu hors écran ou masqué.

Lorsque vous appliquez disabled aux contrôles de formulaire, le navigateur fournit un style par défaut qui peut être modifié à l'aide de la pseudo-classe :disabled. L'attribut inert ne fournit aucun indicateur visuel et n'a pas de pseudoclasse correspondante (bien que le sélecteur d'attributs [inert] corresponde).

L'utilisation de inert sur du contenu visible sans styles indiquant l'inertie peut entraîner une mauvaise expérience utilisateur. Comme le contenu inerte n'est pas disponible pour les utilisateurs de lecteurs d'écran, cela peut entraîner une confusion lorsque les utilisateurs de lecteurs d'écran voyants voient du contenu à l'écran qui n'est pas disponible pour les outils d'accessibilité. Rendez l'inertie très apparente avec CSS.

Assurez-vous que la sélection ne se déplace jamais vers du contenu non visible. Tout élément rendu hors écran qui n'apparaît pas automatiquement à la mise au point doit être rendu inerte. Si le contenu est masqué, mais devient visible lorsqu'il est sélectionné (comme un lien "Passer au contenu"), il n'est pas nécessaire de le rendre inerte.

Vérifier que vous avez bien compris

Testez vos connaissances sur la mise au point.