À partir de Chrome 130, les curseurs sont sélectionnables par défaut au clavier s'ils n'ont pas d'enfants sélectionnables au clavier.
Contexte
Les barres de défilement sont partout. Vous pouvez en trouver une dans la zone "Conditions d'utilisation", que vous devez faire défiler jusqu'en bas pour cliquer sur le bouton "Envoyer". Vous pouvez également rencontrer une barre de menu verticale remplie d'icônes.
Dans ce cas, de nombreux utilisateurs Web utilisent les mouvements de la souris ou du pavé tactile vers le haut et vers le bas pour faire défiler l'élément. Toutefois, un dispositif de pointage, un pavé tactile ou un écran tactile ne permet pas à tous les utilisateurs de naviguer de manière optimale sur une page. Certaines personnes préfèrent naviguer sur une page HTML en accédant à chaque élément pouvant être sélectionné à l'aide de leur clavier uniquement. Cela peut être dû à diverses raisons. Il peut s'agir de personnes souffrant de tremblements ou d'autres problèmes qui rendent l'utilisation d'une souris difficile, de personnes qui ont du mal à localiser visuellement le curseur de la souris, ou d'autres qui utilisent un seul bouton ou la commande vocale.
Les bonnes pratiques d'accessibilité recommandent que toutes les fonctionnalités soient disponibles à l'aide d'un clavier. Ainsi, chacun peut utiliser le Web de la manière qui lui convient le mieux.
2.1.1 clavier : toutes les fonctionnalités du contenu sont utilisables via une interface de clavier sans nécessiter de délais spécifiques pour les frappes individuelles, sauf lorsque la fonction sous-jacente nécessite une entrée qui dépend du chemin de mouvement de l'utilisateur et pas seulement des points de terminaison. (niveau A)
Avant ce changement de mise au point dans les défileurs
Avant cette modification, un élément de défilement ne peut être sélectionné que par la touche de tabulation si son index de tabulation est explicitement défini sur 0 ou plus. Par exemple, utilisez le code CSS et HTML suivant. Essayez ensuite de passer du premier bouton à l'élément de défilement à l'aide de la touche de tabulation.
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 tabindex, il peut être difficile pour l'utilisateur d'utiliser la navigation séquentielle de la sélection pour accéder au dispositif 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'une barre de défilement contenant des enfants sélectionnables, comme dans le code HTML suivant, est déjà accessible, car les touches fléchées permettent de faire défiler l'écran lorsque les enfants sélectionnables sont sélectionnés. Aucun comportement n'est modifié dans ce cas.
<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 des barres de défilement sélectionnables
Cette fonctionnalité permet aux barres de défilement sans valeur tabindex définie et sans enfants sélectionnables d'être sélectionnables au clavier. Cela permet aux utilisateurs qui ne peuvent pas ou choisissent de ne pas utiliser de souris de sélectionner le contenu à l'aide de la touche de tabulation et des touches fléchées du clavier.
<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, la touche Tabulation ignore le conteneur de défilement et sélectionne directement le bouton. Dans ce cas, le contenu de la barre de défilement est déjà accessible à l'aide des touches fléchées une fois que le bouton est sélectionné. En raison de cette règle, le comportement par défaut peut ne pas toujours être optimal si de tels enfants existent. Si vous souhaitez que l'élément de défilement lui-même soit sélectionnable au clavier dans cette situation, nous vous recommandons de définir une valeur tabindex de 0 ou plus.
<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 aux utilisateurs de clavier d'accéder aux barres de défilement par défaut dans tous les cas, ce qui leur permettra de naviguer plus facilement sur une page à l'aide des onglets.