Guide pratique · Qualité Web
Rendre un site plus rapide, lisible et utilisable par davantage de personnes.
Une méthode concrète pour tester le clavier, les contrastes, les formulaires, les images et les indicateurs de chargement avant que ces défauts ne deviennent des obstacles.
Réponse directe
La qualité technique se mesure dans un parcours complet, pas avec une seule note.
Un site peut obtenir un bon score automatique et rester difficile à utiliser. Le contrôle commence donc par des tâches réelles : ouvrir le menu, comprendre l’offre, parcourir une liste, remplir un formulaire et revenir en arrière, sur téléphone comme au clavier.
Les outils automatiques repèrent une partie des erreurs, tandis que l’essai humain révèle les intitulés ambigus, les zones tactiles trop petites, les informations uniquement visibles par la couleur et les contenus qui changent de place pendant le chargement.
1 · Parcours clavier
Effectuer les actions essentielles sans souris.
Utilisez Tab, Majuscule + Tab, Entrée, Espace et Échap. Le focus doit rester visible, suivre un ordre logique et ne jamais se retrouver prisonnier d’un composant.
Menu et navigation
Ouvrez et fermez le menu, suivez les liens et vérifiez que le focus revient au bouton qui a déclenché l’action.
Formulaires
Chaque champ possède un libellé compréhensible, les erreurs expliquent comment corriger la saisie et le bouton décrit clairement l’envoi.
Composants interactifs
Accordéons, filtres, fenêtres et carrousels restent utilisables au clavier et exposent leur état ouvert, fermé ou sélectionné.
Lien d’évitement
La première tabulation permet d’aller directement au contenu principal sans reparcourir toute la navigation.
2 · Perception et compréhension
Faire porter le sens par la structure et les mots.
Une page accessible ne dépend ni de la couleur seule, ni d’une image contenant le texte principal. Les titres, listes, tableaux et libellés doivent rester compréhensibles lorsqu’ils sont lus dans l’ordre du document.
Titres hiérarchisés
Un titre principal identifie la page ; les niveaux suivants décrivent ses parties sans être choisis uniquement pour leur taille visuelle.
Contrastes utiles
Texte, liens, boutons, contours de champs et indicateur de focus restent distinguables dans les états normal, survolé, actif et désactivé.
Alternatives d’images
Une image informative reçoit une description liée à son rôle ; une image décorative utilise une alternative vide.
Zoom et adaptation
À 200 % de zoom et sur écran étroit, aucun contenu essentiel ne disparaît derrière un bloc fixe ou un défilement horizontal inutile.
3 · Chargement et stabilité
Relier les Core Web Vitals à ce que le visiteur ressent.
Le LCP observe l’affichage du contenu principal, l’INP la réactivité aux interactions et le CLS la stabilité visuelle. Les données de terrain restent plus représentatives que le résultat isolé d’un test en laboratoire.
LCP
Allégez et priorisez l’image ou le bloc principal, limitez les ressources qui retardent son affichage et vérifiez la réponse du serveur.
INP
Réduisez les scripts coûteux, fractionnez les longues tâches et donnez un retour immédiat après une action sur un filtre, un menu ou un formulaire.
CLS
Réservez les dimensions des images, publicités et composants dynamiques afin que le contenu ne se décale pas pendant la lecture.
Mesure continue
Comparez plusieurs types de pages, appareils et connexions ; une page d’accueil rapide ne garantit pas un annuaire ou un formulaire rapide.
4 · Images et polices
Réduire les octets sans dégrader la preuve visuelle.
La variante servie doit correspondre à l’espace réellement occupé. Les dimensions HTML évitent les déplacements, le chargement différé protège le premier écran et les formats modernes réduisent le transfert.
Plusieurs largeurs
Préparez des fichiers pour mobile, tablette et grand écran, puis laissez le navigateur choisir avec srcset et sizes.
Image principale prioritaire
Ne chargez pas paresseusement l’élément visuel majeur du premier écran ; préchargez-le seulement lorsqu’il est réellement déterminant.
Médias hors écran différés
Les images éditoriales situées plus bas utilisent loading="lazy" et conservent malgré tout largeur et hauteur.
Polices maîtrisées
Limitez familles et graisses, privilégiez les fontes système ou auto-hébergées et évitez de bloquer l’affichage du texte.
5 · Recette
Valider avec une matrice courte et reproductible.
Conservez la liste des pages représentatives, les scénarios testés, la date et le résultat. Un contrôle après chaque évolution importante évite le retour silencieux d’un défaut déjà corrigé.
Pages types
Testez au minimum accueil, service, article, liste filtrable, fiche détaillée, contact, page locale et erreur 404.
Tailles d’écran
Contrôlez un petit téléphone, un écran intermédiaire et un poste large, en orientation verticale puis horizontale si l’usage le justifie.
Technologies d’assistance
Ajoutez au moins un essai avec lecteur d’écran et un parcours intégral au clavier aux contrôles automatiques.
Résultats exploitables
Décrivez chaque défaut avec sa page, son impact, les étapes de reproduction et le critère de validation attendu.
Références
Sources officielles utilisées pour maintenir ce guide.
Les règles et fonctionnalités évoluent. Consultez la documentation primaire avant toute décision sensible ou modification importante d’un compte tiers.
- W3C WAIWCAG 2.2 et ressources de mise en œuvre
- web.devCore Web Vitals
- Google Search CentralBonnes pratiques pour les images
Poursuivre
Relier ce contrôle aux pages et actions complémentaires.
Besoin d’un contrôle appliqué
Transformer ce guide en priorités adaptées à votre site.
Indiquez l’adresse du site, l’activité, la commune et le parcours qui compte le plus. L’analyse distinguera les blocages, les améliorations utiles et les éléments déjà solides.
Questions fréquentes
Un score Lighthouse élevé prouve-t-il qu’un site est accessible ?
Non. Il confirme certains contrôles automatiques dans un contexte donné. La compréhension, l’ordre du focus, la pertinence des libellés et plusieurs usages avec une technologie d’assistance nécessitent un examen humain.
Faut-il viser le niveau AAA des WCAG 2.2 partout ?
Le niveau à atteindre dépend du contexte et des obligations applicables. Dans tous les cas, les critères A et AA constituent une base de travail courante, complétée par les besoins réels des utilisateurs.
Les Core Web Vitals influencent-ils seuls le référencement ?
Non. Ils décrivent une partie de l’expérience de page. La pertinence, l’utilité, la qualité du contenu, l’indexabilité et de nombreux autres signaux restent déterminants.
À quelle fréquence refaire les tests ?
Après une refonte, un changement de navigation, l’ajout d’un outil tiers ou d’un grand volume de médias, puis régulièrement sur un échantillon de pages représentatives.