Le rôlescrollbar est un objet graphique qui contrôle le défilement du contenu à l'intérieur d'une zone d'affichage.

Description

Unescrollbar est une plage (range) qui contrôle quelle partie du contenu d'une zone d'affichage est actuellement visible dans le cadre de cette zone ; que la zone d'affichage soit la fenêtre entière du navigateur, uneiframe, ou lecontexte de formatage en bloc (block formatting context).

Qu'est‑ce qu'une barre de défilement

De nombreuses applications fournissent des barres de défilement natives lorsque la zone de contenu est plus grande que la fenêtre de l'application. Les barres de défilement apparaissent généralement à droite ou en bas de la zone d'affichage. Les barres natives prennent la forme d'une piste rectangulaire mince de la longueur de la zone d'affichage qu'elles contrôlent, avec un élément d'interface appelé pouce ou curseur que l'on peut faire glisser le long de la piste pour déplacer le contenu associé dans la zone d'affichage. Certaines barres de défilement présentent des flèches à chaque extrémité permettant de faire défiler la zone d'affichage d'une petite distance lorsqu'on les active.

Prenez ce document comme exemple : si la zone d'affichage est la fenêtre entière du navigateur et que le contenu est plus haut que la zone d'affichage, dans la plupart des navigateurs la barre de défilement située sur le bord droit de la fenêtre représente la longueur totale de la page et le pouce représente la portion du contenu de la page qui est actuellement visible.

Les barres de défilement peuvent également apparaître pour des zones d'affichage qui sont des sous-sections de la fenêtre entière du navigateur. Toujours avec cet exemple, si ce contenu est intégré dans un<iframe> ou un<object>, la barre de défilement verticale native aura la hauteur du cadre. Une barre de défilement est généralement de la longueur de la zone d'affichage, mais ce n'est pas une obligation.

Si vous ne voyez pas de barre de défilement actuellement, c'est peut‑être parce que votre navigateur n'affiche la barre que pendant le défilement ou seulement lorsque le contenu d'un élément est trop grand pour tenir dans son contexte de formatage en bloc. Selon le navigateur et le système d'exploitation, il est possible de rendre les barres de défilement visibles même lorsque le contenu tient dans la zone d'affichage.

Rôle ARIAscrollbar

Il est toujours préférable d'utiliser les barres de défilement natives. Vous pouvez utiliser la propriété CSSoverflow pour garantir l'apparition des barres de défilement natives. Unespécification CSS pour les barres de défilement^(angl.) est en cours d'élaboration. Certains navigateurs autorisentle style des barres via des pseudo-éléments préfixés.

Comme le style des barres natives a historiquement été limité, vous pouvez rencontrer des barres de défilement implémentées en JavaScript que vous devez prendre en charge et rendre totalement accessibles. Pour cela, vous pouvez utiliser le rôlescrollbar afin d'indiquer aux technologies d'assistance qu'un contrôle d'interface utilisateur est une barre de défilement interactive.

Un élément avec le rôlescrollbar est un objet graphique qui contrôle le défilement du contenu dans une zone d'affichage ; c'est le rôle ARIA qui indique qu'un élément est une barre de défilement. L'élément HTML le plus proche est le typerange de<input>, c'est‑à‑dire<input type="range">.

L'élémentscrollbar a deux attributs requis :aria-controls etaria-valuenow. L'attributaria-controls référence l'id de la zone défilable qu'il contrôle. La propriétéaria-valuenow définit la valeur courante de la barre de défilement.

Alors quearia-valuenow est toujours requis, les propriétésaria-valuemin etaria-valuemax n'ont besoin d'être définies pour le rôlescrollbar que lorsque la valeur minimale duscrollbar n'est pas 0 ou que la valeur maximale n'est pas 100. La valeur dearia-valuenow doit toujours être comprise entre les valeurs minimale et maximale incluses, ou entre0 et100 inclus si les valeurs minimale et maximale par défaut sont0 et100 respectivement.aria-valuenow indique la proximité de la zone d'affichage par rapport au bas du document. Pensez‑y comme à une barre de progression, où le début du document est la valeur minimale et la fin du document la valeur maximale.

