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
Exemple d’activité pratique :
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é
Exemple d’activité pratique :
É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
Exemple d’activité pratique :
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
Exemple d’activité pratique :
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
Exemple d’activité pratique :
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
Exemple d’activité pratique :
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
Exemple d’activité pratique :
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
Exemple d’activité pratique :
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”
Exemple d’activité pratique :
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
Exemple d’activité pratique :
Code lab : ajouter une zone d’alerte live à un tableau filtré dynamiquement
