ARIA : rôle tooltip
Un tooltip (« info-bulle ») est une bulle de texte contextuelle qui affiche une description pour un élément, apparaissant au survol du pointeur ou lors de la sélection clavier.
Description
Les info-bulles fournissent des informations contextuelles sur un élément lorsque celui-ci reçoit la sélection ou est survolé, mais sont sinon invisibles sur la page. L'info-bulle s'affiche automatiquement après un court délai : l'utilisateur·ice ne la demande pas. Bien qu'une info-bulle puisse être placée sur n'importe quel contenu, elles servent généralement à donner des indications sur des outils ou des contrôles, par exemple pour fournir un complément d'information à des icônes ayant des libellés courts (ou aucun libellé, ce qui n'est pas accessible !).
Une info-bulle devient généralement visible après un délai de une à cinq secondes, en réponse à un survol de la souris ou à la sélection clavier de l'élément associé. Elle s'ouvre automatiquement, sans action de l'utilisateur·ice, et se ferme automatiquement lorsque la sélection est perdue ou que la souris quitte l'élément ou l'info-bulle. Elle doit rester ouverte lorsque la souris survole l'info-bulle elle-même, et doit aussi se fermer lorsque l'utilisateur·ice appuie sur la touche Échap.
Comme l'info-bulle ne reçoit jamais la sélection et n'est pas dans l'ordre de tabulation, elle ne peut pas contenir d'éléments interactifs comme des liens, des champs de saisie ou des boutons.
Un tooltip n'est pas le rôle approprié pour l'icône « i » d'information, ⓘ. Une info-bulle est directement associée à l'élément propriétaire. Le role="tooltip" est inclus sur l'élément contenant le contenu de l'info-bulle, et non sur l'icône ou le contrôle qui la déclenche. Pour afficher une info-bulle lorsque l'icône ⓘ est survolée ou reçoit la sélection, donnez au déclencheur un nom accessible et référencez l'info-bulle avec aria-describedby, de sorte que le contenu de l'info-bulle soit annoncé lorsque le déclencheur reçoit la sélection. Comme l'information détaillée décrit le contrôle associé plutôt que l'icône ⓘ elle-même, ajoutez également aria-describedby sur ce contrôle, comme indiqué dans l'exemple d'icône d'information supplémentaire.
L'utilisation du rôle ARIA tooltip complète le comportement natif des info-bulles du navigateur. Un exemple d'info-bulle native est la façon dont certains navigateurs affichent la valeur de l'attribut title lors d'un long survol de la souris. On ne peut pas activer cette fonctionnalité par la sélection clavier ou par interaction tactile, ce qui la rend inaccessible. Si l'information est suffisamment importante pour être dans une info-bulle ou un titre, envisagez de l'inclure dans un texte visible.
Les éléments avec le rôle tooltip doivent être référencés avec aria-describedby avant ou lors de l'affichage de l'info-bulle. L'attribut aria-describedby est sur l'élément propriétaire, pas sur l'info-bulle.
L'info-bulle n'est pas considérée comme une fenêtre intrusive (popup en anglais) au sens de la propriété aria-haspopup sur l'élément propriétaire, d'où l'utilisation du terme « bulle de texte » dans la définition introductive.
Bien qu'une info-bulle puisse apparaître et disparaître, son apparition étant automatique et non contrôlée intentionnellement par l'utilisateur·ice, le rôle aria-expanded n'est pas pris en charge.
Le nom accessible d'une info-bulle peut provenir de son contenu. En théorie, il peut provenir d'un aria-label ou aria-labelledby, mais dans la plupart des cas, il n'est pas recommandé d'utiliser les propriétés ARIA pour fournir un nom accessible à une info-bulle.
Les info-bulles fournissent des informations supplémentaires, généralement sans interaction directe sur l'info-bulle elle-même. Elles sont généralement associées au contenu qu'elles définissent avec un aria-describedby avec l'id de l'élément principal. Ainsi, si l'info-bulle a un nom accessible explicitement défini, ce nom est exposé comme description de l'élément principal plutôt que comme contenu de l'info-bulle, ce qui signifie que le contenu de l'info-bulle peut ne jamais être découvert par un·e utilisateur·ice de lecteur d'écran.
Propriétés, états et rôles WAI-ARIA associés
- L'élément qui sert de conteneur à l'info-bulle porte
role="tooltip". - L'élément qui déclenche l'info-bulle référence l'élément info-bulle avec
aria-describedby.
Interactions au clavier
- Échap
-
Ferme l'info-bulle
L'info-bulle doit apparaître à la sélection ou au survol de l'élément, sans interaction supplémentaire. Elle doit disparaître automatiquement lorsque la sélection de l'élément propriétaire est perdue ou que la souris quitte l'élément propriétaire et l'info-bulle. Bien que l'info-bulle ne reçoive pas la sélection, la touche Échap doit la fermer si elle est ouverte.
Fonctionnalités JavaScript requises
- L'info-bulle s'affiche et disparaît avec la sélection clavier et la perte de sélection, ainsi que par les évènements souris : survol et sortie.
- L'info-bulle ne reçoit jamais la sélection. La sélection reste sur l'élément propriétaire.
- L'info-bulle peut être masquée avec la touche Échap.
- L'info-bulle reste ouverte au survol.
- L'info-bulle n'est masquée que avec JavaScript et les sélecteurs CSS. Si JavaScript n'est pas disponible, l'info-bulle est affichée.
Exemples
Utiliser une info-bulle
<label for="password">Mot de passe :</label>
<input aria-describedby="passwordrules" id="password" type="password" />
<div role="tooltip" id="passwordrules">
<p>Règles de mot de passe :</p>
<ul>
<li>8 caractères minimum</li>
<li>
Inclure au moins une lettre minuscule, une lettre majuscule, un chiffre et
un caractère spécial
</li>
<li>Unique à ce site web</li>
</ul>
</div>
L'info-bulle peut être instanciée avec du CSS. Changez le nom de la classe avec JavaScript pour masquer l'info-bulle si l'utilisateur·ice appuie sur la touche Échap.
[role="tooltip"] {
visibility: hidden;
position: absolute;
top: 2rem;
left: 2rem;
background: black;
color: white;
padding: 0.5rem;
border-radius: 0.25rem;
/* Laisser un délai avant de masquer pour que la souris puisse quitter le
champ et entrer dans l'info-bulle */
transition: visibility 0.5s;
}
[aria-describedby]:hover,
[aria-describedby]:focus {
position: relative;
}
[aria-describedby]:hover + [role="tooltip"],
[aria-describedby]:focus + [role="tooltip"],
[role="tooltip"]:hover,
[role="tooltip"]:focus {
visibility: visible;
}
Le code ci-dessus masque l'info-bulle avec du CSS à l'état par défaut ou si la classe hide-tooltip a été ajoutée avec JavaScript (lorsque l'utilisateur·ice appuie sur Échap), avec une spécificité élevée pour garantir que l'info-bulle ne s'affiche pas. Quand l'élément propriétaire reçoit la sélection, il est positionné relativement et l'info-bulle devient visible. On garde l'info-bulle visible au survol, conformément à WCAG 1.4.13. Ici, on permet au curseur de passer du champ à l'info-bulle sans que celle-ci disparaisse, en attendant 0,5s entre les deux ; il existe d'autres moyens d'obtenir ce résultat, comme remplir l'espace avec un élément transparent qui garde l'info-bulle visible au survol.
Utiliser une icône d'information supplémentaire
Cet exemple affiche une info-bulle lorsque le bouton ⓘ est survolé ou reçoit la sélection clavier. Le bouton possède un nom accessible et référence l'info-bulle avec aria-describedby, de sorte que le contenu de l'info-bulle est annoncé lorsque le bouton reçoit la sélection. Le champ de saisie référence également l'info-bulle avec aria-describedby, car l'information décrit ce contrôle, même lorsque l'info-bulle est masquée.
<label for="username">Nom d'utilisateur :</label>
<input id="username" aria-describedby="username-help" />
<div class="info">
<button
type="button"
aria-label="Plus d'informations sur les noms d'utilisateur"
aria-describedby="username-help">
<span aria-hidden="true">ⓘ</span>
</button>
<div role="tooltip" id="username-help">
<p>
Votre nom d'utilisateur est affiché publiquement à côté de vos
commentaires.
</p>
</div>
</div>
L'info-bulle est positionnée sous l'icône. La marge intérieure au-dessus de la bulle de texte comble l'espace jusqu'au bouton afin que le pointeur puisse se déplacer sur l'info-bulle sans la fermer.
.info {
display: inline-block;
position: relative;
}
[role="tooltip"] {
visibility: hidden;
position: absolute;
top: 100%;
right: 0;
width: 15rem;
padding-top: 0.5rem;
z-index: 1;
}
.info:hover [role="tooltip"],
.info:focus-within [role="tooltip"] {
visibility: visible;
}
[role="tooltip"] p {
margin: 0;
padding: 0.75rem;
border-radius: 0.25rem;
background: #222;
color: white;
box-shadow: 0 2px 6px #0004;
}
[role="tooltip"]::before {
content: "";
position: absolute;
top: 0;
right: 0.5rem;
border-right: 0.5rem solid transparent;
border-bottom: 0.5rem solid #222;
border-left: 0.5rem solid transparent;
}
L'info-bulle reste visible lorsque le bouton reçoit la sélection ou lorsque le pointeur se trouve sur le bouton ou l'info-bulle. Elle est masquée lorsqu'aucune de ces conditions ne s'applique.
Problèmes d'accessibilité
Si l'information est suffisamment importante pour une info-bulle, n'est-elle pas suffisamment importante pour être toujours visible ?
L'info-bulle doit rester ouverte au survol, même si cela signifie que la souris quitte techniquement l'élément propriétaire. Comme le contenu qui apparaît au survol peut être difficile, voire impossible à percevoir si l'utilisateur·ice doit garder le pointeur sur le déclencheur, WCAG 1.4.13 précise que le contenu rendu visible doit être persistant, c'est-à-dire qu'il ne doit pas disparaître sans action de l'utilisateur·ice.
Bonnes pratiques
Plutôt que d'utiliser des info-bulles et de masquer des informations importantes, privilégiez des descriptions claires, concises et toujours visibles. Si l'espace le permet, n'utilisez pas d'info-bulles ni de toggletips. Fournissez simplement des libellés explicites et un texte suffisant.
Spécifications
| Spécification |
|---|
| Accessible Rich Internet Applications (WAI-ARIA) # tooltip |