Unescrollbar représente la valeur courante et l'éventail des valeurs possibles via la taille de la barre et la position du pouce par rapport à la plage visible de l'orientation (horizontale ou verticale) qu'elle contrôle. Autrement dit, la longueur de lascrollbar (hauteur ou largeur) représente l'ensemble du contenu d'une zone d'affichage. La valeuraria-valuemin représente le début du contenu et de la barre, la valeuraria-valuemax représente la fin du contenu et de la barre.aria-valuenow représente le contenu actuellement visible dans la zone d'affichage et la position courante, ou valeur, du pouce mobile. La valeuraria-valuenow sera généralement exposée comme un pourcentage entrearia-valuemin etaria-valuemax calculé par les technologies d'assistance.

Comme une barre de défilement native, les utilisateur·rice·s interagissent avec les élémentsscrollbar directement ou indirectement à l'aide de la souris, du pavé tactile, du clavier et de la commande vocale. Les implémentations du rôlescrollbar doivent aussi tenir compte de tous ces modes d'interaction.

Avec la souris, l'utilisateur·ice doit pouvoir activer lascrollbar en cliquant sur les flèches de défilement éventuellement présentes aux extrémités, en cliquant sur une zone vide de la piste, ainsi qu'en cliquant et en faisant glisser le pouce.

Le défilement au clavier doit également être pris en charge. Lorsque le focus se trouve dans la zone contrôlée par unescrollbar, les touchesFlèche vers le haut etFlèche vers le bas (ouFlèche vers la gauche etFlèche vers la droite pour une barre horizontale) doivent déplacer le pouce proportionnellement. De plus, les touchesPage précédente,Page suivante,Espace etMaj + Espace doivent déplacer le contenu et le pouce de la hauteur (ou largeur) de la zone d'affichage pour chaque pression jusqu'à atteindre le bas ou le haut (ou la gauche ou la droite) du contenu.

Le JavaScript doit traduire l'action de lascrollbar en commandes de défilement et fournir un retour à l'utilisateur·ice :

1. mettant visuellement à jour l'élémentscrollbar,
2. faisant défiler le contenu de la zone d'affichage, et
3. mettant à jour la propriétéaria-valuenow.

L'orientation par défaut du rôlescrollbar est verticale. Inclurearia-orientation="vertical" est donc optionnel. L'orientation représente l'orientation de la barre et l'effet de défilement sur la zone contrôlée par la barre. Si le défilement est de gauche à droite ou de droite à gauche et non de haut en bas, ajoutezaria-orientation="horizontal" sur l'élément portant le rôlescrollbar.

Tous les descendants sont des présentations

Certains composants d'interface utilisateur, lorsqu'ils sont représentés dans une API d'accessibilité de plate-forme, ne peuvent contenir que du texte. Les API d'accessibilité n'ont pas de moyen de représenter des éléments sémantiques contenus dans unescrollbar. Pour gérer cette limitation, les navigateurs appliquent automatiquement le rôlepresentation à tous les éléments descendants d'unescrollbar, car ce rôle ne prend pas en charge des enfants sémantiques.

Par exemple, considérez l'élémentscrollbar ci‑dessous qui contient un titre :

<div role="scrollbar"><h3>Titre de ma barre de défilement</h3></div>

Étant donné que les descendants d'unescrollbar sont présentiels, le code suivant est équivalent :

<div role="scrollbar">  <h3 role="presentation">Titre de ma barre de défilement</h3></div>

Du point de vue de la personne utilisant une technologie d'assistance, le titre n'existe pas puisque les extraits précédents sont équivalents à ce qui suit dans l'arbre d'accessibilité :

<div role="scrollbar">Titre de ma barre de défilement</div>

Propriétés, états et attributs WAI-ARIA associés

aria-controls (Requis)

Identifie la zone d'affichage, via sonid, dont le contenu est contrôlé par la barre de défilement.

aria-valuenow (Requis)

Doit être défini sur une valeur décimale comprise entre0 (ouaria-valuemin si présent) etaria-valuemax, indiquant la valeur courante de la barre.

aria-valuetext

Les technologies d'assistance présentent souvent la valeur dearia-valuenow sous forme de pourcentage. Si cela n'est pas approprié, utilisez cette propriété pour rendre la valeur plus compréhensible.

aria-valuemin

