À partir de Chrome 130, les curseurs sont sélectionnables par défaut au clavier s'ils n'ont pas enfants sélectionnables au clavier.
Contexte
Les sélecteurs sont partout. Vous en trouverez peut-être une dans la rubrique "Conditions d'utilisation" boîte, où vous devez faire défiler jusqu'en bas pour cliquer sur le bouton d'envoi. Ou vous : pourrait rencontrer une barre de menu verticale pleine d’icônes parmi lesquelles choisir.
Dans de tels cas, de nombreux internautes utilisent les mouvements de haut en bas de leur souris ou le pavé tactile pour faire défiler l'élément. Cependant, un dispositif de pointage, un pavé tactile ou l’écran tactile n’est pas le moyen optimal pour tous les utilisateurs de naviguer sur une page. Certaines personnes préférez naviguer sur une page HTML en accédant à tous les éléments sélectionnables en utilisant uniquement leur clavier. Il y a plusieurs raisons à cela. De personnes qui ont des tremblements ou d'autres problèmes rendant l'utilisation d'une souris difficile, les personnes qui ont des difficultés à localiser visuellement le curseur de la souris et d’autres personnes qui utilisent un seul un contacteur ou une commande vocale.
Selon les bonnes pratiques d'accessibilité, toutes les fonctionnalités doivent être disponibles via un clavier. De cette façon, tout le monde peut utiliser le Web de la manière qui lui convient le mieux pour eux.
2.1.1 Clavier: Tous fonctionnalité du contenu est exploitable interface du clavier sans avoir besoin de codes temporels spécifiques pour chaque frappe, sauf lorsque la propriété sous-jacente nécessite une entrée qui dépend du chemin d'accès le mouvement et pas seulement les extrémités. (niveau A)
Avant ce changement pour sélectionner les éléments de défilement
Avant cette modification, un élément de défilement ne peut être sélectionné que par la touche de tabulation si l'index de tabulation est explicitement défini sur 0 ou plus. Par exemple, utilisez les codes CSS et HTML suivants. Essayez ensuite de passer du premier bouton à l'élément de défilement.
div.scroll, button {
border: 1px solid lightgray;
margin-top: 1em;
border-radius: 0.5em;
}
div.scroll {
overflow: auto;
width: 20em;
height: 5em;
display: block;
}
div.long {
width: 10em;
height: 10em;
}
<button>Start</button>
<div class="scroll" tabindex="0">
<p>This is a tab focusable scroller...</p>
<div class="long"></div>
<p>You need to scroll down to see this line.</p>
</div>
<button>End</button>
Si vous utilisez un index de tabulation négatif, comme dans le code HTML suivant, la barre de défilement sera ignorée.
<button>Start</button>
<div class="scroll" tabindex="-1">
<p>This is not a tab focusable scroller...</p>
<div class="long"></div>
<p>You cannot see this line using the keyboard.</p>
</div>
<button>End</button>
Si vous ne définissez pas de valeur d'index de tabulation, l'utilisateur peut avoir des difficultés à utiliser navigation au focus séquentielle pour accéder au conteneur de défilement. Cela peut être très frustrant pour les utilisateurs qui n'ont pas accès à une souris.
<button>Start</button>
<div class="scroll">
<p>This scroller does not have a tabindex value set...</p>
<div class="long"></div>
<p>You cannot see this line using the keyboard.</p>
</div>
<button>End</button>
Notez qu'un conteneur de défilement contenant des éléments enfants sélectionnables, comme dans l'exemple HTML suivant, est déjà accessible, car les touches fléchées permettent de faire défiler les enfants concentrés sont concentrés. Dans ce cas, aucun comportement n'est modifié.
<button>Start</button>
<div class="scroll">
<p>This is a terms and conditions text. Please scroll down to acknowledge reading.</p>
<div class="long"></div>
<button id="B">Acknowledge</button>
</div>
<button>End</button>
À partir de Chrome 130 avec curseurs sélectionnables
Cette fonctionnalité permet aux utilisateurs de défilement sans valeur d'index de tabulation ni à les enfants sélectionnables soient sélectionnables au clavier. Cela permet aux utilisateurs qui ne peuvent pas ou choisir de ne pas utiliser la souris pour sélectionner du contenu à l'aide de la tabulation et des flèches du clavier clés.
<button>Start</button>
<div class="scroll">
<p>This scroller does not have a tabindex value set...</p>
<div class="long"></div>
<p>but you can scroll through its content!</p>
</div>
<button>End</button>
Notez que ce comportement ne se produit que si le conteneur de défilement n'a pas d'enfants sélectionnables. Par exemple, si le conteneur de défilement contient déjà un bouton, le curseur de la touche Tabulation ignorer la barre de défilement et se concentrer directement sur le bouton. Dans ce cas, le conteneur de défilement le contenu est déjà accessible à l'aide des touches fléchées, une fois le bouton concentré. En raison de cette règle, il est possible que la valeur par défaut ne se comporte pas toujours dans les de manière optimale si de tels enfants existent. Si vous voulez que l'élément de défilement lui-même être sélectionnable au clavier dans cette situation, nous vous recommandons de définir un "tabindex" une valeur supérieure ou égale à 0.
<button>Start</button>
<div class="scroll" tabindex="0">
<p>This is a terms and conditions text. Please scroll down to acknowledge reading.</p>
<div class="long"></div>
<button id="B">Acknowledge</button>
</div>
<button>End</button>
Cette fonctionnalité permet d'accéder au clavier par défaut pour aider les internautes à naviguer plus facilement dans les onglets une page.