Objet

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 accessibles au clavier font partie de l'ordre de navigation séquentiel du document. Les autres éléments sont inertes, ce qui signifie qu'ils ne sont pas interactifs. Avec les attributs HTML, il est possible de rendre des éléments interactifs inertes et des éléments inertes interactifs.

Par défaut, l'ordre du focus 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 du code HTML ou l'ordre de rendu visuel avec du code CSS peut nuire à l'expérience utilisateur.

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

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

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

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

Certaines fonctionnalités CSS, y compris flexbox, grid, positioning, transforms, et multi-column, peuvent modifier l'ordre visuel du contenu. Testez votre contenu en le parcourant avec un clavier : utilisez shift + tab pour revenir en arrière dans le contenu. Utilisez du code CSS pour indiquer quel élément est sélectionné. Ne réorganisez pas les éléments sélectionnables avec du code CSS.

Il est important de conserver un ordre de tabulation logique sur toutes les tailles de fenêtre d'affichage.

Rendre des éléments inertes interactifs

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

L'attribut tabindex

L'attribut global tabindex, introduit dans les attributs, permet aux éléments qui ne pourraient pas être sélectionnés de l'être, généralement avec 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 ajoutant l'élément sur lequel il est appliqué à l'ordre de navigation séquentiel dans l'ordre du code source. Une valeur de 1 ou plus rend l'élément sélectionnable et accessible au clavier, mais l'ajoute à une séquence de tabulation priorisée et doit être évitée.

Sur cette page, le bouton de partage, <share-action>, est un élément personnalisé. Le tabindex="0" ajoute cet élément à 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>

De plus, 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 être sélectionné, par exemple à l'aide de HTMLElement.focus(), mais il ne fait pas partie de l'ordre de navigation séquentiel. La convention pour les éléments sélectionnables non accessibles au clavier consiste à utiliser tabindex="-1". Si vous ajoutez tabindex="-1" à un élément interactif, il ne sera plus accessible au clavier.

La element.focus() méthode peut être utilisée pour définir la sélection sur des éléments sélectionnables. Les navigateurs font défiler les éléments sélectionnés dans la vue. Pour cette raison, évitez d'utiliser element.focus({preventScroll:true}), car la sélection d'un élément non visible nuit à l'expérience utilisateur.

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

Les éléments dont la valeur tabindex est égale à 1 ou plus sont inclus dans une séquence de tabulation distincte. Comme dans le Codepen suivant, la tabulation commence dans une séquence distincte, par ordre de valeur la plus basse à la plus élevée, avant de passer par ceux de la séquence normale (aucun tabindex défini ou tabindex="0") dans l'ordre source :

Un tabindex avec une valeur positive place l'élément dans une séquence de sélection priorisée, ce qui peut entraîner un ordre de sélection chaotique. Évitez de modifier l'ordre du DOM avec tabindex. Un ordre de tabulation modifié peut nuire à l'expérience utilisateur et est difficile à maintenir.

L'attribut contenteditable

L'attribut contenteditable a été abordé précédemment. Définir contenteditable="true" sur n'importe quel élément le rend modifiable, sélectionnable et fait partie de l'ordre de tabulation. Le comportement de sélection est semblable à celui de la définition de tabindex="0", mais pas identique. Les éléments contenteditable imbriqués sont sélectionnables, mais pas accessibles au clavier. Pour rendre un élément contenteditable imbriqué accessible au clavier, ajoutez tabindex="0", ce qui l'ajoute à l'ordre de navigation séquentiel.

Attribuer 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 autofocus attributs est sélectionné, à condition qu'il soit affiché et non imbriqué dans un <dialog>.

La sélection automatique du contenu peut être déroutante pour les utilisateurs. Lorsque vous définissez autofocus sur une commande de formulaire, celle-ci défile dans la vue lors du chargement de la page. Vos utilisateurs, y compris ceux qui utilisent un lecteur d'écran et ceux qui ont une petite fenêtre d'affichage, peuvent manquer les instructions du formulaire, voire le libellé de la commande de formulaire. De plus, l'attribut autofocus ne modifie pas l'ordre de navigation séquentiel 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, vous devez éviter d'utiliser l'attribut autofocus.

L'exception à la recommandation "n'utilisez pas autofocus" consiste à inclure l' autofocus attribut dans les <dialog> éléments. Lorsqu'une boîte de dialogue s'ouvre, le navigateur se concentre automatiquement sur le premier élément interactif sélectionnable dans le <dialog>, ce qui signifie qu'il n'est pas nécessaire d'ajouter autofocus à un élément. Si vous souhaitez vous assurer qu'un élément interactif spécifique de la boîte de dialogue est sélectionné 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 le <button> de fermeture lui permet d'être sélectionné lorsque la boîte de dialogue s'ouvre. En tant que premier élément de la boîte de dialogue, il aurait été sélectionné dans tous les cas. Par défaut, lorsqu'une boîte de dialogue s'ouvre, le premier élément sélectionnable de la boîte de dialogue est sélectionné, sauf si un autre élément de la boîte de dialogue est défini sur l'attribut autofocus.

Rendre des é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 dans les éléments sélectionnables, 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 accessibles au clavier. Ces trois attributs sont complètement distincts et 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 au clavier. Bien qu'il ne soit pas nécessaire d'ajouter tabindex="0" à un élément sélectionnable par défaut, y compris les liens, les boutons, les commandes de formulaire et les éléments qui sont contenteditable, l'inclusion d'un tabindex avec une valeur négative supprime les éléments normalement accessibles au clavier 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 commandes de formulaire sur lesquelles il est appliqué et leurs descendants, le cas échéant, non sélectionnables. Les commandes de formulaire désactivées ne peuvent pas être sélectionnées, ne reçoivent pas d'événements de clic et ne sont pas envoyées 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 à un formulaire et à <fieldset>. Lorsqu'il est défini sur <optgroup> ou <fieldset>, toutes les commandes de formulaire enfants sont désactivées, à l'exception du contenu du premier <legend> du <fieldset>.

Les mêmes éléments qui sont compatibles avec disabled peuvent également être ciblés avec les :disabled et :enabled pseudo-classes. 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 une accent-color est définie.

Étant donné qu'il s'agit d'un attribut booléen, la présence de l'attribut désactive l'élément 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 HTMLInputElement.disabled propriété 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, HTMLTextareaElement, possède la même propriété en lecture seule.

L'attribut disabled ne s'applique pas aux éléments normalement inert 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.

L'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 par 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 des sections de contenu, telles que du contenu hors écran ou masqué.

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

L'utilisation de inert sur du contenu visible sans styles indiquant l'inertie peut nuire à l'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 du code CSS.

Assurez-vous que la sélection ne passe jamais à du contenu non visible. Tout ce qui est rendu hors écran et qui n'apparaît pas automatiquement dans la vue lorsqu'il est sélectionné doit être rendu inerte. Si le contenu est masqué mais qu'il apparaît dans la vue lorsqu'il est sélectionné, comme un lien "Passer au contenu", il n'est pas nécessaire de le rendre inerte.

Vérifiez vos connaissances

Testez vos connaissances sur la sélection.