À partir de Chrome 124, les défilements sont sélectionnables au clavier par défaut s'ils n'ont pas d'enfants sélectionnables au clavier.
Contexte
Les Scrollers sont partout. Vous pouvez en trouver un dans une zone "Conditions d'utilisation", où vous devrez faire défiler la page jusqu'en bas pour cliquer sur le bouton "Envoyer". Vous pouvez également rencontrer une barre de menu verticale pleine d'icônes parmi lesquelles choisir.
Dans de tels cas, de nombreux internautes utilisent les mouvements vers le haut de leur souris ou de leur pavé tactile pour faire défiler l'élément. Cependant, un dispositif de pointage, un pavé tactile ou un écran tactile ne sont pas la meilleure façon pour tous les utilisateurs de naviguer sur une page. Certaines personnes préfèrent naviguer sur une page HTML en accédant à chaque élément sélectionnable en utilisant uniquement leur clavier. Plusieurs raisons peuvent expliquer ce problème. par les personnes souffrant de tremblements ou d'autres problèmes rendant difficile l'utilisation de la souris, par celles qui ont du mal à localiser visuellement le curseur de la souris, ou par d'autres personnes qui utilisent un seul commutateur ou une seule 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 peuvent être utilisées via une interface de clavier sans nécessiter de codes temporels spécifiques pour des frappes individuelles, sauf lorsque la fonction sous-jacente nécessite une entrée qui dépend du chemin d'accès de l'utilisateur et pas seulement des points de terminaison. (niveau A)
Avant ce changement de sélection dans les éléments de défilement
Avant cette modification, un élément de conteneur de défilement ne pouvait être ciblé par des tabulations que si le tabindex est explicitement défini sur 0 ou plus. Par exemple, utilisez les codes CSS et HTML suivants. Utilisez ensuite la touche de tabulation du premier bouton pour accéder à 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 tabindex négatif, comme dans le code HTML suivant, la barre de défilement est 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 de sélection 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 enfants sélectionnables, comme dans le code HTML suivant, est déjà accessible, car les touches fléchées permettent le défilement lorsque les enfants sélectionnables sont sélectionné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 124 avec des défilements sélectionnables
Cette fonctionnalité permet aux éléments de défilement sans valeur d'index de tabulation définie et sans enfants sélectionnables d'être sélectionnables au clavier. Cela permet aux utilisateurs qui ne peuvent pas ou qui choisissent de ne pas utiliser la souris pour sélectionner un 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 sélection par onglet ignore la barre de défilement et se concentre directement sur 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 le bouton sélectionné. En raison de cette règle, il se peut que la valeur par défaut ne se comporte pas toujours de la manière la plus optimale si de tels enfants existent. Si vous souhaitez que l'élément de conteneur de défilement lui-même soit sélectionnable au clavier dans ce cas, 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>
Dans tous les cas, cette fonctionnalité permet aux composants de défilement d'être accessibles par défaut au clavier, ce qui permet aux internautes de bénéficier d'une expérience plus fluide lorsqu'ils naviguent à l'aide des onglets d'une page.