Avant de livrer ton front
Une interface qui tient au-delà de la démo.
Pour relire une interface, y compris générée avec l’IA. Neuf points à vérifier sur un vrai parcours : note ce que tu as testé, ce qui bloque et ce que tu acceptes de livrer.
Tes réponses restent dans cette page. Elles ne sont ni envoyées ni enregistrées automatiquement. Télécharge ton travail avant de fermer ou de recharger la page.
0 / 9 réponses renseignées
Note l’URL, la version, le navigateur et les étapes, du point de départ au résultat attendu. Utilise des données de test.
Exemple fictif : un formulaire de réservation
Préproduction, version abc123, Edge sur Windows. Choisir un créneau → saisir ses coordonnées de test → confirmer → retrouver la réservation.
Fais réellement l’action finale. Vérifie aussi retour arrière, rechargement et accès direct à l’URL. Note attendu / observé / étapes pour reproduire.
Exemple fictif : un formulaire de réservation
Après rechargement, le récapitulatif affiche encore les informations de la réservation. Au retour arrière, le créneau reste sélectionné.
Simule un réseau lent, une requête qui échoue et un résultat vide. Vérifie le message, la conservation des saisies et la possibilité de réessayer.
Exemple fictif : un formulaire de réservation
Réseau coupé à la confirmation : les saisies restent présentes et un bouton permet de réessayer. Aucun faux message de succès.
Teste une largeur de 320 px, ton téléphone avec son clavier ouvert et un zoom navigateur à 200 %. Cherche les contenus coupés, actions masquées et défilements horizontaux gênants.
Exemple fictif : un formulaire de réservation
À 320 px, la date tient sur plusieurs lignes. Avec le clavier ouvert, je peux atteindre le message d’erreur et le bouton.
Utilise Tab, Maj + Tab, Entrée et Échap selon les contrôles. Suis le focus visible. Vérifie l’ordre, la fermeture des fenêtres et le retour du focus.
Exemple fictif : un formulaire de réservation
Je sélectionne un créneau sans souris. Échap ferme la fenêtre et le focus revient au bouton qui l’a ouverte.
Vérifie les labels associés aux champs, les erreurs qui expliquent comment corriger, les alternatives des images utiles et les contrastes. Une couleur seule ne doit pas porter une information.
Exemple fictif : un formulaire de réservation
« Adresse e-mail invalide : utilise le format nom@exemple.fr » est associé au champ. Le champ n’est pas seulement encadré en rouge.
Avec des comptes de test, vérifie que le serveur contrôle l’accès aux données. Cherche les secrets exposés dans le front et les données personnelles inutiles dans les logs. Vérifie les effets d’un double clic.
Exemple fictif : un formulaire de réservation
Un compte de test ne peut pas lire la réservation d’un autre. Un double clic ne crée pas deux réservations. Aucun jeton privé dans le code livré.
Relis console et requêtes réseau, lance les tests utiles et un outil d’accessibilité. Note les erreurs, images trop lourdes et limites de ce que tu as testé. Un score automatique ne suffit pas.
Exemple fictif : un formulaire de réservation
Tests du formulaire réussis. Une image de 3 Mo ralentit le mobile : à compresser. Navigation clavier vérifiée ; lecteur d’écran pas encore testé.
Choisis : livrer / corriger puis retester / demander un avis. Classe les défauts par impact. Pour chaque blocage : étape, attendu, observé et correction à vérifier.
Exemple fictif : un formulaire de réservation
Corriger puis retester : sur mobile, le bouton reste masqué par le clavier. Rejouer le parcours complet après correction. La compression de l’image est aussi prévue avant livraison.
Avant d’utiliser ton résultat
- Les points non testés sont nommés.
- Chaque blocage a des étapes de reproduction.
- Cette revue ciblée ne remplace pas un audit complet d’accessibilité ou de sécurité.
Ton prochain pas
Corrige d’abord ce qui empêche d’accomplir le parcours ou expose des données. Rejoue les étapes après correction, puis conserve cette fiche avec la version livrée.