Pourquoi cacher un contenu sur votre page web ?

Souvent pour une mauvaise raison, mais la réponse la plus pertinente à cette question serait par nécessité de placer plus en avant d'autres contenus que celui que vous comptez cacher. Bien entendu d'autres questions se posent autour de la pertinence de la présence d'un tel élément sur votre page, mais admettons, c'est possible.

"Sur le site machinbidule.com ils ont un effet sympa au survol, on veut la même chose sur notre page d'accueil"
— un client

Ah oui ! Donc en fait vous voulez un truc sans savoir ce qu'il va apporter à votre site web ?
Je vous préviens tout de suite : ça ne peut pas (bien) marcher comme cela !

Votre site ou votre page web, doit répondre à une problèmatique précise et apporter une solution unique. Prendre un bout d'un truc que vous aimez sur un autre site, c'est comme mettre du ruban adhésif sur une écorchure sous prétexte que le mec d'à côté a solutionné son problème de feuilles volantes de la sorte, c'est une solution qui ne répond pas à votre problème

Pourquoi un contrôle au survol n'est pas conseillé ?

En quelques mots, voici une liste des spécifités à prévoir lorsqu'on se lance dans une solution "au survol" :

• les utilisateurs "claviers", par choix ou obligation, sont ceux qui n'utilisent pas la souris pour naviguer. Il faut prévoir un développement spécifique plus précis pour les prendre en charge.
• les utilisateurs "tactiles", par exemple les utilisateurs de smartphones ou tablettes, n'ont pas par défaut de vraie action "hover", les iOS arrivent a peu près à le simuler, les Android beaucoup moins déjà. Un développement spécifique est à prévoir ici aussi.
• les utilisateurs de lecteur d'écran : la plupart des scripts qui font apparaître un contenu au survol utilisent un moyen technique qui cache le contenu aux lecteurs d'écran. Ce contenu devient donc inaccessible.

Aviez-vous pensé à tout cela ? Non ? Alors ne mettez pas en place un contrôle au survol si vous n'en maitrisez pas les tenants et aboutissants.

Comment certains utilisateurs voient ce type de contenu

Vous avez l'habitude d'utiliser la souris ? Alors inversons les rôles : les utilisateurs de clavier ou de smartphones/tablettes peuvent accéder au contenu suivant (focus ou touch), vous, utilisateurs de souris peut-être…

Quelques exemples types

Voici en quelques mots les fonctionnalités souvent très mal codées ou conçues qui dépendent de l'utilisation d'une souris.

• les menus déroulants
• les mega menus
• les infobulles (tooltips)
• les légendes photos qui apparaissent au survol
• une photo complémentaire d'un produit qui apparait au survol
• les zoom box produit (exemple)
• et bien d'autres qui se limitent uniquement au survol

Ok, et quelles solutions ?

Il faut penser à un maximum des particularités mentionnées précédemment ("touch", navigation clavier, lecteurs d'écran) et voir ce qui se fait du côté des solutions accessibles.

Adobe par exemple a travaillé sur un Mega Menu Accessible. Il suffit de chercher un peu… :)

Si vous concevez vous-même votre site web, prenez un peu de temps pour y réfléchir. Si vous le faites faire par un professionnel, demandez-lui comment il a l'habitude de procéder à ce niveau.

Autrement préférez simplement un contrôle au clic, ça a souvent le mérite d'être davantage fonctionnel.