Infobulle

Une infobulle est une courte description qui apparaît lorsque l'utilisateur place le pointeur de la souris sur un élément de la page sans cliquer.

Règles d’implémentation pour l’accessibilité

Les infobulles (tooltip en anglais) créées nativement via l’attribut title ne sont pas accessibles au clavier. Nous allons donc recourir au CSS et à l’attribut aria-label pour les simuler.
Dans certains cas, pour pouvoir gérer le focus clavier, il faudra aussi rajouter sur la balise qui ne prend pas habituellement le focus la propriété tabindex="0".

Visuel

Un exemble de texte avec une ABBR.

Lien avec une infobulle accessible.

Extraits de code

Code HTML

<!-- la propriété tabindex="0" a été rajoutée sur cette balise qui ne reçoit pas le focus habituellement. -->
<p>Un exemble de texte avec une <abbr aria-label="abbréviation" tabindex="0">ABBR</abbr>.</p>

<p><a class="infobulle" href="#" aria-label="Contenu de l'infobulle accessible avec ARIA.">Lien avec une infobulle accessible</a>.</p>

<button class="infobulle" href="#" aria-label="Contenu de l'infobulle accessible avec ARIA.">Lien avec une infobulle accessible</button>

Code CSS

:root {
     --BACKGROUND-color: #f1b084;
     --TEXT-color: #000;
     --BORDER-color: #666666;
}
.infobulle {
     position: relative;
}
/** Vous pouvez positionner l'infobulle comme bon vous semble en modifiant les valeurs de top et left. */
a[aria-label].infobulle:focus:after,
a[aria-label].infobulle:hover:after,
p[aria-label].infobulle:focus:after,
p[aria-label].infobulle:hover:after,
button[aria-label].infobulle:focus:after,
button[aria-label].infobulle:hover:after,
abbr[aria-label].infobulle:focus:after,
abbr[aria-label].infobulle:hover:after {
     position: absolute;
     z-index: 5;
     top: -3em;
     left: 0;
     display: block;
     min-width: 10em;
     font-size: 1em;
     font-weight: normal;
     text-align:left;
     white-space: nowrap;
     border-radius: 0.2em;
     padding: 0.5em 0.7em;
     content: attr(aria-label);
     background-color: var(--BACKGROUND-color);
     color: var(--TEXT-color);
     border: 1px solid var(--BORDER-color);
}