Cibler

Les éléments interactifs, y compris les commandes de formulaire, les liens et les boutons, sont sélectionnable par défaut et avec touche de tabulation. Les éléments accessibles via la touche de tabulation font partie de l'ordre de navigation de sélection séquentielle du document. 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 de rendre les éléments inertes interactifs.

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

Ne modifiez pas l'ordre de tabulation réel et perçu à l'aide du code CSS et HTML. Comme le montrent les deux exemples suivants, les ordres de tabulation qui diffèrent de l'ordre attendu sur le plan visuel peuvent prêter à confusion et nuire à 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 (ordre) a été appliquée au sixième mot, "This", ce qui a entraîné un déplacement visuel. un seul mot. La séquence de tabulation est l'ordre du code, qui ne correspond plus à l'ordre visuel, ce qui crée une déconnexion pour les utilisateurs de claviers.

Rendre les é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. dans le processus. Les éléments sélectionnables peuvent également être sélectionnés à l'aide d'une souris ou d'un pointeur, grâce à autofocus ou par script, par exemple avec element.focus().

Attribut tabindex

L'attribut global tabindex, introduit dans attributes permet d'obtenir des éléments qui, sans cela, ne pourraient pas être sélectionnés. sélectionné, généralement avec la touche Tab, d'où son nom.

La valeur de l'attribut tabindex est un entier. Une valeur négative rend un élément sélectionnable, mais ne peut pas être sélectionné à l'aide de la touche de tabulation. A La valeur tabindex de 0 rend l'élément sélectionnable et accessible via la touche de tabulation, en ajoutant l'élément sur lequel il est appliqué à la séquence l'ordre de navigation du focus dans l'ordre du code source. Une valeur égale ou supérieure à 1 rend l'élément sélectionnable et accessible via la touche de tabulation. mais l'ajoute à une séquence de tabulation hiérarchisée et, comme nous l'avons vu ci-dessus, doit être évité.

Sur cette page, le bouton de partage <share-action> est un élément personnalisé. tabindex="0" ajoute l'élément qui n'est pas normalement sélectionnable dans 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 possède un 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 à l'aide de la touche de tabulation. L'élément est capable de recevoir par exemple via HTMLElement.focus(), mais il ne fait pas partie de l'ordre de navigation de sélection séquentielle. La convention pour les éléments sélectionnables sans la touche de tabulation consiste à utiliser tabindex="-1". Notez que Si vous ajoutez tabindex="-1" à un élément interactif, il ne sera plus possible de naviguer avec la touche de tabulation.

La méthode element.focus() peut être utilisée pour placer le curseur sur sélectionnables. Notez que les navigateurs font défiler les éléments sélectionnés pour les rendre visibles. C'est pourquoi vous devez éviter d'utiliser element.focus({preventScroll:true}), car se concentrer sur un élément non visible nuit à l'expérience utilisateur

Si vous souhaitez interroger le document pour identifier l'élément actif, utilisez la propriété Document.activeElement en lecture seule.

Les éléments dont l'attribut tabindex est supérieur ou égal à 1 sont inclus dans une séquence de tabulation distincte. Comme vous le remarquerez dans Codepen, La tabulation commence dans une séquence distincte, de la valeur la plus basse à la valeur la plus élevée, avant de passer en revue les étapes de la séquence régulière. (aucun tabindex défini, ou tabindex="0") dans l'ordre des sources:

tabindex avec une valeur positive place l'élément dans une séquence de focus prioritaire, ce qui peut entraîner un chaos dans l'ordre de sélection. Évitez de modifier l'ordre DOM avec tabindex. Non seulement la modification des commandes par tabulation peut créer un mauvais utilisateur expériences, ils sont difficiles à gérer et à entretenir pour les développeurs.

Attribut contenteditable

Nous avons abordé l'attribut contenteditable précédemment. Si vous définissez contenteditable="true" sur n'importe quel élément, vous pouvez le modifier, sélectionnable et une partie de l'ordre de tabulation. Le comportement du curseur est semblable à tabindex="0", mais pas le même. Nested Les éléments contenteditable peuvent être sélectionnés, mais pas accessibles via la touche de tabulation. Pour permettre la navigation sur un élément contenteditable imbriqué, ajoutez tabindex="0". ce qui l'ajoute à l'ordre de navigation du focus séquentiel.

Placer l'accent sur les éléments interactifs

Attribut autofocus

Alors que la valeur booléenne autofocus est un attribut global qui peut être défini sur n'importe quel élément, cela ne rend pas un élément inerte interactif. Lors du chargement de la page, le premier élément sélectionnable avec l'attribut autofocus défini est sélectionné tant que l'élément est affiché et qu'il n'est pas imbriqué dans une <dialog>.

