Phase 7 — Outils de test et de suivi

Principe clé

« Les tests doivent être faits en continu, pas uniquement à la fin. »

Un problème détecté tôt coûte 10× moins cher à corriger qu'un problème détecté tard. Testez à chaque étape, pas seulement avant la mise en ligne.

Quand tester quoi ?

Phase	Tests à effectuer
Maquette	Contrastes, hiérarchie, navigation
Design	Couleurs accessibles, daltonisme
Développement	Accessibilité, validation HTML/CSS
Intégration	Responsive, performances
Avant mise en ligne	Audit complet + appareils réels (Phase 8)
Après mise en ligne	Analytics, heatmaps, retours utilisateurs

Outils de test (avant mise en ligne)

Contrastes

Outil	Type	URL
WebAIM Contrast Checker ⭐	En ligne	webaim.org/resources/contrastchecker
Contrast Ratio (Lea Verou)	En ligne, supporte transparence	contrast-ratio.com
Colour Contrast Analyser (CCA)	App desktop, pipette	tpgi.com/color-contrast-checker

Simulation du daltonisme

Outil	Usage
Chrome DevTools ⭐	F12 → Cmd/Ctrl+Shift+P → « Emulate vision deficiency »
Coblis	Upload d'image — color-blindness.com/coblis
Stark	Plugin Figma pour tester pendant la conception — getstark.co

Audit d'accessibilité

Outil	Type	Force
WAVE ⭐	Extension Chrome/Firefox	Visuel, comprend les structures — wave.webaim.org
axe DevTools	Extension navigateur	Détaillé, niveau pro — deque.com/axe
Lighthouse	Intégré Chrome DevTools	Score 0-100 sur 4 axes (accessibilité, perf, SEO, PWA)

Performance

Outil	Type	URL
PageSpeed Insights ⭐	En ligne (Google)	pagespeed.web.dev
GTmetrix	En ligne, waterfall détaillé	gtmetrix.com
WebPageTest	Tests depuis différents pays	webpagetest.org

Métriques Web Vitals à connaître

Métrique	Description	Cible
LCP	Largest Contentful Paint	< 2.5s
INP	Interaction to Next Paint (remplace FID en 2024)	< 200ms
CLS	Cumulative Layout Shift	< 0.1
FCP	First Contentful Paint	< 1.8s
TTI	Time to Interactive	< 3.8s

Responsive

Outil	Usage
Chrome DevTools Device Mode ⭐	F12 → 📱 ou Cmd/Ctrl+Shift+M
Responsively App	Voir plusieurs appareils côte à côte — responsively.app
Polypane	Navigateur pro responsive + accessibilité — polypane.app

Appareils de référence à tester

Appareil	Largeur
iPhone SE	375px
iPhone 14/15 Pro	393px
Samsung Galaxy S23	360px
iPad	768px
Desktop standard	1440px

Limitation des simulateurs

Le device mode ne remplace pas les tests sur vrais appareils. Voir Phase 8.

Validation du code

Outil	URL
W3C Markup Validator	validator.w3.org
W3C CSS Validator	jigsaw.w3.org/css-validator

Lecteurs d'écran

Pour comprendre l'expérience des utilisateurs aveugles, testez avec un lecteur d'écran au moins une fois.

Outil	Plateforme	Activation
NVDA ⭐	Windows (gratuit)	nvaccess.org — Ctrl+Alt+N
VoiceOver	Mac / iOS (intégré)	Mac : Cmd+F5 · iOS : Réglages → Accessibilité → VoiceOver
TalkBack	Android (intégré)	Paramètres → Accessibilité → TalkBack

Raccourcis essentiels (NVDA / VoiceOver Mac)

Action	NVDA	VoiceOver (Mac)
Démarrer / arrêter	Ctrl+Alt+N	Cmd+F5
Lire la page	NVDA+↓	VO+A
Naviguer titres	H	VO+Cmd+H
Naviguer liens	K	VO+Cmd+L

Tests automatisés (CI/CD)

Outil	Usage
Pa11y	CLI accessibilité — npm i -g pa11y puis pa11y https://votre-site.com
axe-core	Lib JS pour intégrer dans Cypress / Playwright / Vitest

# Pa11y — exemple
pa11y https://votre-site.com --reporter html > rapport.html

// Cypress + axe-core
import 'cypress-axe';

describe('Accessibilité', () => {
  it('ne doit pas avoir de violations', () => {
    cy.visit('/');
    cy.injectAxe();
    cy.checkA11y();
  });
});

Outils de suivi (après mise en ligne)

Une fois le site en ligne, observer les vrais utilisateurs révèle ce que les tests ne montrent pas : où ils cliquent, où ils décrochent, ce qu'ils comprennent ou non.

Souveraineté des données

