Recette visuelle : colonnes, textes et photos sur tous les écrans
Une page sans débordement peut rester difficile à lire. Cette méthode vérifie les proportions, les contenus longs et les interactions avant de publier une modification.
Six contrôles à reproduire
Choisir les bonnes pages
Tester accueil, catégorie, article, service, formulaire et tableau. Inclure un titre long, une langue de droite à gauche et une page riche en photos.
Comparer les colonnes
Examiner les largeurs 320, 390, 768, 1280, 1440 et 1920 px. Vérifier alignements, ordre de lecture et espaces entre les blocs, sans masquer les erreurs avec un débordement caché.
Agrandir le texte
Contrôler le texte à 200 %, puis le réagencement à une largeur de 320 pixels CSS. Les informations et commandes doivent rester accessibles ; les tableaux peuvent avoir leur propre défilement.
Contrôler les photos
Vérifier cadrage, sujet, dimensions et crédit. Une photo ne doit pas s’étirer avec la hauteur du texte voisin. Décrire ce qui est visible et identifier les photos de banque d’images.
Exercer les interactions
Utiliser le clavier pour les menus, filtres, FAQ et formulaires. Vérifier focus visible, messages d’erreur et conservation des données lors d’une erreur, sans envoyer de demande réelle.
Conserver les preuves
Noter URL, langue, largeur, navigateur, problème et résultat après correction. Compléter les mesures de laboratoire par les données réelles lorsque le trafic permet une analyse fiable.
Fiche de recette à conserver
- URL et langue
- Écran et niveau de zoom
- Défaut observé et capture
- Correction et résultat du nouveau contrôle
Cette fiche est une méthode de travail, pas une attestation de conformité. Adapter le périmètre et documenter les exceptions.
Avant publication : six contrôles fonctionnels
- Parcourir les menus, liens, téléchargements et changements de langue ; vérifier la destination réelle.
- Saisir des données fictives : champs vides, adresses invalides, accents et textes longs.
- Vérifier que les erreurs nomment le champ, restent lisibles au clavier et conservent la saisie utile.
- Tester aussi la validation côté serveur : les contrôles du navigateur peuvent être contournés.
- Séparer accusé de réception et livraison effective ; utiliser une destination de test autorisée.
- Contrôler les états sans JavaScript, les refus et les reprises ; ne pas enregistrer de secrets dans les preuves.
Situations et contrôles à choisir
Sur petit écran, faites défiler le tableau horizontalement. Au clavier, placez le focus sur le tableau puis utilisez les flèches.
| Situation | Ce que cela indique | Vérification utile |
|---|---|---|
| Une commande disparaît avec le texte agrandi à 200 %. | La tâche ne reste pas accessible après agrandissement. | Adapter la mise en page puis retester au clavier. |
| Une photo s'étire ou laisse un grand vide sur ordinateur. | Ses proportions déséquilibrent le contenu voisin. | Vérifier ses contraintes de taille et l'ordre de lecture. |
| Un tableau est coupé par overflow: hidden. | Des données sont masquées. | Prévoir un défilement propre au tableau, accessible au clavier, et des cellules qui se replient. |
| Un titre traduit est tronqué dans une autre langue. | Le contrôle d'une seule langue est insuffisant. | Tester les textes longs, les langues RTL et le changement de langue réel. |
Exemple fictif
Une page de service fictive paraît correcte à 1 440 pixels. À 320 pixels, son long titre traduit est coupé ; avec le texte agrandi à 200 %, une commande de FAQ devient inaccessible.
Limiter la taille de la photo, permettre aux colonnes de se réduire et aux textes de revenir à la ligne. Rejouer le parcours à 320, 390, 768 et 1 440 pixels, avec agrandissement du texte et navigation au clavier. Consigner les défauts restants et refaire les contrôles après correction.
Critères de validation
- Les informations et commandes sont lisibles aux largeurs et dans les langues représentatives.
- L'agrandissement du texte et le clavier permettent toujours d'accomplir la tâche.
- La version, le navigateur, la langue et les résultats du nouveau contrôle sont consignés.
Questions pratiques
Une capture suffit-elle ?
Non. Une capture valide un état précis. Tester aussi les contenus longs, la navigation au clavier et les états ouverts, filtrés ou en erreur.
Faut-il imposer une taille universelle de police ?
Non. Comparer lisibilité, longueur des lignes, zoom et contraste. Une taille seule ne garantit ni accessibilité ni équilibre visuel.
Comment interpréter les Core Web Vitals ?
Les seuils de bonne expérience sont LCP ≤ 2,5 s, INP ≤ 200 ms et CLS ≤ 0,1 au 75e percentile. Ils évaluent chargement, interaction et stabilité ; ils ne remplacent pas une recette visuelle.
Faut-il une capture pour chaque appareil possible ?
Choisissez les grandes familles de pages, les parcours utiles et les navigateurs où des différences sont observées. Notez les limites de cette couverture : quelques captures ne prouvent pas que tout appareil fonctionne.
Comment prioriser les corrections d'affichage ?
Corrigez d'abord les tâches bloquées, les données cachées et la lisibilité. Traitez ensuite les proportions, alignements et espacements, en vérifiant que chaque correction conserve le fonctionnement des autres pages.