Il peut être déroutant de se concentrer automatiquement sur le contenu. Si vous définissez autofocus sur une commande de formulaire, celle-ci jusqu'au chargement de la page. Il est possible que tous vos utilisateurs, y compris ceux qui utilisent des lecteurs d'écran et des fenêtres d'affichage de petite taille, "voir" les instructions relatives au formulaire, et peut-être même faire défiler l'écran au-delà du libellé normalement visible de la commande de formulaire. autofocus ne modifie pas l'ordre de navigation du document. Les éléments de la séquence qui précèdent sont simplement ignorés. C'est pourquoi nous vous déconseillons d'inclure l'attribut autofocus.

Exception à la règle "ne pas utiliser autofocus" recommande d'inclure l'attribut autofocus dans les éléments <dialog>. Lorsqu'une boîte de dialogue est ouverte, le navigateur sélectionne automatiquement le premier élément interactif sélectionnable dans <dialog>. ce qui signifie que autofocus pour un élément n'est pas nécessaire. Pour vous assurer qu'un élément interactif spécifique de la boîte de dialogue reçoit 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 l'élément <button> de fermeture garantit qu'il est sélectionné lorsque la boîte de dialogue est ouverte. En tant que premier élément dans la boîte de dialogue, il aurait été sélectionné dans tous les cas. Par défaut, lorsqu'une boîte de dialogue est ouverte, le premier élément sélectionnable dans la boîte de dialogue est sélectionnée, sauf si l'attribut autofocus est défini pour un autre élément de la boîte de dialogue.

Rendre les éléments interactifs inertes

Il existe également des attributs HTML qui peuvent supprimer les éléments interactifs de la séquence de tabulation. Inclusion d'un tabindex à exclure aux éléments sélectionnables, en ajoutant l'attribut disabled aux commandes de formulaire compatibles et en ajoutant l'attribut global inert à un conteneur rendent tous les éléments impossibles à utiliser avec la touche de tabulation. Ces trois attributs ne sont PAS interchangeables.

Valeur tabindex négative

Comme nous l'avons appris ci-dessus, un attribut tabindex avec une valeur négative rend un élément sélectionnable, mais pas accessible à l'aide de la touche de tabulation. Pendant l'ajout tabindex="0" à un élément sélectionnable par défaut, y compris des liens, des boutons, des commandes de formulaire et des éléments contenteditable n'est pas nécessaire. inclure un tabindex avec une valeur négative supprime les éléments normalement accessibles via la touche de tabulation de la sélection séquentiel ordre de navigation.

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

Désactivé

L'attribut booléen disable rend les commandes de formulaire activées à laquelle elle est appliquée et leurs descendants, le cas échéant, ne sont pas 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. Notez que disabled n'est pas un attribut global. Il s'applique aux éléments suivants : <button>, <input>, <optgroup>, <option>, <select>, <textarea>, les éléments personnalisés associés au formulaire et <fieldset>. Lorsqu'elles sont définies sur <optgroup> ou <fieldset>, toutes les commandes de formulaire enfants 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 :disabled. et :enabled. Les éléments désactivés avec la propriété Les attributs disabled sont généralement stylisés en gris clair dans la feuille de style du user-agent, même si un accent-color est définie.

Étant un attribut booléen, la présence de l'attribut désactive l'élément autrement activé. vous ne pouvez pas la définir sur false. Pour réactiver un élément désactivé, l'attribut doit être supprimé, généralement via 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'élément HTMLElement, mais tous les éléments compatibles de l'élément, comme HTMLSelectElement, HTMLTextareaElement possède la même propriété en lecture seule.

L'attribut disabled ne s'applique pas aux éléments inert qui sont normalement sélectionnables via tabindex ou contenteditable. Il ne s'applique pas non plus à l'élément <form> lui-même. Pour les désactiver, vous pouvez utiliser l'attribut global inert.

Attribut inert

Lorsque l'attribut booléen global inert est ajouté à un élément, celui-ci et tout le contenu imbriqué sont désactivés, et non plus cliquables ou accessibles via la touche de tabulation, et supprimés de l'arborescence d'accessibilité. Bien que inert puisse être appliqué à n'importe quel élément, il est généralement utilisée pour les sections de contenu, comme le contenu hors écran ou caché.

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

L'utilisation de inert sur du contenu visible sans styles indiquant l'inertie peut nuire à l'expérience utilisateur. En tant que contenu inerte n'est pas disponible pour les utilisateurs de lecteurs d'écran, cela peut être source de confusion lorsque les personnes voyantes voient le contenu à l'écran qui n'est pas disponible pour les outils d'accessibilité. Faire en sorte que l'inertie soit bien visible à l'aide de CSS

Assurez-vous que le curseur ne se déplace jamais vers un contenu non visible. Tout élément affiché en dehors de l'écran qui n'est pas automatiquement s'affichent lorsque l'élément sélectionné est sélectionné doivent devenir inertes. Si le contenu est masqué, mais s'affiche lorsqu'il est sélectionné. C'est le cas du lien permettant d'accéder au contenu sur cette page, il n'est pas nécessaire de le rendre inerte.

Testez vos connaissances

Testez vos connaissances

Testez vos connaissances sur la concentration.