Le mouse over, ou survol, désigne le passage du pointeur de la souris au-dessus d’un élément d’une page web, sans clic, ainsi que la réaction visuelle ou le contenu que ce passage déclenche.
Le mécanisme repose sur la détection de la position du pointeur par le navigateur. En CSS, la pseudo-classe :hover applique un style à l’élément survolé. En JavaScript, l’événement mouseover est émis lorsqu’un dispositif de pointage, souris ou pavé tactile, amène le curseur sur l’élément ou sur l’un de ses éléments enfants. Les effets les plus courants sont un changement de couleur ou de soulignement, l’apparition d’une infobulle, l’ouverture d’un sous-menu, l’agrandissement d’une image ou l’aperçu d’un contenu.
Le survol dépend du dispositif de saisie. Sur un écran tactile, le doigt ne survole pas : il touche. La caractéristique média hover, définie par la spécification Media Queries de niveau 4, permet de tester si le dispositif de pointage principal peut survoler les éléments de façon commode. Selon la documentation de référence du Web, beaucoup d’appareils mobiles se contentent d’émuler le survol par un appui long. Pour un utilisateur qui navigue au clavier, l’équivalent du survol est la prise de focus.
Le mouse over se distingue du clic, qui active l’élément, et du focus, qui le sélectionne au clavier. Il se distingue aussi du mouse tracking, qui enregistre les mouvements de la souris à des fins d’analyse. Le survol intervient dans la conception des liens, des boutons, du menu déroulant, du méga menu et des vignettes de produits.
Le survol rend un service précis : il confirme qu’un élément réagit avant que l’utilisateur ne s’engage. Il renforce ainsi l’affordance d’un lien ou d’un bouton. Nous estimons en revanche qu’il ne doit jamais porter seul une information utile. Un prix, une condition ou une instruction visible uniquement au survol échappe aux utilisateurs d’écrans tactiles et à une partie des utilisateurs du clavier. Notre règle de conception : le survol confirme, il ne révèle pas.
Le critère 1.4.13 des WCAG 2.2 (W3C), « Contenu au survol ou au focus », est de niveau AA. Il s’applique quand le survol ou le focus fait apparaître un contenu supplémentaire. Ce contenu doit pouvoir être fermé sans déplacer le pointeur ni le focus, sauf s’il signale une erreur de saisie ou ne masque rien. Le pointeur doit pouvoir se déplacer sur le contenu sans le faire disparaître. Le contenu reste visible tant que le survol ou le focus dure. Les infobulles natives du navigateur, que l’auteur ne met pas en forme, sont exclues.
Le W3C rappelle que ce critère protège notamment les personnes qui agrandissent l’écran, les personnes malvoyantes et celles dont le pointage manque de précision. Son tutoriel sur les menus (Web Accessibility Initiative, 2026) signale aussi la difficulté des sous-menus au survol pour les personnes à dextérité réduite.
Les outils de mesure d’audience standard n’enregistrent pas le survol. Les outils de carte de chaleur et de suivi de la souris le rendent visible. Leur lecture demande de la prudence : un pointeur immobile ne prouve pas que le regard s’y trouve. Nous recommandons de mesurer plutôt le résultat attendu, par exemple le taux de clic sur un sous-menu, comparé entre ordinateur et mobile. Un écart fort signale une fonction qui dépend trop du survol.
Advalians pilote votre projet en mode AMOA : analyse des pratiques, évaluation des dispositifs et restitution priorisée des chantiers d’interface.
Advalians, cabinet de conseil indépendant en marketing et communication, vous aide à clarifier vos choix et à décider.
Le survol suit la position du pointeur de la souris, sans clic. Le focus désigne l’élément sélectionné au clavier, en général avec la touche de tabulation, et prêt à être activé. Un utilisateur qui navigue au clavier ne déclenche jamais le survol.
Règle de mise en œuvre : chaque effet ou contenu affiché au survol doit aussi l’être au focus. Vérifiez-le en parcourant la page uniquement au clavier. L’élément qui a le focus doit rester visible et recevoir la même indication que l’élément survolé.
Concevez d’abord l’interaction pour le toucher, puis ajoutez le survol comme confort sur les appareils qui le permettent. La requête média hover, définie par la spécification Media Queries de niveau 4, distingue les appareils dont le pointeur principal survole commodément.
Tout contenu affiché au survol sur ordinateur doit être accessible par un appui simple sur mobile. Les sous-menus s’ouvrent alors avec un bouton dédié. Testez sur de vrais appareils : de nombreux mobiles émulent le survol par un appui long, avec des effets imprévisibles.
Mesurez l’action qui suit plutôt que le survol lui-même. Déclarez comme événements les clics sur les liens révélés au survol, puis comparez leur taux entre ordinateur et mobile. Complétez avec une carte de chaleur et quelques séances de test utilisateur, en demandant aux participants de retrouver une information précise.
Si les participants ne la trouvent pas sans aide, sortez cette information du survol. La position du pointeur ne prouve pas l’attention : ne l’utilisez pas seule pour conclure.
Il exige un pointage précis et continu. Une personne dont la main tremble, ou qui agrandit fortement l’écran, voit le menu se refermer dès que le pointeur s’écarte. Le critère 1.4.13 des WCAG 2.2 demande que ce contenu reste affiché pendant le survol et puisse être survolé lui-même sans disparaître.
Prévoyez aussi un bouton qui ouvre le sous-menu au clic ou au clavier, et un délai avant la fermeture. Reprenez enfin les liens du sous-menu sur la page de rubrique, pour offrir un second chemin.
Évitez-le dès que l’action modifie la page de façon notable ou engage l’utilisateur. C’est le cas de la lecture d’une vidéo sonore, d’une fenêtre qui recouvre le contenu, d’un ajout au panier ou d’un envoi de données. Le survol est souvent involontaire : le pointeur traverse la page en chemin vers une autre cible.
Réservez le survol aux retours visuels légers et réversibles, comme une couleur, un soulignement ou un aperçu. Pour tout le reste, attendez un clic ou un appui, c’est-à-dire une intention explicite.
