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.
Si un élément ne peut pas être sélectionné, de quoi est-il décrit ?
Qu'est-ce qui est vrai si l'élément comporte un attribut disabled
?