L'ordre de tabulation par défaut fourni par la position DOM des éléments HTML sémantiques est
pratique, mais il peut arriver que vous deviez
modifier l'ordre de tabulation. En mouvement
du code HTML est idéal, mais il n'est pas forcément réalisable. Dans ces cas, vous
Vous pouvez utiliser l'attribut HTML tabindex pour définir explicitement l'onglet d'un élément.
la position de votre annonce.
tabindex peut être appliqué à n'importe quel élément, bien qu'il ne soit pas nécessairement
utile sur chaque élément et accepte une plage de valeurs entières. Avec
tabindex, vous pouvez spécifier un ordre explicite pour les éléments de la page sélectionnables.
insérer un élément non sélectionnable dans l'ordre de tabulation, puis supprimer des éléments
dans l’ordre de tabulation. Exemple :
tabindex="0": insère un élément dans l'ordre de tabulation naturel. L'élément peut
sélectionnons en appuyant sur Tabulation. Vous pouvez aussi sélectionner l'élément en appelant la méthode
sa méthode focus().
tabindex="-1": supprime un élément de l'ordre de tabulation naturel, mais l'élément
peut toujours être sélectionné en appelant sa méthode focus().
tabindex="5": tout index de tabulation supérieur à 0 met cet élément au premier plan.
de l'ordre de tabulation naturel. Si plusieurs éléments ont un index de tabulation supérieur
à 0, l'ordre de tabulation commence à partir de la valeur la plus basse qui est supérieure à zéro
et progresse vers le haut.
Cela est particulièrement vrai pour les éléments qui ne sont pas des entrées, comme les en-têtes, les images ou les articles
titres. Lorsque cela est possible, il est préférable d'organiser le code source de sorte que la séquence DOM fournisse
un ordre de tabulation
logique. Si vous utilisez tabindex, limitez-la aux interactions personnalisées
commandes comme les boutons, les onglets,
les menus déroulants et les champs de texte ; c'est-à-dire les éléments que
l’utilisateur pourrait s’attendre
à fournir une entrée.
N'ajoutez tabindex qu'à un contenu interactif. Même si le contenu est important, comme une image clé, les utilisateurs de lecteurs d'écran peuvent le comprendre sans
en ajoutant un focus.
Gérer le curseur au niveau de la page
tabindex est parfois nécessaire pour une expérience utilisateur fluide. Par exemple,
si vous créez une page unique efficace avec différentes sections de contenu,
tout le contenu est
visible simultanément. Il peut s'agir de liens de navigation
modifier le contenu visible sans actualiser la page.
Dans ce cas, identifiez la zone de contenu sélectionnée et attribuez-lui une valeur tabindex de
-1 et appelez sa méthode focus. Cela garantit que le contenu n'apparaît pas
l'ordre de tabulation naturel. Cette technique, appelée gestion du ciblage, permet de conserver
Le contexte perçu de l'utilisateur est en phase avec le contenu visuel du site.
Gérer le focus dans les composants
Dans certains cas, vous devez également gérer le ciblage au niveau du groupe de contrôle, par exemple des composants personnalisés.
Par exemple, l'élément select peut recevoir le focus de base, mais une fois
utilisez les touches fléchées pour afficher d'autres options sélectionnables.
Si vous créez un élément select personnalisé, il est important de le reproduire
de sorte que les utilisateurs du clavier puissent toujours interagir avec votre commande.
Il peut être difficile de savoir quels comportements de clavier implémenter. La Création ARIA (Accessible Rich Internet Applications) Pratiques répertorie les types de composants et les types d'actions du clavier qu'ils prennent en charge.
Vous travaillez peut-être sur des éléments personnalisés, ressembler à un ensemble de cases d'option, mais avec votre approche unique de l'apparence et comportemental.
<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 la compatibilité du clavier dont il a besoin, consultez la Pratiques de création ARIA guide de démarrage. La section 2 contient une liste des modèles de conception, y compris tableau des caractéristiques pour la radio groupes, le composant existant qui correspond le mieux au nouvel élément.
L'un des comportements courants du clavier les flèches vers le haut/bas/gauche/droite sont prises en charge. Pour ajouter ce comportement au nouveau nous utilisons une technique appelée roving tabindex.
La rotation de la table d'onglets fonctionne en définissant tabindex sur -1 pour tous les enfants, à l'exception des
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 un écouteur d'événements de clavier pour déterminer la touche
les pressions de l'utilisateur ; Lorsque cela se produit, l'élément enfant sélectionné est défini
tabindex sur -1, définit l'élément tabindex de l'enfant à cibler sur 0 et appelle la méthode
de mise au point.
<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 (ou le premier, selon la direction dans laquelle il déplacement de la sélection), la sélection revient en arrière vers la première (ou la dernière) enfant.
Essayez l'exemple suivant. Inspectez l'élément dans la Les outils de développement pour observer le passage de l'index de tabulation d'une radio à l'autre.
Modales et pièges du clavier
Évitez de vous concentrer manuellement, car cela peut entraîner des situations compliquées. Par exemple, un widget de saisie semi-automatique qui tente de gérer le focus le comportement de l'onglet, mais il empêche l'utilisateur de le quitter tant qu'il n'est pas terminé. C'est ce qu'on appelle un piège du clavier, qui peut être très frustrant pour l'utilisateur.
La section 2.1.2 des WCAG stipule que le focus au clavier ne doit jamais être verrouillé ou bloquées au niveau d'un élément spécifique de la page. L'utilisateur doit pouvoir naviguer vers et depuis tous les éléments de la page en utilisant uniquement clavier.
Les modales font exception à cette règle. Toutefois, vous devez toujours éviter d'utiliser
tabindex lors de la création d'une modale. Avec inert, vous pouvez :
empêcher les utilisateurs d'interagir accidentellement avec un élément
piège clavier). Utilisez le <dialog>
, qui est inerte par défaut, pour créer une fenêtre modale pour les utilisateurs tout en bloquant
des clics et des onglets
en dehors de la fenêtre modale. Cela permet à l'utilisateur de se concentrer sur
sélection obligatoire.