Infobulle

L’infobulle (ou bulle d’aide, aide contextuelle) est un élément d’indication permettant d’afficher un contenu complémentaire lié à un élément précis de l’interface.

Elle est cachée par défaut et s’affiche par-dessus le reste de la page lors du survol ou au clic de l’élément associé.

Le composant Infobulle est conçu pour être accessible et respecter les critères du RGAA. Voici les points clés à prendre en compte pour en garantir l’accessibilité.

Interactions clavier

L’infobulle doit être accessible au clavier, lorsque le focus est placé sur l'élément déclencheur de l'infobulle, celle-ci devient visible.

Échap ferme l’infobulle que le focus soit placé sur l’élément déclencheur ou non.

Règles d’accessibilité

• L’élément qui déclenche l’infobulle a l'attribut aria-describedby défini sur l’id de l'infobulle.
• L’élément qui sert de conteneur d’infobulle a l'attribut role="tooltip".
• Assurez-vous que le texte de l'infobulle est clair et concis.

Contrastes des textes

Le composant Infobulle est suffisamment contrasté en thème clair et en thème sombre.

Restitution par les lecteurs d’écran

Les lecteurs d’écran restituent différemment le composant Infobulle.

Infobulle déclenchée au survol

Seul le Narrateur ne restitue pas l’infobulle déclenchée au survol.

Infobulle déclenchée au clic

Tous les lecteurs d’écran restituent le contenu de l’infobulle déclenchée au clic.

---

Critères RGAA applicables

• Couleurs : 3.2, 3.3
• Liens : 6.1, 6.2
• Scripts : 7.1, 7.3
• Présentation de l’information : 10.1, 10.2, 10.3, 10.4, 10.5, 10.7, 10.8, 10.11, 10.12, 10.13, 10.14
• Consultation : 13.9

---

Références

• Référentiel général d’amélioration de l’accessibilité (RGAA 4.1.2)
• Rôle tooltip