Les infobulles et panneaux qui apparaissent au survol ou au focus peuvent-ils être fermés facilement sans déplacer la souris ?
Critère officiel 10.13 — Dans chaque page web, les contenus additionnels apparaissant à la prise de focus ou au survol d’un composant d’interface sont-ils contrôlables par l’utilisateur (hors cas particuliers) ?
Pourquoi c'est important
Un utilisateur qui agrandit son affichage peut déclencher involontairement l'apparition d'une infobulle qui masque du contenu en dessous. S'il ne peut pas la fermer sans déplacer précisément sa souris vers un bouton de fermeture, il est bloqué — surtout s'il a des tremblements ou une mobilité réduite.
Exemples concrets
Ce qui est conforme
Une infobulle d'aide apparaît au survol d'un champ de formulaire. L'utilisateur peut la fermer en appuyant sur Échap sans devoir déplacer sa souris. Elle reste visible assez longtemps pour être lue entièrement avant de disparaître.
Ce qui pose problème
Un panneau d'information s'affiche au survol d'une icône. Il masque une partie du menu principal. Il ne peut être fermé qu'en déplaçant la souris hors d'une zone précise — impossible pour une personne tremblante. Il disparaît aussi dès que la souris bouge légèrement, avant même d'avoir pu lire son contenu.
Comment agir
Pour tout contenu qui apparaît au survol ou au focus, demandez à votre prestataire de vérifier trois points : peut-on le fermer avec Échap sans déplacer le focus ? Reste-t-il affiché assez longtemps pour être lu ? Peut-on le survoler sans qu'il disparaisse aussitôt ? Ces trois conditions garantissent que le contenu est contrôlable pour tous les utilisateurs.
Règles clés
- Masquable : l'utilisateur peut faire disparaître le contenu additionnel sans déplacer le focus ni le pointeur (typiquement : touche Échap).
- Survolable : si le contenu additionnel apparaît au survol, déplacer le pointeur sur ce contenu ne le fait pas disparaître.
- Persistant : le contenu reste visible jusqu'à ce que l'utilisateur le ferme, déplace le focus/pointeur hors de la zone, ou que le contenu ne soit plus pertinent.
- Exception : si le contenu additionnel est prévu par le navigateur (title HTML natif), ce critère ne s'applique pas — mais les title natifs ont des problèmes d'accessibilité propres (non accessibles au clavier).
- Exception : si le contenu additionnel est une simple redondance du composant déclencheur (ex. : tooltip qui répète le texte du bouton).
Erreurs fréquentes
- Tooltip qui disparaît dès que le pointeur quitte le déclencheur — pas survolable
- Infobulle au focus sans moyen de la fermer avec Échap
- Menu contextuel qui se ferme au moindre déplacement du pointeur
- Popup au hover uniquement — non déclenché au focus clavier
- Tooltip déclenché par title HTML natif — non contrôlable et non accessible au clavier
Exemples de code
tooltip qui disparaît au déplacement du pointeur
✗ Non conforme/* CSS : tooltip qui disparaît dès que le pointeur
quitte l'élément déclencheur */
.tooltip-wrapper:hover .tooltip {
display: block;
}
/* Si le pointeur se déplace vers le tooltip,
il quitte .tooltip-wrapper — tooltip disparaît */Si l'espace entre le déclencheur et le tooltip n'est pas couvert par la zone de hover, le tooltip disparaît avant que l'utilisateur puisse le survoler. Problème particulièrement aigu pour les utilisateurs qui zooment.
tooltip survolable et masquable
✓ Conforme<!-- Structure : tooltip adjacent au déclencheur -->
<div class="tooltip-container">
<button type="button"
aria-describedby="tip-1"
id="btn-info">Info</button>
<div role="tooltip" id="tip-1"
class="tooltip" hidden>
Cette action est irréversible.
</div>
</div>
<script>
const btn = document.getElementById('btn-info');
const tip = document.getElementById('tip-1');
// Afficher au focus ET au survol
btn.addEventListener('focus', () => tip.removeAttribute('hidden'));
btn.addEventListener('mouseenter', () => tip.removeAttribute('hidden'));
// Masquer au blur ET à la sortie de la zone englobante
btn.addEventListener('blur', () => tip.setAttribute('hidden', ''));
// Fermer avec Échap (masquable)
document.addEventListener('keydown', e => {
if (e.key === 'Escape') tip.setAttribute('hidden', '');
});
// La zone englobante (.tooltip-container) couvre
// le déclencheur ET le tooltip — le survol
// du tooltip ne le fait pas disparaître
document.querySelector('.tooltip-container')
.addEventListener('mouseleave', () =>
tip.setAttribute('hidden', ''));
</script>
/* CSS : tooltip positionné à l'intérieur
du conteneur commun */
.tooltip-container {
position: relative;
display: inline-block;
}
.tooltip {
position: absolute;
top: 100%;
left: 0;
/* Le tooltip est dans .tooltip-container —
survoler le tooltip ne déclenche pas
mouseleave sur le container */
}La zone de hover couvre à la fois le déclencheur et le tooltip via le conteneur commun. Échap ferme le tooltip (masquable). Le tooltip reste visible jusqu'à ce que le pointeur quitte la zone entière (persistant). role='tooltip' + aria-describedby assure la restitution AT.
infobulle au focus clavier non masquable
✗ Non conforme/* Tooltip visible au focus mais sans moyen
de le fermer sans perdre le focus */
.field:focus + .field-hint {
display: block;
}
/* Aucune gestion de Échap */L'infobulle apparaît au focus mais ne peut être fermée qu'en quittant le champ. Si elle masque un contenu adjacent, l'utilisateur est bloqué.
infobulle au focus avec fermeture Échap
✓ Conforme<div class="field-wrapper">
<label for="code-postal">Code postal</label>
<input type="text" id="code-postal"
aria-describedby="hint-cp">
<p id="hint-cp" role="tooltip" hidden>
Format : 5 chiffres, ex. 29100
</p>
</div>
<script>
const input = document.getElementById('code-postal');
const hint = document.getElementById('hint-cp');
input.addEventListener('focus', () =>
hint.removeAttribute('hidden'));
input.addEventListener('blur', () =>
hint.setAttribute('hidden', ''));
input.addEventListener('keydown', e => {
if (e.key === 'Escape') hint.setAttribute('hidden', '');
});
</script>L'infobulle apparaît au focus et disparaît au blur. Échap la ferme sans déplacer le focus. aria-describedby lie l'infobulle au champ — le lecteur d'écran l'annonce automatiquement au focus.
Référence WCAG : 1.4.13