Utilisation de l'index de tabulation

Modifier l'ordre DOM avec tabindex

Dave Gash

Meggin Kearney

Rob Dodson

L'ordre de tabulation par défaut fourni par la position DOM des éléments natifs est pratique, mais vous aurez parfois besoin de modifier l'ordre de tabulation. Déplacer physiquement des éléments dans le code HTML n'est pas toujours une solution optimale, voire réalisable. Dans ce cas, vous pouvez utiliser l'attribut HTML tabindex pour définir explicitement la position de tabulation d'un élément.

tabindex peut être appliqué à n'importe quel élément, bien qu'il ne soit pas nécessairement utile pour tous les éléments, et accepte une plage de valeurs entières. tabindex vous permet de spécifier un ordre explicite pour les éléments de page sélectionnables, d'insérer un élément qui ne peut pas être sélectionné dans l'ordre de tabulation et de supprimer des éléments de l'ordre de tabulation. Exemple :

tabindex="0": insère un élément dans l'ordre de tabulation naturel. Vous pouvez sélectionner l'élément en appuyant sur la touche Tab, et l'élément en appelant sa méthode focus()

<custom-button tabindex="0">Press Tab to Focus Me!</custom-button>

Appuyez sur Tabulation pour me concentrer !

tabindex="-1": supprime un élément de l'ordre de tabulation naturel, mais il peut toujours être sélectionné en appelant sa méthode focus().

// TODO: DevSite - Code sample removed as it used inline event handlers

// À FAIRE: DevSite – Exemple de code supprimé, car il utilisait des gestionnaires d'événements intégrés

tabindex="5": tout tabindex supérieur à 0 fait passer l'élément au début de l'ordre de tabulation naturel. Si plusieurs éléments ont un tabindex supérieur à 0, l'ordre de tabulation commence à partir de la valeur la plus basse supérieure à zéro et remonte. L'utilisation d'un index de onglets supérieur à 0 est considérée comme un anti-modèle.

<button>I should be first</button>
<button>And I should be second</button>
<button tabindex="5">But I jumped to the front!</button>

Je devrais être la première Et je devrais être deuxième Mais je suis passée au début !

Cela est particulièrement vrai pour les éléments qui ne sont pas des éléments d'entrée, tels que les en-têtes, les images ou les titres d'articles. Ajouter tabindex à ces types d'éléments est contre-productif. Si possible, il est préférable d'organiser votre code source de sorte que la séquence DOM fournisse un ordre de tabulation logique. Si vous utilisez tabindex, limitez-le aux commandes interactives personnalisées telles que les boutons, les onglets, les menus déroulants et les champs de texte, c'est-à-dire aux éléments auxquels l'utilisateur peut s'attendre à fournir une entrée.

Ne craignez pas que les utilisateurs de lecteurs d'écran passent à côté de contenu important, car ils ne sont associés à aucun tabindex. Même si le contenu est très important, comme une image, s'il ne s'agit pas d'un élément avec lequel l'utilisateur peut interagir, il n'y a aucune raison de le rendre sélectionnable. Les utilisateurs de lecteurs d'écran peuvent toujours comprendre le contenu de l'image, à condition de prendre en charge correctement l'attribut alt, que nous aborderons bientôt.

Gérer le ciblage au niveau de la page

Voici un scénario dans lequel tabindex est non seulement utile, mais nécessaire. Vous créez peut-être une seule page robuste avec différentes sections de contenu, qui ne sont pas toutes visibles en même temps. Dans ce type de page, cliquer sur un lien de navigation peut modifier le contenu visible sans actualiser la page.

Dans ce cas, vous identifierez probablement la zone de contenu sélectionnée, lui attribuerez une valeur tabindex de -1 pour qu'elle n'apparaisse pas dans l'ordre de tabulation naturel, puis appelez sa méthode focus. Cette technique, appelée gérer le ciblage, permet de synchroniser le contexte perçu par l'utilisateur avec le contenu visuel du site.

Gérer le ciblage dans les composants

