Rôle et attributs ARIA
Rôles et attributs ARIA générés par défaut
- Rôle ARIA principal : role=”tooltip”
- Attributs ARIA utilisés :
- aria-live="off" : passe à polite si le tooltip est affiché, permettant au lecteur d’écran d’annoncer son ouverture et de lire son contenu sans interrompre l’annonce en cours
Comportement spécifique
Lorsque l’élément tooltip est placé sur un élément button ou icon-button (usage recommandé), ce dernier reçoit automatiquement, via son attribut description, le contenu du tooltip. Les informations renseignées via le tooltip sont donc rendues automatiquement accessibles.
Elément déclencheur
L’élément tooltip est à utiliser en priorité avec un élément déclencheur n’ayant pas d’autre fonction que celle de gérer son ouverture.
Dans le cas contraire (élément déclencheur ayant une autre fonction à l’activation), le tooltip ne sera accessible qu’au hover et au focus, et donc pas aux utilisateurs sur mobile.
Il faut donc réserver cette utilisation pour les informations moins importantes comme expliciter un bouton.
Navigation et interaction clavier
Touches supportées :
- Escape → Permet de cacher le tooltip
Gestion du focus :
- Le tooltip en lui même ne reçoit pas le focus directement, il s’ouvre selon une méthode définie par son attribut trigger
- Lorsque le focus quitte l’élément, le tooltip se ferme automatiquement
Bonnes pratiques et pièges à éviter