Défilements sélectionnables au clavier

À 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 barres de défilement sont partout. Vous pouvez en trouver une dans une zone "Conditions d'utilisation", où vous devez faire défiler l'écran jusqu'en bas pour cliquer sur le bouton d'envoi. Vous pouvez également rencontrer une barre de menu verticale remplie d'icônes.

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. 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é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 même un contacteur ou une 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 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 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'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 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 curseurs 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 ne comporte aucun enfant sélectionnable. 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, 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, il est recommandé de définir un index de tabulation 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 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.