Phase 7 — Outils de test

Principe clé

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

Intégrez les tests dès le début de votre projet. Un problème détecté tôt coûte 10× moins cher à corriger qu'un problème détecté tard.

Quand tester ?

Phase	Tests à effectuer
Maquette	Contrastes, hiérarchie, navigation
Design	Couleurs accessibles, daltonisme
Développement	Accessibilité, validation HTML
Intégration	Responsive, performances
Mise en ligne	Tests complets sur vrais appareils

Outils par catégorie

---

1. Tests de contraste

WebAIM Contrast Checker

Le plus utilisé pour vérifier les ratios de contraste WCAG.

Caractéristique	Détail
URL	webaim.org/resources/contrastchecker
Type	En ligne (gratuit)
Usage	Entrer 2 couleurs → obtenir le ratio

Comment l'utiliser :

1. Entrez la couleur du texte (ex: #333333)
2. Entrez la couleur de fond (ex: #FFFFFF)
3. Lisez le ratio et la conformité WCAG

Contrast Ratio by Lea Verou

Interface minimaliste et élégante.

Caractéristique	Détail
URL	contrast-ratio.com
Type	En ligne (gratuit)
Avantage	Supporte les couleurs avec transparence

Colour Contrast Analyser (CCA)

Application de bureau pour des tests plus avancés.

Caractéristique	Détail
URL	tpgi.com/color-contrast-checker
Type	Application (gratuit)
Plateformes	Windows, Mac
Avantage	Pipette pour sélectionner des couleurs à l'écran

---

2. Simulation du daltonisme

Coblis

Simulateur de daltonisme en ligne.

Caractéristique	Détail
URL	color-blindness.com/coblis
Type	En ligne (gratuit)
Usage	Uploadez une image ou capture d'écran

Types simulés :

• Deutéranopie (vert)
• Protanopie (rouge)
• Tritanopie (bleu)
• Achromatopsie (gris)

Chrome DevTools

Intégré directement dans le navigateur Chrome.

Comment l'utiliser :

1. Ouvrez DevTools (F12)
2. Appuyez sur Ctrl+Shift+P (ou Cmd+Shift+P sur Mac)
3. Tapez "Emulate vision deficiency"
4. Sélectionnez le type de daltonisme

Type	Dans DevTools
Deutéranopie	"Deuteranopia"
Protanopie	"Protanopia"
Tritanopie	"Tritanopia"
Achromatopsie	"Achromatopsia"

Stark (Extension Figma)

Pour tester directement dans vos maquettes Figma.

Caractéristique	Détail
URL	getstark.co
Type	Plugin Figma (gratuit/payant)
Avantage	Test pendant la conception

---

3. Tests d'accessibilité

WAVE (Web Accessibility Evaluation Tool)

Outil complet d'analyse d'accessibilité.

Caractéristique	Détail
URL	wave.webaim.org
Type	En ligne + extension navigateur
Navigateurs	Chrome, Firefox, Edge

Ce qu'il détecte :

• Erreurs d'accessibilité
• Alertes (problèmes potentiels)
• Éléments structurels (titres, landmarks)
• Contrastes
• Textes alternatifs manquants

axe DevTools

Extension professionnelle utilisée par les experts.

Caractéristique	Détail
URL	deque.com/axe
Type	Extension navigateur
Navigateurs	Chrome, Firefox, Edge
Niveau	Détaillé, pour développeurs

Comment l'utiliser :

1. Installez l'extension
2. Ouvrez DevTools → onglet "axe DevTools"
3. Cliquez "Scan ALL of my page"
4. Analysez les résultats

Lighthouse

Intégré dans Chrome, analyse plusieurs critères.

Caractéristique	Détail
Accès	DevTools → onglet "Lighthouse"
Analyse	Accessibilité, Performance, SEO, PWA
Score	0-100 par catégorie

Comment l'utiliser :

1. Ouvrez DevTools (F12)
2. Allez dans l'onglet "Lighthouse"
3. Cochez "Accessibility"
4. Cliquez "Analyze page load"

---

4. Tests de performance

PageSpeed Insights

Outil Google pour les performances.

Caractéristique	Détail
URL	pagespeed.web.dev
Type	En ligne (gratuit)
Données	Réelles (Chrome UX Report) + simulées

Métriques importantes :

Métrique	Description	Objectif
LCP	Largest Contentful Paint	< 2.5s
FID	First Input Delay	< 100ms
CLS	Cumulative Layout Shift	< 0.1
FCP	First Contentful Paint	< 1.8s
TTI	Time to Interactive	< 3.8s

GTmetrix

Analyse détaillée avec historique.

Caractéristique	Détail
URL	gtmetrix.com
Type	En ligne (gratuit/payant)
Avantage	Waterfall détaillé, historique

WebPageTest

Tests avancés depuis différentes localisations.

Caractéristique	Détail
URL	webpagetest.org
Type	En ligne (gratuit)
Avantage	Tests depuis différents pays, connexions

---

5. Tests responsive

Chrome DevTools Device Mode

Simulateur intégré dans Chrome.

Comment l'utiliser :

1. Ouvrez DevTools (F12)
2. Cliquez sur l'icône 📱 "Toggle device toolbar" (ou Ctrl+Shift+M)
3. Sélectionnez un appareil ou entrez des dimensions

Appareils populaires :

Appareil	Largeur	Ratio
iPhone SE	375px	2x
iPhone 12/13	390px	3x
iPhone 14 Pro Max	430px	3x
Samsung Galaxy S21	360px	3x
iPad	768px	2x
iPad Pro	1024px	2x

Limitation

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

Responsively App

Application desktop pour voir plusieurs tailles simultanément.

Caractéristique	Détail
URL	responsively.app
Type	Application desktop (gratuit)
Plateformes	Windows, Mac, Linux
Avantage	Voir plusieurs appareils côte à côte

Polypane

Navigateur professionnel pour le responsive.

Caractéristique	Détail
URL	polypane.app
Type	Application (payant, essai gratuit)
Avantage	Outils intégrés accessibilité + responsive

---

6. Validation du code

W3C Markup Validator

Validateur HTML officiel.

Caractéristique	Détail
URL	validator.w3.org
Type	En ligne (gratuit)
Usage	Coller URL ou code HTML

Erreurs communes :

• Balises non fermées
• Attributs invalides
• Structure incorrecte
• ID dupliqués

W3C CSS Validator

Validateur CSS officiel.

Caractéristique	Détail
URL	jigsaw.w3.org/css-validator
Type	En ligne (gratuit)

---

7. Lecteurs d'écran

Pour comprendre l'expérience des utilisateurs aveugles.

NVDA (Windows)

Lecteur d'écran gratuit et populaire.

Caractéristique	Détail
URL	nvaccess.org
Type	Application (gratuit)
Plateforme	Windows

VoiceOver (Mac/iOS)

Intégré aux appareils Apple.

Activer sur Mac : Cmd + F5Activer sur iOS : Réglages → Accessibilité → VoiceOver

Raccourcis de test rapide

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

---

8. Tests automatisés

Pa11y

Outil en ligne de commande pour l'accessibilité.

# Installation
npm install -g pa11y

# Utilisation
pa11y https://votre-site.com

# Avec rapport HTML
pa11y https://votre-site.com --reporter html > rapport.html

Axe-core

Bibliothèque pour intégrer les tests dans votre CI/CD.

// Avec Cypress
import 'cypress-axe';

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

---

Tableau récapitulatif des outils

Catégorie	Outil recommandé	Type	Gratuit
Contraste	WebAIM Contrast Checker	En ligne	✅
Daltonisme	Chrome DevTools	Navigateur	✅
Accessibilité	WAVE	Extension	✅
Performance	Lighthouse	Navigateur	✅
Responsive	Chrome DevTools	Navigateur	✅
Validation HTML	W3C Validator	En ligne	✅
Lecteur d'écran	NVDA / VoiceOver	Application	✅

Workflow de test recommandé

À chaque modification

1. Vérifier le contraste des nouvelles couleurs
2. Tester la navigation clavier
3. Valider le HTML

À chaque fonctionnalité

1. Lancer WAVE ou axe DevTools
2. Corriger les erreurs
3. Tester sur 3 tailles d'écran minimum

Avant mise en ligne

1. Audit Lighthouse complet
2. Test avec lecteur d'écran
3. Test sur vrais appareils (voir Phase 8)
4. Simulation daltonisme
5. Validation W3C

Checklist de la Phase 7

Avant de passer à la phase suivante, vérifiez :

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

Prochaine étape

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