Doit être définie sur une valeur décimale représentant la valeur minimale, et inférieure àaria-valuemax. Si elle est absente, la valeur par défaut est0.

aria-valuemax

Doit être définie sur une valeur décimale représentant la valeur maximale, et supérieure àaria-valuemin. Si elle est absente, la valeur par défaut est100.

aria-labelledby

Lorsque vous n'utilisez pas un contrôle natif et ne pouvez donc pas associer la barre à un<label>, si du texte visible peut fournir le nom accessible requis, référez-vous à l'id d'un élément contenant ce texte. Sinon, utilisezaria-label.

aria-label

Si aucun<label> ne peut être utilisé et qu'aucun texte visible ne peut être référencé pararia-labelledby, fournit la chaîne qui étiquette l'élémentscrollbar comme nom accessible.

aria-orientation

Par défaut, l'orientation estvertical. La propriété peut être définie surhorizontal,undefined (la valeur par défaut pour tous les rôles sauf indication contraire) ouvertical.

Interactions au clavier

Flèche vers le haut

Le contenu de la zone d'affichage se déplace d'une ligne vers le haut, le pouce se déplace vers le haut de la barre proportionnellement, jusqu'à atteindre le haut du contenu et de la barre.

Flèche vers le bas

Le contenu de la zone d'affichage se déplace d'une ligne vers le bas, le pouce se déplace vers le bas de la barre proportionnellement, jusqu'à atteindre le bas du contenu et de la barre.

Flèche vers la gauche

Pour le défilement horizontal, le contenu se déplace d'une largeur de caractère vers la gauche, le pouce se déplace vers la gauche de la barre proportionnellement, jusqu'à ce que le bord gauche du contenu atteigne le bord gauche de la zone d'affichage et que le pouce soit aligné à gauche.

Flèche vers la droite

Pour le défilement horizontal, le contenu se déplace d'une largeur de caractère vers la droite, le pouce se déplace vers la droite de la barre proportionnellement, jusqu'à ce que le bord droit du contenu atteigne le bord droit de la zone d'affichage et que le pouce soit aligné à droite.

Page précédente etMaj + Espace

Le contenu se déplace vers le haut d'une hauteur de zone d'affichage, le pouce se déplace vers le haut de la barre proportionnellement, jusqu'à atteindre le haut du contenu et de la barre.

Page suivante etEspace

Le contenu se déplace vers le bas d'une hauteur de zone d'affichage, le pouce se déplace vers le bas de la barre proportionnellement, jusqu'à atteindre le bas du contenu et de la barre.

Exemples

L'exemple suivant montre un mot (une suite de caractères) susceptible d'être plus long que le conteneur parent.

<div>Pi</div><div>  3.1415926535897932384626433832795028841971693993751058209749445923078164062862089986280348253421170679</div><div  role="scrollbar"  aria-labelledby="pi-label"  aria-controls="pi"  aria-orientation="horizontal"  aria-valuenow="0"  aria-valuemin="0"  aria-valuemax="100">  <div></div></div>

Lorsque vous utilisez les rôles ARIA au lieu des fonctionnalités d'interface natives, il faut utiliser du CSS pour styliser la barre et le pouce, et du JavaScript pour gérer tous les événements clavier et pointeur.

Le CSS pourrait aussi être utilisé pour s'assurer que la valeur de PI déborde et affiche une barre native :

<h3>Pi</h3><p tabindex="0" aria-labelledby="PI">  3.1415926535897932384626433832795028841971693993751058209749445923078164062862089986280348253421170679</p>

.pi {  overflow: auto;  max-width: 100%;}

Le CSS ci‑dessus force l'apparition d'une barre de défilement native lorsque l'utilisateur·ice interagit avec la zone du paragraphe si le mot le plus long du paragraphe dépasse la boîte contenant le paragraphe. L'attributtabindex a été ajouté pour permettre aux personnes utilisant le clavier de naviguer vers le contenu et de le faire défiler.

Spécifications

Voir aussi

• <input type="range">
• L'élément HTML<progress>
• L'élément HTML<meter>
• Autres widgets de type range :
  • ARIA : rôlemeter
  • ARIA : rôleslider
  • ARIA : rôleseparator (si sélectionnable)
  • ARIA : rôleprogressbar
  • ARIA : rôlespinbutton
• Événementscroll du Document