Firefox : accessibilité ouverte - Orienté développeur

Présentation effectuée au meetup A11Y Lutece 2026 par Christophe Villeneuve sur "Firefox : accessibilité ouverte (Orienté développeur)".
Cette session vous aidera à valider vos pages web en accessibilité rapidement et la possibilité d'utilisé des extensions pour valider celle-ci en mode avancé. Par ailleurs, d'autres informations pertinentes sont disponible que vous pouvez découvrir dans le navigateur Firefox

Transcript

1. Firefox : accessibilité ouverte (orienté développeur) Christophe Villeneuve 7 avril 2026 @hellosct1.bsky.social @hellosct1 @hellosct1@mamot.fr
2. Atos open source - afup – lemug.fr – mariadb – drupal – mozilla - firefox – lemugfr - sumo – webextensions – VR – AR – XR - Cause commune 93.1 FM - TechSpeaker - Lizard - eyrolles – editions eni – programmez – linux pratique – webriver – elephpant - CommonVoice – Sécurité - Cybersécurité Christophe Villeneuve • Consultant Open Source • Dresseur animaux
3. @hellosct1 – Meetup A11Y Lutèce #4 - 2026 Aujourd’hui • Un super outil • Validation rapide • Validation avancée • Bonnes pratiques
4. @hellosct1 – Meetup A11Y Lutèce #4 - 2026 • Un super outil • Validation rapide • Validation avancée • Bonnes pratiques
5. @hellosct1 – Meetup A11Y Lutèce #4 - 2026 Super outil ? Firefox • L’un des navigateurs – les plus puissants pour les tests d'accessibilité. • Des outils de développement intégrés • Nombreuses options : → pour vérifier vos sites Web pour les problèmes d'accessibilité
6. @hellosct1 – Meetup A11Y Lutèce #4 - 2026 Contast • Problèmes d’accessibilité les plus courants ? • Rapport WebAIM Million : 1 - Problèmes de contraste de couleur sont toujours les problèmes les plus courants. 2 - Les textes ALT manquants 3 - Les étiquettes de formulaire manquantes 4 - Structures de titre illogiques • Rapport WebAIM Million 2026 – Web Coding avec IA… catastrophe
7. @hellosct1 – Meetup A11Y Lutèce #4 - 2026 Par où commencer ? • Avec Firefox – Fonctions de test pratiques en un coup d'œil • C’est à dire : – La fonction "Rechercher des problèmes" – Il vérifie automatiquement: • Problèmes de contraste de couleur • Problèmes de navigation au clavier • Problèmes d'étiquette de formulaire
8. @hellosct1 – Meetup A11Y Lutèce #4 - 2026 • Un super outil • Validation rapide • Validation avancée
9. @hellosct1 – Meetup A11Y Lutèce #4 - 2026 Lien accessibilité : du contenu de la page • A partir des DevTools – Au clavier [F12] – Un onglet accessibilité est disponible • Choisir l’onglet Accessibilité • L’accès peut se faire : – L'inspecteur accessibilité • Au clavier – [CTRL] + [SHIFT] + [I]
10. @hellosct1 – Meetup A11Y Lutèce #4 - 2026 A partir du contenu de la page web • L'onglet accessibilité – Au clavier : [SHIFT]+[F10] – Puis sélectionner la ligne Inspecter les propriétés d’accessibilité https://firefox-source-docs.mozilla.org/devtools-user/accessibility_inspector/
11. @hellosct1 – Meetup A11Y Lutèce #4 - 2026 A partir de l’inspecteur des DevTools • L'onglet Inspecteur – Choisir un élément – Clic droit ou [SHIFT]+[F10] – Choisir la ligne ‘Afficher les propriétés d’accessibilité’
12. @hellosct1 – Meetup A11Y Lutèce #4 - 2026 Identifiés les problèmes (1/4) • DevTools > Accessibilité > Recherche de problèmes pour… – Constraste – Clavier – Etiquettes de texte
13. @hellosct1 – Meetup A11Y Lutèce #4 - 2026 Identifiés les problèmes (2/4) : contraste • DevTools > Accessibilité > Recherche de problèmes pour ‘contraste’ En savoir plus : https://developer.mozilla.org/fr/docs/Web/Accessibility/Guides/Understanding_WCAG/Perceivable/Color_contrast
14. @hellosct1 – Meetup A11Y Lutèce #4 - 2026 Identifiés les problèmes (3/4) : clavier • DevTools > Accessibilité > Recherche de problèmes pour ‘clavier’ En savoir plus :
15. @hellosct1 – Meetup A11Y Lutèce #4 - 2026 Identifiés les problèmes (4/4) : Etiquettes de texte • DevTools > Accessibilité > Recherche de problèmes ‘Etiquettes de texte’ En savoir plus : https://developer.mozilla.org/fr/docs/Web/Accessibility/Guides/Understanding_WCAG/Text_labels_and_names#Interactive_ele ments_must_be_labeled
16. @hellosct1 – Meetup A11Y Lutèce #4 - 2026 Simulation des couleurs https://firefox-source-docs.mozilla.org/devtools-user/accessibility_inspector/simulation/
17. @hellosct1 – Meetup A11Y Lutèce #4 - 2026 Navigation par clavier • DevTools > Accessibilité > Afficher l’odre de tabulation
18. @hellosct1 – Meetup A11Y Lutèce #4 - 2026 Vue Adaptive ou [CTRL] + [SHIFT] + [M] • Devtools >
19. @hellosct1 – Meetup A11Y Lutèce #4 - 2026 Zoom un bloc de contenu (1/2) • Sélectionner un élément
20. @hellosct1 – Meetup A11Y Lutèce #4 - 2026 Zoom un bloc de contenu (2/2) • Activé et choisir la propriété « Polices » – Bloc de droite à partir des DevTools
21. @hellosct1 – Meetup A11Y Lutèce #4 - 2026 DEMO
22. @hellosct1 – Meetup A11Y Lutèce #4 - 2026 • Un super outil • Validation rapide • Validation avancée • Bonnes pratiques
23. @hellosct1 – Meetup A11Y Lutèce #4 - 2026 Avoir Besoins d’extensions supplémentaires ? • Firefox couvre les besoins • Possible d’avoir un mode avancé avec les extensions : – Perspectives supplémentaires – Tests automatisés
24. @hellosct1 – Meetup A11Y Lutèce #4 - 2026 Webhint (1/2) • Vérifie les bonnes pratiques et les erreurs courantes : – Accessibilité – Performance – Sécurité – Compatibilité • Addon Firefox https://addons.mozilla.org/fr/firefox/addon/webhint/ • En ligne https://webhint.io/
25. @hellosct1 – Meetup A11Y Lutèce #4 - 2026 Webhint (2/2) Exemple Catégories Détails
26. @hellosct1 – Meetup A11Y Lutèce #4 - 2026 AInspector WCAG (1/2) • Inspecte les pages Web – Détection des problèmes liés • Aux exigences WCAG 2.0 niveau A et AA • Addon Firefox – https://addons.mozilla.org/firefox/addon/ainspector-wcag • Lexique V : violations W : warnings MC : manual checks P : passes
27. @hellosct1 – Meetup A11Y Lutèce #4 - 2026 AInspector WCAG (2/2)
28. @hellosct1 – Meetup A11Y Lutèce #4 - 2026 Plan ou index du document • Extension : headingsMap • Génère un plan ou un index de tout document web structuré avec des titres et/ou des sections en HTML5. • Elle affiche – la structure des titres – les erreurs de structure – Outil d'analyse HTML5. • Lien – https://addons.mozilla.org/fr/firefox/addon/headingsmap/
29. @hellosct1 – Meetup A11Y Lutèce #4 - 2026 Autres extensions • A11y-outline – https://addons.mozilla.org/fr/firefox/addon/a11y-outline/ • Axe Devtools – https://addons.mozilla.org/fr/firefox/addon/axe-devtools/ • a11y.css vérificateur d'accessibilité – https://addons.mozilla.org/fr/firefox/addon/a11ycss • WCAG Contrast checker – https://addons.mozilla.org/fr/firefox/addon/wcag-contrast-checker • WAVE Accessibility Extension – https://addons.mozilla.org/fr/firefox/addon/wave-accessibility-tool/ • Ainspector WCAG – https://addons.mozilla.org/fr/firefox/addon/ainspector-wcag/ • Tanaguru webext RGAA – https://addons.mozilla.org/fr/firefox/addon/tanaguru-webext • Asqatasun
30. @hellosct1 – Meetup A11Y Lutèce #4 - 2026 • Un super outil • Validation rapide • Validation avancée • Bonnes pratiques
31. @hellosct1 – Meetup A11Y Lutèce #4 - 2026 Bonnes pratiques en développement • Posséder une routine de test fixe – Analyse initiale avec Firefox Dev Tools – Analyse détaillée avec les extensions – Test manuel de la navigation au clavier – Testez différents scénarios d'écran avec le menu Responsive • Combiner : – les tests automatisés – les tests manuels
32. @hellosct1 – Meetup A11Y Lutèce #4 - 2026 Liens • Documentation développeur – https://firefox-source-docs.mozilla.org/accessible/in dex.html • MDN : Apprendre A11y – https://developer.mozilla.org/fr/docs/Apprendre/a11 y
33. @hellosct1 – Meetup A11Y Lutèce #4 - 2026 Un peu plus...
34. @hellosct1 – Meetup A11Y Lutèce #4 - 2026 La suite... Firefox : accessibilité ouverte (orienté utilisateur)
35. @hellosct1 – Meetup A11Y Lutèce #4 - 2026 Merci Christophe Villeneuve @hellosct1.bsky.social @hellosct1 @hellosct1@mamot.fr