Il est important de gérer le ciblage lorsque vous modifiez un élément sur la page, mais vous devez parfois le gérer au niveau du contrôle, par exemple si vous créez un composant personnalisé.

Prenons l'exemple de l'élément select natif. Elle peut être ciblée de base, mais vous pouvez ensuite utiliser les touches fléchées pour afficher des fonctionnalités supplémentaires (les options sélectionnables). Si vous compiliez un élément select personnalisé, il serait judicieux d'exposer ces mêmes types de comportements afin que les utilisateurs qui s'appuient principalement sur le clavier puissent toujours interagir avec votre commande.

<!-- Focus the element using Tab and use the up/down arrow keys to navigate -->
<select>
    <option>Aisle seat</option>
    <option>Window seat</option>
    <option>No preference</option>
</select>

Siège du couloir Siège fenêtre Aucune préférence

Il peut être difficile de savoir quels comportements de clavier implémenter. Toutefois, il existe un document utile auquel vous pouvez vous référer. Le guide ARIA (Accessible Rich Internet Applications) - Pratiques de création répertorie les types de composants et les types d'actions de clavier compatibles. Nous couvrirons ARIA plus en détail ultérieurement, mais pour l'instant, utilisons le guide pour nous aider à ajouter la prise en charge du clavier à un nouveau composant.

Peut-être travaillez-vous sur de nouveaux éléments personnalisés qui ressemblent à un ensemble de cases d'option, mais présentent votre approche unique en termes d'apparence et de comportement.

<radio-group>
    <radio-button>Water</radio-button>
    <radio-button>Coffee</radio-button>
    <radio-button>Tea</radio-button>
    <radio-button>Cola</radio-button>
    <radio-button>Ginger Ale</radio-button>
</radio-group>

Pour déterminer le type de compatibilité du clavier dont ils ont besoin, consultez le guide des pratiques de création ARIA. La section 2 contient une liste de modèles de conception comprenant un tableau des caractéristiques des groupes d'options, le composant existant qui correspond le mieux à votre nouvel élément.

Comme vous pouvez le voir dans le tableau, l'un des comportements de clavier courants qui doivent être acceptés est la flèche vers le haut, le bas, la gauche et la droite. Pour ajouter ce comportement au nouveau composant, nous allons utiliser une technique appelée approbation de tabindex.

Le paramètre "tabindex" itinérant permet de définir tabindex sur -1 pour tous les enfants, à l'exception de celui actuellement actif.

<radio-group>
    <radio-button tabindex="0">Water</radio-button>
    <radio-button tabindex="-1">Coffee</radio-button>
    <radio-button tabindex="-1">Tea</radio-button>
    <radio-button tabindex="-1">Cola</radio-button>
    <radio-button tabindex="-1">Ginger Ale</radio-button>
</radio-group>

Le composant utilise ensuite un écouteur d'événements du clavier pour déterminer la touche sur laquelle l'utilisateur appuie. Lorsque cela se produit, il définit le tabindex de l'enfant précédemment sélectionné sur -1, définit le tabindex de l'enfant à sélectionner sur 0 et appelle la méthode de sélection sur cet élément.

<radio-group>
    // Assuming the user pressed the down arrow, we'll focus the next available child
    <radio-button tabindex="-1">Water</radio-button>
    <radio-button tabindex="0">Coffee</radio-button> // call .focus() on this element
    <radio-button tabindex="-1">Tea</radio-button>
    <radio-button tabindex="-1">Cola</radio-button>
    <radio-button tabindex="-1">Ginger Ale</radio-button>
</radio-group>

Lorsque l'utilisateur atteint le dernier enfant (ou le premier, selon la direction dans laquelle il déplace le curseur), vous effectuez une boucle autour du premier (ou du dernier) enfant et le sélectionnez à nouveau.

Vous pouvez essayer l'exemple terminé ci-dessous. Inspectez l'élément dans les outils de développement pour observer le tabindex passer d'une case d'option à l'autre.

