RGAA : développer des sites web accessibles
Comprendre et appliquer les principes du référentiel RGAA pour développer des sites web accessibles !
Vue d'ensemble
Solides connaissances en HTML, CSS et JavaScript, aisance dans la lecture et l'édition de code dans un IDE.
Objectifs pédagogiques
Programme détaillé
Introduction à l’accessibilité web
Définitions clés : accessibilité numérique, inclusion
Types de handicaps et problématiques d’usage
Statistiques d’audience et bénéfices UX/SEO
Quiz interactif : repérer les freins d’un parcours utilisateur mal conçu
Cadre légal & référentiels
Loi française 2005-102, décret 2019-768, Directive UE 2016/2102
RGAA 4.2 et cartographie avec WCAG 2.2
Échéance du 28 juin 2025 : obligations, sanctions, registre public d’accessibilité
Étude de cas : analyse d’un contrôle DGCCRF et de son impact financier
Anatomie d’une page web accessible
Structure HTML5 : balises sémantiques, hiérarchie des titres
Repères ARIA landmarks & navigation par régions
Ordre logique vs. rendu visuel
Refonte guidée : restructurer l’en-tête et le corps d’une page existante
Outils d’évaluation & premiers tests
Inspecteurs d’accessibilité navigateur (Firefox/Chrome)
Lecteurs d’écran (NVDA, VoiceOver) & modes de navigation
Extensions RGAA & grilles de contrôle
Prise en main : exécuter 10 tests rapides sur un site choisi par le groupe
HTML sémantique avancé
Bonnes pratiques : listes, citations, abréviations, images (attribut alt)
Tableaux complexes : headers, summaries, associations cellules/en-têtes
Mini-challenge : rendre accessible une galerie d’images et un tableau de données
CSS et perception visuelle
Contrastes (méthodes de calcul RGAA)
Indicateurs de focus visibles et personnalisés
Contenus masqués (clip-path, sr-only) & animation réduite
Test couleur : corriger les erreurs d’un thème sombre et de ses états focus
Navigation clavier & liens
Ordre tabulation, liens d’évitement, scroll automatique
Texte de lien pertinent et images-liens composées
Implémentation : créer un menu de navigation 100 % clavier + lecteur d’écran
Formulaires accessibles
Association label / input, fieldset / legend
Messages d’erreur, aria-invalid, aria-describedby
Contrôle de saisie temps réel & device-indépendant
Atelier : concevoir un formulaire complexe (multi-étapes) et sa validation ARIA
WAI-ARIA : principes et limites
Rôles, états, propriétés, live regions
Patterns officiels : accordion, tablist, dialog…
Bonnes pratiques : “No ARIA is better than bad ARIA”
Exercice : transformer un composant modal JS en dialog ARIA conforme
Contenus dynamiques & SPA
Gestion du focus après mise à jour DOM
Notifications non intrusives (aria-live, assertive/polite)
Limites de temps & préférences médias réduits
Code lab : ajouter une zone d’alerte live à un tableau filtré dynamiquement
Prochaines sessions
28 juil. 2026
Distance - Français
28 juil. 2026
Grenoble - Français
28 juil. 2026
Toulouse - Français
28 juil. 2026
Aix-en-Provence - Français
28 juil. 2026
Lyon - Français
2 sept. 2026
Paris - Français
2 sept. 2026
Distance - Français
2 sept. 2026
Lille - Français
2 sept. 2026
Nantes - Français
19 oct. 2026
Grenoble - Français
19 oct. 2026
Aix-en-Provence - Français
19 oct. 2026
Toulouse - Français
19 oct. 2026
Distance - Français
19 oct. 2026
Lyon - Français
23 nov. 2026
Paris - Français
23 nov. 2026
Distance - Français
23 nov. 2026
Lille - Français
23 nov. 2026
Nantes - Français
8 déc. 2026
Lyon - Français
8 déc. 2026
Distance - Français
8 déc. 2026
Grenoble - Français
8 déc. 2026
Toulouse - Français
8 déc. 2026
Aix-en-Provence - Français
Avis des participants
Financement
Cette formation est éligible aux financements OPCO et FNE-Formation. Nos équipes vous accompagnent dans le montage de votre dossier.
En savoir plus sur le financement