Cette traduction n’a pas encore été relue par la rédaction. La version allemande fait foi. Deutsche Fassung →
Barrierefreiheit
Comment les infobulles et les infobulle doivent-elles fonctionner sur les sites web ?
Les infobulles qui apparaissent au contact de la souris ou au focus clavier — infobulles, sous-menus, bulles d'information — doivent satisfaire trois conditions : le visiteur peut les fermer sans mouvement de souris, généralement avec la touche Échap. Il peut déplacer la souris sur l'infobulle sans qu'elle ne disparaisse. Et elle reste visible jusqu'à ce qu'il la ferme lui-même ou navigue ailleurs.
Trois règles pour chaque infobulle
Celui qui travaille avec un grand grossissement d'écran ne voit toujours qu'une petite portion de la page. Si une infobulle s'affiche au contact de la souris, elle masque rapidement dans la vue agrandie exactement le texte que le visiteur vient de lire — et sans moyen de la fermer, il reste bloqué. D'où la première règle : fermable, généralement par la touche Échap. La deuxième règle concerne le même groupe : pour lire une infobulle en grand, il faut pouvoir y déplacer la souris — si elle disparaît en quittant l'élément déclencheur, son contenu reste inaccessible. La troisième règle exige la persistance : une infobulle qui disparaît toute seule après quelques secondes est inutile pour les lecteurs lents. Les cas problématiques classiques sont les sous-menus personnalisés et les symboles d'information dans les formulaires.
Comment notre contrôle gère les infobulles
Les infobulles se manifestent uniquement en interaction : il faut déplacer la souris sur le déclencheur, appuyer sur la touche Échap, observer la durée de présence. Notre moteur de mesure exécute sur votre site des interactions ciblées et passives — par exemple en déplaçant le focus clavier à travers la page et en observant le comportement. Cependant, cela ne fournit pas un jugement complet sur les trois conditions pour chaque infobulle ; selon notre principe, rien n'est considéré comme conforme sans preuve véritable. Le rapport indique donc ce critère comme point de contrôle manuel. Au standard Gold, un vérificateur teste les infobulles de votre site avec la souris et le clavier et documente chacune qui ne peut pas se fermer, qui disparaît fugacement ou qui reste inaccessible.
Beispiele
Tooltip nur beim Überfahren
<span class="hilfe" title="Die Kundennummer steht auf der Rechnung oben rechts.">?</span><button type="button" aria-describedby="hilfe-knr" aria-expanded="false">Wo finde ich das?</button>
<p id="hilfe-knr" hidden>Die Kundennummer steht auf der Rechnung oben rechts.</p>Eine Einblendung muss per Tastatur erreichbar sein, mit Escape schließen und stehen bleiben, solange der Zeiger darauf ruht.
- Survolez les symboles d'information et les menus de votre site avec la souris et appuyez sur Échap — l'infobulle devrait se fermer.
- Déplacez la souris du déclencheur vers l'infobulle elle-même — elle doit rester ouverte en chemin.
- Supprimez les minuteurs qui ferment les infobulles automatiquement après quelques secondes.
- Préférez le clic à la passage de la souris comme déclencheur — ce qui s'ouvre et se ferme par clic satisfait presque automatiquement les règles.
- Demandez à votre agence d'utiliser des composants accessibles éprouvés et testés pour les sous-menus et les infobulles plutôt que des développements personnalisés.