Beaucoup d'outils populaires (Google Analytics, Hotjar, Clarity) hébergent vos données aux États-Unis. Pour un projet en Suisse / UE, privilégiez les outils self-hostables ou EU-based.

Analytics

Outil	Type	Souverain	Caractéristique
Plausible ⭐	Open source, self-hostable	✅ EU (Estonie)	Simple, cookieless, RGPD-compliant — plausible.io
Matomo	Open source, self-hostable	✅	Riche (équivalent GA), RGPD — matomo.org
Umami	Open source, self-hostable	✅	Ultra simple, ultra léger — umami.is
GoatCounter	Open source, self-hostable	✅	Minimaliste, gratuit pour < 100k visites — goatcounter.com
PostHog	Open source, self-hostable	✅	Analytics + feature flags + recordings — posthog.com
Google Analytics 4	SaaS Google	❌ US	Le plus utilisé, mais problèmes RGPD (Schrems II)

Pour un projet scolaire ou professionnel en Suisse

Plausible ou Umami : 5 minutes à installer, conformes RGPD, pas de bandeau cookies nécessaire.

Heatmaps et session recording

Visualiser où les utilisateurs cliquent, scrollent, hésitent.

Outil	Type	Souverain	Caractéristique
PostHog	Open source, self-hostable	✅	Recordings + heatmaps inclus avec analytics
Mouseflow	SaaS	✅ EU (Danemark)	Heatmaps + recordings — mouseflow.com
Microsoft Clarity	SaaS, gratuit illimité	❌ US	Heatmaps + recordings + frustrations (rage clicks) — clarity.microsoft.com
Hotjar	Freemium	❌ US	Très populaire, plan gratuit limité — hotjar.com
FullStory	Payant	❌ US	Replay complet, analyse comportementale

Types de visualisations

• Click heatmap — où les utilisateurs cliquent (révèle les éléments perçus comme cliquables alors qu'ils ne le sont pas)
• Scroll heatmap — jusqu'où les gens lisent (révèle si votre CTA est sous le fold)
• Move heatmap — trajectoires de souris (proxy du regard sur desktop)
• Session recording — replay anonymisé d'une visite
• Rage clicks — clics répétés frustrés (révèle les bugs UX)

Eye-tracking et attention

Le vrai eye-tracking en laboratoire (Tobii, EyeLink) reste cher. Plusieurs alternatives accessibles :

Outil	Type	Caractéristique
RealEye	Webcam-based, payant	Eye-tracking via webcam, panel utilisateurs — realeye.io
AttentionInsight	IA prédictive, freemium	Génère une heatmap prédictive sans utilisateurs réels (basée sur des modèles entraînés) — attentioninsight.com
Lookback	Sessions modérées	Voit le visage de l'utilisateur + son écran — lookback.com

Astuce gratuite

Faites le test des 5 secondes ou le test du premier clic (Phase 5) — c'est de l'attention-tracking manuel, mais ça révèle 80% des problèmes pour 0 CHF.

Tests utilisateurs en ligne

Recruter des testeurs sans organiser de session physique.

Outil	Type	Caractéristique
Maze	Freemium	Tests de prototypes Figma, métriques quantitatives — maze.co
Useberry	Freemium	Tests de prototypes + sondages — useberry.com
UserTesting	Payant	Plateforme complète, panel d'utilisateurs sur demande — usertesting.com
Lookback	Payant	Sessions live ou async, modérées ou non

Sondages et feedback

Outil	Souverain	URL
Tally	✅ EU	tally.so — alternative gratuite à Typeform
Typeform	❌ US	typeform.com
LimeSurvey	✅ self-hostable	limesurvey.org

Workflow de test recommandé

Moment	Tests à lancer
À chaque modification	Contraste, navigation clavier, validation HTML
À chaque fonctionnalité	WAVE / axe DevTools, 3 tailles d'écran minimum
Avant mise en ligne	Lighthouse complet, lecteur d'écran, simulateur daltonisme, Phase 8
Après mise en ligne	Analytics actif, heatmap configuré, sondage de satisfaction

Checklist de la Phase 7

Avant mise en ligne

• Outils de contraste utilisés (WebAIM)
• Simulation daltonisme effectuée
• Extension WAVE ou axe lancée
• Lighthouse exécuté (score accessibilité > 90)
• DevTools Device Mode utilisé pour le responsive
• HTML validé (W3C)
• Navigation clavier testée
• Lecteur d'écran testé au moins une fois

Après mise en ligne

• Analytics installé (Plausible, Matomo ou équivalent souverain)
• Heatmap configurée si pertinent (PostHog, Mouseflow, Clarity)
• Sondage de satisfaction prévu après 2-4 semaines
• Web Vitals surveillés (PageSpeed Insights mensuel)

Prochaine étape

Les outils sont identifiés. Passez à la Phase 8 — Tests sur appareils réels pour valider sur de vrais smartphones et ordinateurs.