Avant de commencer l’atelier, il faut préparer votre environnement.
Récupérez le dépôt du workshop :
git clone https://github.com/emma11y/mob-a11y
Puis suivez les instructions du fichier README.md.
Dans le dossier du projet :
npm install
Ensuite, lancer les commandes suivantes sur le terminal :
npm install -D @playwright/test@latest
npx playwright install --with-deps
Pour lancer les tests avec Playwright dans VS Code, vous pouvez aussi installer l'extension Playwright Test for VSCode (Nouvelle fenêtre)
Cet atelier repose sur l’usage d’un lecteur d’écran. Installez-en un selon votre système :
Pour démarrer le lecteur d'écran :
- NVDA :
Ctrl+Alt+N - VoiceOver :
Command + F5 - Orca :
Super + alt + S
Pour quitter le lecteur d'écran
- NVDA :
Ins + Q - VoiceOver :
Command + F5 - Orca :
Super + alt + S
Les raccourcis utiles sont disponibles dans la page ressources.
Pour paramétrer la voix : allez dans Préférences > Parole. Vous pouvez choisir la voix, le débit de parole et le volume. Faites appliquer pour que les changements se fassent.
Pour afficher la visionneuse de paroles (le sous-titrage) : allez dans Outils > Visionneuse de paroles.
Les raccourcis complètes sont disponibles sur Deque : Quick Reference Guide: NVDA for Windows Keyboard Commands (EN - PDF)
Pour paramétrer la voix : allez dans Paramètres > Accessibilité > VoiceOver > Ouvrir l'utilitaire VoiceOver > Parole. Vous pouvez choisir la voix, le débit de parole et le volume.
Les raccourcis complètes sont disponibles sur Deque : Quick Reference Guide: VoiceOver for iOS (EN - PDF)
Vous trouvez des instructionns sur comment lancer Orca (EN)
Vous avez également le tutoriel : Orca screen reader tutorial (EN)
Paramètrage Orca :
CapsLock + espaceTerminal : orca -s
Le lecteur d’écran vocalise en continu. Pour le confort de tout le monde, merci d’utiliser des écouteurs.
Si vous êtes une personne sourde ou malentendante, vous pouvez utiliser la visionneuse de paroles (Outils > Visionneuse de paroles) sur NVDA et le sous-titrage en direct (intégré) avec VoiceOver.
Avant l’atelier, assurez-vous que :
-
le projet se lance correctement
npm run dev -
les tests Playwright peuvent être exécutés
npm run tests -
le lecteur d’écran est fonctionnel
Si vous avez un doute, pas d’inquiétude : nous prendrons quelques minutes en début d’atelier pour vérifier ensemble.
L’atelier est conçu pour être réalisé en mob programming (groupes de 3 à 4 personnes) ou en pair programming (binômes).
Il est tout à fait possible de faire les exercices en solo, mais nous vous recommandons de vous regrouper pour :
- partager vos connaissances
- confronter vos points de vue
- découvrir des compétences que vous ne pensiez pas avoir
Échangez-vous le clavier régulièrement : la personne au clavier ne fait que ce qu'on lui dit et ne prend pas de décision, afin d'assurer la participation de tout le groupe. Si ce n'est pas possible, demandez les idées du groupe avant de donner les vôtres.
Nous serons présentes pour faciliter, répondre à vos questions et vous accompagner.
Les exercices suivent une timebox indicative mais non bloquante.
Des exercices bonus (10 et 11) sont disponibles pour les groupes les plus rapides.
Ce n'est pas grave si vous n'arrivez pas à tout faire, l'important c'est d'apprendre des choses à votre rythme.
À la fin de chaque timebox, si vous en avez besoin :
- nous vérifierons la Definition of Done
- nous corrigerons ensemble le code
- nous rejouerons les tests
- nous testerons avec un lecteur d’écran en live
Des questions ? Levez la main !
Chaque étape du site doit remplir les critères suivants pour être valide :
- Être navigable au clavier
- Être lisible par un lecteur d'écran
- Ne faire remonter aucune erreur dans Axe / Playwright
Vous avez le dossier tests qui vous permet de lancer les tests Playwright.
A chaque exercice, correspond un fichier de tests que nous avons préparé pour vous.
Pour chaque exercice, vous devez résoudre les tests pour qu'ils passent au vert, avant de passer à l'exercice suivant.
- Exercice 01 : Pour commencer doucement : Titres
- Exercice 02 : Contrastes
- Exercice 03 : Bouton ou lien ?
- Exercice 04 : Navigation au clavier
- Exercice 05 : La langue
- Exercice 06 : Les boutons et leurs labels sont-ils explicites ?
- Exercice 07 : Images
- Exercice 08 : La page doit être structurée grâce aux régions
- Exercice 09 : Formulaire
- Exercice 10 : Listes
En bonus :
Pour conclure : le boss final.