Votre site a mieux à faire que vous faire attendre. Découvrir PageSpeed.fr
Expérience utilisateur

Les états hover et focus font partie de la recette CSS

Une optimisation de styles doit conserver les indications d’interaction.

Les mots utiles, en clair
CSS : présentation
Les règles qui définissent les couleurs, les tailles et la disposition de votre page.

Tester au-delà de la page au repos

Un bouton, un lien ou une carte peut changer d’apparence au survol, au focus ou pendant l’activation. Les règles correspondantes peuvent sembler inutilisées dans une capture initiale. Leur suppression peut retirer des indices essentiels sans changer fortement la première image de la page.

Adapter les attentes au dispositif

Le survol n’existe pas de la même manière sur tous les appareils. Une information indispensable ne doit pas être accessible uniquement par ce geste. Vérifiez les menus, infobulles et actions secondaires au toucher et au clavier.

Conserver une cohérence graphique

Les états doivent rester distinguables sur les différents fonds et ne pas déplacer brutalement les éléments. Une bordure ajoutée ou un texte grossi peut modifier la géométrie si la place n’a pas été prévue. Incluez ces petites transitions dans la comparaison avant et après une optimisation CSS. Contrôlez particulièrement les liens placés dans des zones cliquables plus grandes, afin que l’indication visuelle corresponde à l’action réellement disponible.

Pour aller à la source

Besoin d’aide pour votre site ? Retrouvez les conseils d’installation et de compatibilité dans notre centre d’aide.
Votre prochaine étape

Et si votre site
passait la seconde ?

Essayez, comparez, gardez la main. Vous pouvez désactiver ou supprimer l’extension à tout moment pour retrouver le fonctionnement habituel de votre site.

Accélérer mon siteMesurer mon site