Développer des Interfaces Accessibles
Parcours annuel pour coder des interfaces conformes RGAA/WCAG
98 heures (sur l'année scolaire)
Présentiel et distanciel (format hybride)
4–10 personnes
1800.00 € / pers.
Objectifs
- Implémenter la sémantique HTML5 accessible (landmarks, headings, listes)
- Utiliser ARIA correctement pour enrichir l'accessibilité des composants dynamiques
- Garantir la navigation clavier et la gestion du focus
- Rendre les médias accessibles (images, vidéos, audio)
- Auditer et corriger l'accessibilité d'un projet existant avec des outils spécialisés
À qui s'adresse cette formation ?
Étudiants en développement web (front-end, full-stack) souhaitant maîtriser l'implémentation technique de l'accessibilité numérique.
Prérequis
Maîtrise de HTML, CSS et bases de JavaScript. Connaissance des concepts de base du DOM recommandée.
Méthodes et moyens pédagogiques
- Exercices de codage live en binôme avec revues de code
- Corrections d'interfaces non accessibles en conditions réelles
- Tests avec lecteurs d'écran (NVDA, VoiceOver) et navigation clavier
- Projet final : développement d'une interface accessible de A à Z
Matériel
Ordinateur avec éditeur de code (VS Code recommandé) et navigateur Chrome ou Firefox.
Modalités d'évaluation
- Avant : test de niveau HTML/CSS et sensibilisation WCAG.
- Pendant : livrables de code évalués à chaque session.
- Après : audit technique du projet final sur grille RGAA.
Programme
Module 1 — HTML sémantique et structure
- Landmarks HTML5 : header, nav, main, aside, footer
- Hiérarchie des titres et structure de contenu
- Listes, tableaux et formulaires sémantiques
Module 2 — ARIA : rôles, états et propriétés
- Quand utiliser ARIA (et quand ne pas l'utiliser)
- Rôles ARIA : dialog, tabpanel, alert, status…
- aria-label, aria-labelledby, aria-describedby, aria-live
Module 3 — Navigation clavier et gestion du focus
- Tabindex et ordre de tabulation logique
- Gestion du focus dans les composants (modales, menus déroulants)
- Styles de focus visibles et personnalisés
Module 4 — Images, médias et documents
- Textes alternatifs pertinents selon le type d'image
- Sous-titres et audiodescription pour les vidéos
- Documents téléchargeables accessibles (PDF, Word)
Module 5 — Tests et outils d'audit
- Audit automatique : axe DevTools, Lighthouse, WAVE
- Test avec NVDA (Windows) et VoiceOver (macOS/iOS)
- Lecture et interprétation d'un rapport RGAA
Module 6 — Projet final
- Développement d'une interface accessible depuis les maquettes
- Audit RGAA complet du projet livré
- Présentation technique et retours d'experts
Dates de nos formations
Parcours étalé sur l'année scolaire, avec des sessions mensuelles. Premier module en septembre. Contactez-nous pour intégrer ce parcours dans votre programme pédagogique.
Formations inter-entreprises, dates à venir.
Nous contacter