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) ?
Un utilisateur agrandit sa page à 200 % et survole un bouton d’aide. Une infobulle personnalisée apparaît et recouvre exactement le contenu qu’elle est censée expliquer. Impossible de la déplacer, impossible de la fermer au clavier. Le contenu additionnel est devenu un obstacle.
Le critère 10.13 concerne tout contenu qui s’affiche à la prise de focus ou au survol d’un composant, sans activation explicite. Tooltips personnalisés, popovers, sous-menus contextuels, bulles d’aide : tous sont concernés. Sont exclus les infobulles natives du navigateur (attribut title), les messages de validation de formulaire natifs, et tout contenu révélé par un clic ou la touche Entrée.
Trois conditions doivent être vérifiées. Le contenu doit pouvoir être fermé sans déplacer le pointeur ni le focus (dismissable). Il doit rester visible quand le pointeur se déplace dessus pour le lire (hoverable). Il doit persister jusqu’à ce que l’utilisateur décide de le quitter ou que l’information ne soit plus valide (persistent). Ce sont les trois conditions du critère WCAG 1.4.13, niveau AA.
Pour la condition dismissable, un écouteur keydown sur document qui ferme le contenu additionnel à l’appui de la touche Échap suffit. C’est la convention la plus connue des utilisateurs clavier.
3 tests pour contrôler le comportement des contenus au survol et au focus
Fermeture au clavier du contenu survol/focus
- Repérez tous les contenus additionnels déclenchés par le survol ou la prise de focus. Excluez les infobulles
title, les messages de validation natifs du navigateur, et les contenus ouverts par clic ou activation explicite. - Pour chaque contenu additionnel, vérifiez qu’au moins une de ces deux conditions est remplie :
- Le contenu est positionné de façon à ne masquer aucune autre information ni le composant déclencheur, y compris à fort zoom (200 % ou plus) ;
- Un mécanisme clavier (généralement la touche Échap) permet de le fermer sans déplacer le focus.
- Si les deux conditions sont absentes pour un seul contenu additionnel, le test échoue.
Survol du contenu additionnel sans disparition
- Repérez tous les contenus additionnels déclenchés par le survol de la souris. Excluez les infobulles
title, les messages de validation natifs, et les contenus ouverts par activation. - Pour chaque contenu additionnel : placez le pointeur sur le composant déclencheur jusqu’à ce que le contenu apparaisse, puis déplacez lentement le pointeur vers le contenu additionnel lui-même.
- Vérifiez que le contenu reste visible pendant ce déplacement et que vous pouvez le survoler sans qu’il disparaisse.
- Si le contenu disparaît dès que le pointeur quitte le déclencheur, le test échoue.
Persistance du contenu survol/focus
- Repérez tous les contenus additionnels déclenchés par le survol ou la prise de focus. Excluez les infobulles
title, les messages de validation natifs, et les contenus ouverts par activation. - Pour chaque contenu additionnel, vérifiez qu’il reste affiché jusqu’à l’une de ces trois situations :
- L’utilisateur déplace le pointeur ou le focus hors du contenu additionnel ET hors du composant déclencheur ;
- L’utilisateur ferme explicitement le contenu (touche Échap, bouton de fermeture) ;
- L’information n’est plus valide (ex. : message d’erreur après correction de la saisie).
- Si le contenu disparaît avant l’une de ces situations, le test échoue.
Exemples
❌ Non conforme : Tooltip CSS-only : disparaît dès que le pointeur quitte le déclencheur
<style>
.tooltip-content {
display: none;
position: absolute;
top: 100%;
left: 0;
background: #333;
color: #fff;
padding: 8px 12px;
border-radius: 4px;
white-space: nowrap;
}
.trigger:hover .tooltip-content {
display: block;
}
</style>
<span class="trigger" style="position: relative; display: inline-block;">
<button type="button">Aide</button>
<span class="tooltip-content">
Votre numéro de commande figure sur votre email de confirmation.
</span>
</span>Avec cette implémentation CSS pure, le tooltip disparaît dès que le pointeur quitte le <button>. L’utilisateur ne peut pas déplacer la souris pour lire le message complet : tests 10.13.2 et 10.13.3 échouent. Aucune touche ne permet de fermer le tooltip s’il masque d’autres contenus au zoom : test 10.13.1 peut aussi échouer. Le declencheur sur :hover parent uniquement rend le survol du tooltip impossible.
✅ Conforme : Tooltip JavaScript avec Échap, survol maintenu et persistance correcte
<style>
.tooltip-content {
display: none;
position: absolute;
top: calc(100% + 6px);
left: 0;
background: #333;
color: #fff;
padding: 8px 12px;
border-radius: 4px;
white-space: nowrap;
z-index: 10;
}
.tooltip-content.visible {
display: block;
}
</style>
<span class="tooltip-wrapper" style="position: relative; display: inline-block;">
<button
type="button"
aria-describedby="tip-commande"
onmouseenter="openTip('tip-commande')"
onmouseleave="scheduleTipClose('tip-commande')"
onfocus="openTip('tip-commande')"
onblur="closeTip('tip-commande')">
Aide
</button>
<span
id="tip-commande"
role="tooltip"
class="tooltip-content"
onmouseenter="cancelTipClose('tip-commande')"
onmouseleave="closeTip('tip-commande')">
Votre numéro de commande figure sur votre email de confirmation.
</span>
</span>
<script>
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape') {
document.querySelectorAll('.tooltip-content.visible')
.forEach(function(t) { t.classList.remove('visible'); });
}
});
function openTip(id) {
document.getElementById(id).classList.add('visible');
}
function closeTip(id) {
document.getElementById(id).classList.remove('visible');
}
var closeTimers = {};
function scheduleTipClose(id) {
closeTimers[id] = setTimeout(function() { closeTip(id); }, 300);
}
function cancelTipClose(id) {
clearTimeout(closeTimers[id]);
}
</script>Le setTimeout de 300 ms laisse au pointeur le temps de rejoindre le tooltip depuis le bouton sans que le contenu disparaisse (hoverable : test 10.13.2). Le tooltip sur mouseenter annule ce timer (condition hoverable maintenue). La touche Échap ferme tous les tooltips visibles (dismissable : test 10.13.1). Le contenu reste affiché jusqu’à ce que l’utilisateur quitte la zone ou appuie sur Échap (persistent : test 10.13.3). L’attribut role="tooltip" associé à aria-describedby rend le contenu accessible aux lecteurs d’écran.
Astuces et pièges
⚠️ Le pattern CSS :hover est quasi-systématiquement non conforme
Un tooltip affiché uniquement via .parent:hover .tooltip { display: block; } échoue aux tests 10.13.2 et 10.13.3 : le contenu disparaît dès que le pointeur quitte l’élément déclencheur. C’est l’erreur la plus fréquente en audit. La correction : gérer l’affichage en JavaScript avec un setTimeout court (100-300 ms) pour laisser le temps au pointeur de rejoindre le contenu additionnel.
⚠️ L’attribut title et la validation native sont hors périmètre
Les infobulles générées par l’attribut title et les messages natifs du navigateur (ex. : « Veuillez renseigner ce champ. ») sont contrôlés par l’agent utilisateur, pas par le code de la page. Ils sont explicitement exclus des trois tests. En revanche, un tooltip <div> personnalisé visuellement identique à une infobulle native reste dans le périmètre du critère.
⚠️ Le zoom change tout pour le test 10.13.1
Un tooltip parfaitement positionné à 100 % peut masquer d’autres contenus à 200 % ou 400 %. Le test 10.13.1 exige une vérification à différents niveaux de zoom. Si le tooltip peut recouvrir des informations dans certaines conditions, la touche Échap devient obligatoire, quelle que soit la qualité du positionnement par défaut.
💡 La touche Échap : solution universelle pour le dismissable
Plutôt que de soigner minutieusement le positionnement pour chaque breakpoint et chaque niveau de zoom, ajoutez un écouteur document.addEventListener('keydown', ...) qui ferme tous les contenus additionnels visibles à l’appui d’Échap. C’est plus robuste et connu de tous les utilisateurs clavier. Cette seule mesure valide le test 10.13.1 en toutes circonstances.
⚠️ Les sous-menus de navigation au survol sont également concernés
Les sous-menus qui s’ouvrent automatiquement au survol d’un item de navigation sont soumis au test 10.13.2. Cas classique : un espace de quelques pixels entre l’item déclencheur et le panneau du sous-menu. Si le pointeur traverse cet espace, le sous-menu se ferme avant que l’utilisateur puisse l’atteindre. La solution est d’étendre la zone de détection ou d’utiliser le même pattern à timer.
Questions fréquentes
Quelles obligations impose le critère RGAA 10.13 aux tooltips générés via l'attribut title ?
Non. Les infobulles de l’attribut title sont gérées par le navigateur : le critère 10.13 ne s’y applique pas. Attention cependant : ces tooltips natifs ne s’affichent pas à la prise de focus clavier sur la plupart des navigateurs et ne sont pas lus de façon fiable par les lecteurs d’écran. Ils ne constituent donc pas une alternative textuelle valable au sens des critères 1.1 et 1.2 du RGAA.
Comment vérifier qu'un contenu au survol est conforme au test RGAA 10.13.2 ?
Déclenchez le contenu additionnel en survolant son déclencheur, puis déplacez lentement le curseur vers ce contenu. S’il disparaît avant que vous puissiez l’atteindre, le test échoue. Restez ensuite positionné sur le contenu pendant quelques secondes pour vérifier qu’il ne se ferme pas seul. Répétez à 200 % de zoom pour reproduire les conditions réelles d’un utilisateur malvoyant.
Comment le critère RGAA 10.13 s'applique-t-il aux menus déroulants qui s'ouvrent au survol ?
Oui, s’il s’ouvre uniquement au survol sans activation explicite (clic ou touche Entrée). Ce menu est un contenu additionnel au sens du critère. Il doit être hoverable (le curseur peut se déplacer vers ses items sans que le menu se ferme), persistant et — s’il masque d’autres contenus — fermable au clavier. C’est aussi pourquoi les menus accessibles recommandent systématiquement une activation par clic en complément du survol.
Quels mécanismes permettent de fermer un contenu additionnel selon le critère RGAA 10.13 ?
Non. Le RGAA exige « un mécanisme au clavier » sans en préciser la nature. La touche Échap est la convention recommandée par les patrons WAI-ARIA, mais un bouton « Fermer » focusable à l’intérieur du contenu additionnel est également valide. L’essentiel : l’utilisateur ne doit pas avoir à déplacer son pointeur ou son focus pour fermer le contenu.
Comment le critère RGAA 10.13 s'applique-t-il aux messages d'erreur affichés en popover dans un formulaire ?
Oui, s’il apparaît à la prise de focus et n’est pas géré par la validation native du navigateur. Ce contenu doit rester visible tant que l’erreur n’est pas corrigée (test 10.13.3). S’il est positionné sous le champ sans chevaucher aucun autre contenu, même à fort zoom, le test 10.13.1 est non applicable. Les tests 10.13.2 et 10.13.3 restent obligatoires.