Par défaut, les éléments interactifs, y compris les commandes de formulaire, les liens et les boutons, sont sélectionnables et accessibles avec la touche de tabulation. Les éléments accessibles via la touche de tabulation 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 les éléments interactifs inertes et de les rendre 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. Des attributs HTML peuvent modifier cet ordre, et des propriétés CSS peuvent modifier l'ordre visuel du contenu. Modifier l'ordre de tabulation en HTML ou l'ordre d'affichage 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 commandes de tabulation différentes de l'ordre visuellement attendu sont déroutantes 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, 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.
En outre, la propriété CSS order a été appliquée au sixième mot, "This", qui a déplacé ce mot de manière visuelle. La séquence 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, qui sont 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 avec la souris ou le pointeur en définissant l'attribut autofocus, ou à l'aide d'un script, par exemple avec element.focus().
Attribut tabindex
L'attribut global tabindex, introduit dans attributes, permet aux éléments qui, autrement, ne pourraient pas être sélectionnés, d'être sélectionnés, généralement à l'aide de la touche de tabulation, d'où le nom.
La valeur de l'attribut tabindex correspond à un entier. Une valeur négative rend un élément sélectionnable, mais pas avec la touche de tabulation. Une 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é à l'ordre de navigation séquentielle dans l'ordre du code source. Une valeur supérieure ou égale à 1 rend l'élément sélectionnable et accessible via la touche de tabulation, mais l'ajoute à une séquence de tabulation prioritaire et, comme nous l'avons vu ci-dessus, doit être évitée.
Sur cette page, le bouton de partage <share-action> est un élément personnalisé. tabindex="0" ajoute cet é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>
Cette page comporte un autre élément personnalisé, à savoir 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 via la touche de tabulation. L'élément est capable de recevoir le focus, 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 et non tabables consiste à utiliser tabindex="-1". Notez que si vous ajoutez tabindex="-1" à un élément interactif, il ne sera plus accessible via la touche de tabulation.
La méthode element.focus() peut être utilisée pour cibler des éléments sélectionnables. Notez que les navigateurs font défiler les éléments sélectionnés pour les afficher. Par conséquent, évitez d'utiliser element.focus({preventScroll:true}), car vous 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'tabindex est supérieur ou égal à 1 sont inclus dans une séquence de tabulation distincte. Comme vous le remarquerez dans Codepen, la touche de tabulation commence dans une séquence distincte, de la valeur la plus basse à la valeur la plus élevée, avant de passer en revue celles de la séquence standard (pas d'ensemble de tabindex, ni de tabindex="0") dans l'ordre source:
tabindex avec une valeur positive place l'élément dans une séquence de ciblage prioritaire, ce qui peut entraîner un chaos dans l'ordre de sélection.
Évitez de modifier l'ordre du DOM avec tabindex. Les commandes de tabulation modifiées peuvent créer de mauvaises expériences utilisateur, mais elles sont également difficiles à gérer et à entretenir pour les développeurs.
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 du paramètre tabindex="0", mais il est différent. Les éléments contenteditable imbriqués sont sélectionnables, mais pas accessibles via la touche de tabulation. Pour rendre un élément contenteditable imbriqué accessible via la touche tablable, ajoutez tabindex="0", qui l'ajoutera à l'ordre de navigation séquentielle.
Mettre l'accent sur les éléments interactifs
Attribut autofocus
Bien que la valeur booléenne autofocus soit un attribut global pouvant être défini sur n'importe quel élément, elle 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 qu'il est affiché et qu'il n'est pas imbriqué dans un élément <dialog>.
Le fait de placer automatiquement l'accent sur le contenu peut prêter à confusion. Si vous définissez autofocus sur une commande de formulaire, celle-ci défile jusqu'au chargement de la page. Tous vos utilisateurs, y compris les utilisateurs de lecteurs d'écran et ceux disposant de fenêtres d'affichage de petite taille, peuvent ne pas "voir" les instructions du formulaire, voire faire défiler la page au-delà du libellé habituellement visible de la commande de formulaire. L'attribut autofocus ne modifie pas l'ordre de navigation séquentielle du document. Les éléments de la séquence précédant l'élément sélectionné automatiquement sont simplement ignorés. Il est donc déconseillé d'inclure l'attribut autofocus.
L'inclusion de l'attribut autofocus dans les éléments <dialog> constitue une exception à la recommandation "Ne pas utiliser de autofocus".
Lorsqu'une boîte de dialogue est ouverte, le navigateur se concentre automatiquement sur le premier élément interactif sélectionnable dans <dialog>. Il n'est donc pas nécessaire d'utiliser autofocus pour 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 celle-ci 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 lors de la fermeture de l'<button> garantit qu'il est sélectionné lorsque la boîte de dialogue est ouverte. 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 est ouverte, le premier élément sélectionnable dans la boîte de dialogue est sélectionné, 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 permettant de supprimer les éléments interactifs de la séquence de tabulation. L'ajout d'un tabindex négatif aux éléments sélectionnables, de l'ajout de l'attribut disabled aux commandes de formulaire compatibles et de l'ajout de l'attribut global inert à un conteneur rend les éléments impossibles à onglets. Ces trois attributs ne sont PAS interchangeables.
Valeur tabindex négative
Comme nous l'avons vu ci-dessus, un attribut tabindex avec une valeur négative rend un élément sélectionnable, mais pas tabable. 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'ajout d'un tabindex avec une valeur négative supprime les éléments normalement tabables de l'ordre de navigation du focus séquentiel.
Une valeur tabindex négative empêche les utilisateurs du clavier de se concentrer sur les éléments interactifs, mais ne désactive pas l'élément. Les utilisateurs du pointeur peuvent toujours se concentrer sur l'élément. Pour désactiver un élément, utilisez l'attribut disabled.
Désactivé
L'attribut booléen désactivé rend les commandes de formulaire auxquelles 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 génèrent 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. Elle s'applique à <button>, <input>, <optgroup>, <option>, <select>, <textarea>, aux éléments personnalisés associés à un formulaire et à <fieldset>.
Lorsque ce paramètre est défini sur <optgroup> ou <fieldset>, toutes les commandes du formulaire enfant sont désactivées, à l'exception du contenu du premier <legend> de <fieldset>.
Les éléments compatibles avec 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 via la feuille de style du user-agent, même si un accent-color est défini.
En tant qu'attribut booléen, sa présence 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 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 toutes les interfaces d'éléments compatibles, telles que HTMLSelectElement et HTMLTextareaElement, ont la même propriété en lecture seule.
L'attribut disabled ne s'applique pas aux éléments inert normalement qui sont 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 inert global.
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 (ni cliquables, ni tabulaires) 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é pour des sections de contenu, comme le 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 pseudo-classe :disabled. L'attribut inert ne fournit aucun indicateur visuel et n'a pas de pseudo-classe correspondante (bien que le sélecteur d'attributs [inert] 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 prêter à confusion lorsque les utilisateurs voyants voient à l'écran du contenu qui n'est pas accessible aux outils d'accessibilité. Rendez l'inertie très apparente via CSS.
Assurez-vous que le curseur ne se déplace jamais sur un contenu non visible. Tout élément affiché en dehors de l'écran qui n'apparaît pas automatiquement au moment de la sélection doit être rendu inerte. Si le contenu est masqué, mais s'affiche lorsqu'il est sélectionné, comme le lien Passer 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é, qu'est-ce qu'il décrit ?
Que se passe-t-il si l'élément possède un attribut disabled ?