Aller au contenu
PROJET WEB DYNAMIQUE

Testing & Outils

Chapitre 5 : Testing & Outils — La minute de vérité 🕵️‍♂️

Vous avez fini votre feature. Le code compile. Le design claque.

Mais est-ce que votre site est vraiment accessible, ou est-ce que vous vous êtes juste donné bonne conscience ?

Il existe 3 niveaux de test. Ne sautez pas les étapes.

Slides

https://gamma.app/docs/Chapitre-5-Testing-Outils--e0u0sl4aozb2806

Niveau 1 : Les Robots (Tests Automatisés) 🤖

C'est le filet de sécurité de base. Ça attrape les erreurs bêtes (contraste, balises manquantes, attributs ARIA invalides).

Attention : Un score de 100% ne veut pas dire que votre site est parfait. Les robots ne comprennent pas le contexte. Ils ne savent pas si votre texte alternatif décrit bien l'image ou si c'est juste "image.jpg".

1. Google Lighthouse (Intégré à Chrome)

Pas besoin d'installer quoi que ce soit.

  1. Ouvrez les DevTools (F12).

  2. Onglet Lighthouse.

  3. Cochez Accessibility (et décochez le reste pour aller vite).

  4. Cliquez sur Analyze page load.

💡 Note pour Inertia : Lighthouse analyse le DOM après le chargement du JS. C'est parfait pour nos SPAs Vue.js.

2. WAVE (Extension)

C'est moche, ça injecte des icônes partout sur votre site, mais c'est génial.

WAVE vous montre visuellement où sont les erreurs.

  • 🟥 Rouge : Erreur critique (Contraste, Label manquant).

  • 🟨 Jaune : Alerte (Vérifiez si c'est logique).

  • 🟩 Vert : Feature d'accessibilité détectée.

🔗 Télécharger : WAVE Browser Extension

Wave Report

https://wave.webaim.org/report#/https://llm.choboai.com/

Niveau 2 : Le "No Mouse Challenge" (Manuel) ⌨️

C'est le test le plus révélateur et le plus simple à faire.

La règle : Débranchez votre souris (ou mettez-la loin). Essayez d'utiliser votre feature.

La Checklist de survie :

  • [ ] Focus Visible : Voyez-vous toujours où vous êtes ? (Le petit encadré bleu ou noir autour des boutons). Si ça disparaît, vous êtes perdu.

  • [ ] Ordre logique : Le focus passe-t-il du Nom au Prénom, ou saute-t-il aléatoirement ?

  • [ ] Interactions : Pouvez-vous ouvrir le menu avec Entrée ? Pouvez-vous fermer la modale avec Echap ?

  • [ ] Formulaires : Pouvez-vous soumettre le formulaire sans toucher à la souris ?

Si vous bloquez, vos utilisateurs bloqueront. Réparez ça avant d'aller plus loin.

Shutterstock

Niveau 3 : Le Boss Final (Lecteur d'Écran) 🕶️

C'est l'étape qui fait peur, mais qui est nécessaire.

Mettez-vous dans la peau d'un utilisateur aveugle. Vraiment.

L'équipement

  • Mac : Command + F5 active VoiceOver. C'est natif, c'est excellent.

  • Windows : Installez NVDA (Gratuit et Open Source).

Le Test Rapide

  1. Fermez les yeux (ou éteignez l'écran si vous êtes hardcore).

  2. Lancez le lecteur.

  3. Naviguez sur votre page "Créer une maison".

  4. Écoutez :

    • Est-ce qu'il annonce "Titre de la page" quand vous arrivez ?

    • Est-ce qu'il dit "Titre, édition obligatoire" sur l'input ?

    • Est-ce qu'il lit l'erreur quand vous validez vide ?

⚠️ Attention au choc : La première fois, ça parle vite et c'est le chaos. C'est normal. Ne paniquez pas. Cherchez juste à comprendre si l'information essentielle est transmise.

Synthèse

gemini_generated_image_j2kwb0j2kwb0j2kw (1)