// À FAIRE: DevSite – Exemple de code supprimé, car il utilisait des gestionnaires d'événements intégrés

Vous pouvez consulter la source complète de cet élément sur GitHub.

Modales et rayures à clavier

Parfois, lorsque vous gérez votre concentration, vous pouvez vous retrouver dans une situation dont vous ne pouvez pas vous sortir. Prenons l'exemple d'un widget de saisie semi-automatique qui tente de gérer le focus et capture le comportement des onglets, mais empêche l'utilisateur de le quitter tant qu'il n'est pas terminé. C'est ce qu'on appelle un piège au clavier et cela peut être très frustrant pour l'utilisateur. La section 2.1.2 de la checklist Web AIM résout ce problème, indiquant que le curseur du clavier ne doit jamais être verrouillé ni piégé dans un élément de page particulier. L'utilisateur doit pouvoir naviguer vers et depuis tous les éléments de la page uniquement à l'aide du clavier.

Étrangement, ce comportement peut parfois être souhaitable, par exemple dans une fenêtre modale. Normalement, lorsque la fenêtre modale est affichée, vous ne voulez pas que l'utilisateur accède au contenu qui se trouve derrière. Vous pouvez ajouter une superposition pour couvrir visuellement la page, mais cela n'empêche pas le focus du clavier de sortir accidentellement en dehors du modal.

Dans ce genre de situation, vous pouvez implémenter un problème de raccourci clavier temporaire pour vous assurer que le curseur ne s'affiche que lorsque le modal est affiché, puis restaurer l'élément précédemment sélectionné lorsque le modal est fermé.

Il existe des propositions sur la façon de faciliter cette tâche pour les développeurs, y compris l'élément <dialog>, mais la compatibilité avec les navigateurs n'est pas encore étendue.

Consultez cet article sur le MN pour en savoir plus sur <dialog> et cet exemple modal pour en savoir plus sur les fenêtres modales.

Prenons l'exemple d'une boîte de dialogue modale représentée par une div contenant quelques éléments, et une autre div représentant une superposition d'arrière-plan. Examinons les étapes de base nécessaires pour implémenter un blocage temporaire au clavier dans cette situation.

1. À l'aide de document.querySelector, sélectionnez les tags div modal et en superposition, puis stockez leurs références.
2. À l'ouverture de la fenêtre modale, stockez une référence à l'élément sélectionné lors de l'ouverture du modal afin de pouvoir le recentrer.
3. Utilisez un écouteur keydown pour récupérer les touches lorsque l'utilisateur appuie dessus lorsque la fenêtre modale est ouverte. Vous pouvez également écouter un clic sur la superposition d'arrière-plan et fermer la fenêtre modale si l'utilisateur clique dessus.
4. Ensuite, récupérez la collection des éléments sélectionnables dans le modal. Le premier et le dernier éléments sélectionnables agiront comme des "sentinelles" pour vous indiquer quand effectuer la mise au point en boucle vers l'avant ou vers l'arrière pour rester dans la fenêtre modale.
5. Affichez la fenêtre modale et sélectionnez le premier élément sélectionnable.
6. Lorsque l'utilisateur appuie sur Tab ou Shift+Tab, déplacez le curseur vers l'avant ou vers l'arrière, en passant en boucle le dernier ou les premiers éléments selon le cas.
7. Si l'utilisateur appuie sur Esc, fermez la fenêtre modale. Cette fonctionnalité est très utile, car elle permet à l'utilisateur de fermer la fenêtre modale sans rechercher un bouton de fermeture spécifique, et elle profite même aux utilisateurs de souris.
8. Lorsque la fenêtre modale est fermée, masquez-la ainsi que la superposition d'arrière-plan, puis rétablissez le focus sur l'élément précédemment sélectionné.

Cette procédure vous offre une fenêtre modale utilisable et non frustrante que tout le monde peut utiliser efficacement.

Pour en savoir plus, vous pouvez examiner cet exemple de code et afficher un exemple en direct à partir d'une page terminée.