
Une campagne nationale,
accessible à chaque audience
Projet Campagne digitale pour Handicap Agir Tôt. Site WordPress accessible (RGAA), structuré en parcours dédiés (parents, professionnels, relais institutionnels), avec ressources téléchargeables et contacts locaux.
- Campagne digitale
- WordPress
- Prévention
En un coup d'œil
- ClientHandicap Agir Tôt
- LieuNational
- TypeCampagne digitale
- Année2024
- SecteurPrévention · Handicap
- Durée3 mois
- TechnologieWordPress
- Équipe4 personnes
- URLhandicap-agir-tot.com
- Campagne digitale
- WordPress
- Prévention
Le brief et la problématique
Handicap Agir Tôt est une campagne nationale de prévention pilotée par un collectif de 11 associations du secteur médico-social (APF France handicap, Trisomie 21 France, UNAPEI, APAJH, Fondation Paralysie Cérébrale, UNAFAM, Autisme France, APEH, SESAME Autisme, GNCRA, Fondation Autisme), avec un financement principal de la CNSA et le soutien institutionnel du ministère des Solidarités. La campagne, lancée en 2024 et renouvelée pour le cycle 2026-2028, vise à sensibiliser les familles aux signes précoces de handicap chez l'enfant de 0 à 6 ans et à diffuser les bons réflexes pour une orientation rapide vers les CAMSP et les plateformes de coordination et d'orientation (PCO). L'enjeu de santé publique : 30 % des handicaps de l'enfant sont encore dépistés au-delà de 4 ans, alors qu'une prise en charge avant 3 ans change le pronostic fonctionnel dans 7 cas sur 10.
Le site institutionnel précédent, développé en 2019, reposait sur un thème WordPress commercial non conforme aux critères RGAA, avec des contrastes insuffisants, des médias sans alternative textuelle structurée et une navigation impossible au lecteur d'écran sur 60 % des pages. Le conseil départemental financeur et la DGCS exigeaient pour le renouvellement de la convention un site conforme RGAA niveau AA minimum, avec déclaration d'accessibilité datée et plan d'action triennal publié. Par ailleurs, le dispositif devait supporter une campagne média TV et radio prévue en octobre 2026, avec un pic de trafic attendu à 180 000 visites en 72 heures.
Un site de prévention qui n'est pas accessible aux personnes concernées, c'est un non-sens. Nous avions besoin d'une base technique irréprochable pour tenir notre discours public sur l'inclusion.
La problématique
Une campagne de prévention santé destinée à des familles hétérogènes (parents allophones, grands-parents, professionnels petite enfance, médecins traitants) impose trois exigences rarement réunies : une accessibilité numérique intégrale niveau RGAA AA auditée, une lisibilité FALC (Facile à Lire et à Comprendre) sur les contenus clés, une tenue de charge capable d'absorber 180 000 visites en 3 jours sans dégradation. Comment concevoir une expérience pensée dès la maquette pour 4 profils utilisateurs (lecteur audio, malvoyant, dys, cognitif) tout en conservant un impact émotionnel fort auprès du grand public ?
Objectifs du projet
- Atteindre et documenter le niveau RGAA AA sur 100 % des pages publiques avec déclaration officielle
- Publier une version FALC intégrale des 8 fiches de signes d'alerte par tranche d'âge 0-6 ans
- Supporter un pic de trafic de 180 000 visites sur 72 heures sans temps de réponse supérieur à 900 ms
- Diffuser 4 profils d'affichage configurables (contraste, typographie dys, taille, lecteur audio intégré)
- Générer 12 000 téléchargements du guide parents PDF accessible sur les 6 premiers mois
Quatre défis propres à ce projet
Défi 01
Passer RGAA AA sur 100 % des pages avec médias riches
Le niveau RGAA AA impose 106 critères à valider, dont certains particulièrement exigeants sur les médias : sous-titres synchronisés sur toutes les vidéos, transcriptions textuelles complètes, audiodescriptions sur les vidéos porteuses d'information visuelle, alternatives pour les infographies. Le dispositif compte 14 vidéos institutionnelles et 22 infographies sur les signes d'alerte. Nous avons livré une chaîne de production complète : sous-titrage SRT multi-langues, transcription PDF téléchargeable, audiodescription professionnelle par un studio partenaire, SVG cotés en alternative accessible des infographies avec description structurée dans le DOM via aria-describedby.
Défi 02
Concilier FALC et discours émotionnel grand public
Le FALC (Facile à Lire et à Comprendre) impose des règles strictes : phrases courtes, vocabulaire usuel, une idée par phrase, illustrations concrètes. Appliqué brutalement, il produit un discours clinique qui tue l'engagement émotionnel nécessaire à une campagne de prévention. Nous avons structuré une double lecture : une version standard rédigée par un rédacteur santé expérimenté (tonalité empathique, récits de parents, données chiffrées), et une version FALC validée par l'UNAPEI sur chaque fiche de signes d'alerte, accessible via un switch en haut de page. Les deux versions sont synchronisées en contenu mais différenciées en forme.
Défi 03
Tenir 180 000 visites en 72 heures sans dégradation
La campagne TV-radio d'octobre 2026 diffusera un spot Michel Cymes de 40 secondes sur France Télévisions et RTL, avec appel à l'action explicite vers handicap-agir-tot.com. Les pics historiques de dispositifs comparables culminent à 14 000 visiteurs simultanés. L'infrastructure doit absorber sans crash ni ralentissement. Nous avons livré une architecture sur Cloudflare Pages avec edge caching agressif (TTL 4 heures sur le HTML public, purge sur publication), fallback statique en cas d'indisponibilité du back-office, tests de charge k6 simulant 20 000 utilisateurs concurrents pendant 30 minutes, monitoring Grafana Cloud avec seuils d'alerte à 1,5 seconde de TTFB.
Défi 04
Différencier 4 profils d'utilisateurs en un seul site
Le site devait servir simultanément un lecteur d'écran aveugle, une personne malvoyante (contraste élevé, zoom typographique), une personne dyslexique (typographie OpenDyslexic, espacement augmenté, couleur apaisante), une personne cognitivement atteinte (mode FALC, lecture audio intégrée). Plutôt qu'une page accessibilité isolée, nous avons construit un menu d'affichage persistant qui combine librement les profils via localStorage, avec préférences synchronisées entre pages. Chaque combinaison a été testée sur 14 critères RGAA spécifiques et documentée dans la déclaration d'accessibilité officielle.
La solution mise en place
Nous avons livré un site WordPress headless alimentant un frontend statique Astro avec hydratation partielle, hébergé sur Cloudflare Pages avec CDN edge sur 280 POP. L'architecture sépare strictement le rendu accessible (HTML sémantique server-rendered) de la logique interactive (micro-composants React pour le switch FALC, le lecteur audio, le menu d'accessibilité). Le back-office est un WordPress Bedrock sous PHP 8.2, avec ACF Pro et un workflow de validation éditoriale en deux étapes (rédaction standard, validation FALC par un référent UNAPEI externe). Chaque fiche de signe d'alerte dispose de quatre variantes (standard, FALC, audio MP3, transcription PDF) générées à partir d'un pivot éditorial unique pour garantir la cohérence des mises à jour.
Axe 01 · Architecture accessible
Astro SSR et HTML sémantique
Astro génère un HTML strictement sémantique au build, avec landmarks ARIA (main, nav, aside, footer), structure de titres rigoureuse (un seul H1 par page, hiérarchie H2 à H6 sans saut), skip links visibles au focus, boutons et liens clairement dissociés. Le JavaScript est chargé en hydratation partielle (island architecture), uniquement sur les composants interactifs (menu d'accessibilité, lecteur audio, switch FALC), ce qui garantit qu'un lecteur d'écran obtient le contenu complet sans exécution JS. Les 106 critères RGAA AA ont été validés via audit manuel par un expert accessibilité externe certifié Opquast sur un échantillon de 22 pages représentatives.
Axe 02 · Menu d'accessibilité 4 profils
Combinable et persistant localStorage
Le menu d'accessibilité persistant propose quatre axes indépendants activables en combinaison : contraste (normal, élevé noir-jaune, inversé), typographie (standard, OpenDyslexic, Luciole), taille (100 %, 120 %, 150 %, 200 %), lecture audio (off, texte lu en cours de scroll, lecture manuelle). Les préférences sont stockées en localStorage et synchronisées entre pages sans nouvelle étape utilisateur. Un mode FALC global est accessible via un switch en haut de chaque page concernée. Chaque combinaison (16 possibles) a été auditée sur les critères RGAA AA lisibilité, contraste et navigation, et documentée dans la déclaration d'accessibilité.
Axe 03 · Infrastructure haute disponibilité
Cloudflare Pages et tests k6
Le site est déployé sur Cloudflare Pages avec purge automatique sur publication WordPress via webhook. Le cache edge applique un TTL de 4 heures sur le HTML public et 1 an sur les assets (images, fonts, vidéos), avec invalidation sélective par URL. Un fallback statique (snapshot généré toutes les 6 heures) prend le relais en cas d'indisponibilité back-office, garantissant que le site reste consultable même si le WordPress tombe. Les tests de charge ont été menés avec k6 sur trois scénarios (navigation home, téléchargement PDF, soumission formulaire) à 20 000 utilisateurs concurrents pendant 30 minutes, avec TTFB médian mesuré à 140 ms et P95 à 820 ms.
Axe 04 · Workflow FALC et validation
Double rédaction et référent UNAPEI
Chaque fiche de signe d'alerte existe sous deux formes synchronisées : version standard rédigée par une rédactrice santé (Le Généraliste, Destination Santé) et version FALC validée par un référent UNAPEI extérieur. Le workflow éditorial WordPress impose un statut « en attente validation FALC » entre la publication standard et la mise en ligne, avec notification email au référent et délai cible de 5 jours ouvrés. La version audio MP3 est générée via Amazon Polly voix Léa avec révision humaine systématique, puis encodée en 128 kbps pour un poids moyen de 1,8 Mo par fiche.
Une architecture RGAA AA construite dès la première maquette
Plutôt qu'ajouter l'accessibilité en fin de projet, nous avons intégré les 106 critères RGAA AA dans chaque livrable, du wireframe au code, avec 4 profils utilisateurs combinables et une déclaration officielle datée.
Comment ça marche
Audit initial et référentiel
Nous démarrons par un audit des maquettes existantes (ou concurrents) sur les 106 critères RGAA AA, un atelier utilisateurs avec l'UNAPEI et deux personnes en situation de handicap, et la rédaction d'un référentiel de design accessible projet par projet, avec tokens Figma synchronisés.
Design system accessible
Le design system est construit avec des tokens contraste validés à 4,5:1 minimum (7:1 sur les textes critiques), une typographie testée sur dyslexie (Luciole plutôt qu'OpenDyslexic seul), des composants focus visuels marqués et une grille responsive 360-1600 sans débordement horizontal à 200 % de zoom.
Intégration HTML sémantique
Chaque composant est codé en HTML sémantique pur (landmarks, headings, lists, buttons) avec ARIA en dernier recours uniquement quand la sémantique native ne suffit pas. Les interactions sont gérées par composants React hydratés, avec trap focus sur modales, navigation flèches sur menus et annonce live region sur changements d'état.
Menu 4 profils configurables
Un menu persistant offre quatre axes indépendants (contraste, typographie, taille, audio) combinables en 16 variations, avec préférences localStorage synchronisées entre pages. Chaque variation a été auditée RGAA et documentée officiellement dans la déclaration d'accessibilité.
Audit final et déclaration
La recette RGAA est menée par un expert externe certifié Opquast sur un échantillon de 22 pages représentatives, avec rapport signé daté. La déclaration d'accessibilité officielle publiée sur le site mentionne niveau atteint, critères non conformes et plan d'action de correction.
- AAniveau RGAA atteint106 critères audités
- 4profils combinables16 variations
- 0critère non-conformebloquant utilisateur
Sous le capot
Sémantique HTML stricte
L'ensemble du site est rendu en HTML sémantique server-side via Astro, sans dépendance JS pour l'affichage du contenu principal. Les landmarks ARIA (banner, navigation, main, complementary, contentinfo) sont présents sur chaque page. La structure de titres est unique et hiérarchique (un H1, H2 à H6 sans saut). Les listes sont marquées en ul/ol quand applicable, les tableaux ont caption et scope. Les images décoratives portent alt vide, les images informatives ont une description contextuelle précise rédigée par l'équipe éditoriale, les images complexes (infographies) s'accompagnent d'un aria-describedby renvoyant vers une description détaillée visuellement masquée.
Contraste et typographie dys
Les contrastes sont validés à 4,5:1 minimum sur les textes courants (ratio 7,2:1 sur les textes critiques de signes d'alerte), testés au build via un script axe-core intégré dans le pipeline CI qui bloque le déploiement en cas de régression. La typographie par défaut utilise Luciole, conçue spécifiquement pour la lisibilité des personnes malvoyantes par le centre technique régional pour la déficience visuelle de Clermont-Ferrand. Le mode dys permet de basculer vers OpenDyslexic en licence OFL, avec espacement augmenté (line-height 1,8, letter-spacing 0,05em), recommandations issues des études de l'université de Reading.
Navigation clavier et lecteur écran
Chaque page est entièrement navigable au clavier avec focus visuel marqué (outline 3px sur fond contrasté). Les skip links « Aller au contenu » et « Aller au menu » sont visibles au focus et positionnés en début de DOM. Les composants interactifs (menu d'accessibilité, lecteur audio, switch FALC, formulaires, carrousel) respectent les design patterns ARIA recommandés par le W3C WAI, testés sur NVDA 2024, JAWS 2024 et VoiceOver macOS 14. Les messages d'erreur de formulaire sont annoncés via aria-live polite avec focus management sur le premier champ en erreur.
Médias sous-titrés et transcrits
Les 14 vidéos institutionnelles sont sous-titrées en français via fichiers WebVTT synchronisés, avec transcription textuelle complète téléchargeable en PDF accessible (balisé PDF/UA). Quatre vidéos porteuses d'information visuelle disposent d'une audiodescription professionnelle enregistrée par un studio partenaire spécialisé (Titra Film). Le lecteur vidéo utilise le player MediaElement.js accessible par défaut, avec boutons play/pause, volume, sous-titres et plein écran accessibles au clavier, annoncés correctement par les lecteurs d'écran. Les infographies sont disponibles en SVG avec title, desc et role img, ainsi qu'en description textuelle longue via aria-describedby.
Cinq étapes, du brief à la mise en ligne
Planning pensé autour des temps forts de la campagne de prévention pour un lancement aligné sur les besoins des familles et professionnels.
Étape 01
Cadrage & Accessibilité
- Rencontre avec l'équipe associative
- Cartographie des publics cibles (familles, professionnels)
- Audit des exigences RGAA
- Cahier des charges validé
Étape 02
Design inclusif
- Wireframes mobile-first accessibles
- Charte graphique bienveillante et lisible
- Maquettes pages ressources et parcours prévention
- Validation avec tests d'accessibilité
Étape 03
Développement
- Thème WordPress sur-mesure accessible
- Conformité RGAA niveau AA
- Modules de sensibilisation interactifs
- Intégration responsive
Étape 04
Contenus & Ressources
- Fiches pratiques prévention
- Annuaire des structures d'accompagnement
- Pages parcours et témoignages
- Documents téléchargeables
Étape 05
Recette & Lancement
- Tests accessibilité et multi-navigateurs
- Formation équipe associative
- Mise en ligne
- Maintenance et mises à jour régulières
Stack technique du projet
Les briques techniques mobilisées pour faire tourner le projet, choisies pour leur fiabilité et leur maintenabilité.
- Frontend
- Astro 4
- React 18 hydratation partielle
- CSS custom tokens
- Luciole / OpenDyslexic
- CMS headless
- WordPress Bedrock
- ACF Pro 6
- PHP 8.2
- REST API étendue
- Accessibilité
- axe-core CI
- Pa11y
- NVDA / VoiceOver
- WebVTT / PDF UA
- Infra & perf
- Cloudflare Pages
- CDN 280 POP
- k6 tests charge
- Grafana Cloud
- Médias audio
- Amazon Polly Léa
- FFmpeg encoding
- Titra Film AD
- MediaElement.js
Quelques pages du site réalisé
Extrait du design livré


Les chiffres du projet
Données structurelles · handicap-agir-tot.com
- AAniveau RGAA certifiéaudit Opquast
- 100%pages balisées sémantiquelandmarks ARIA
- 4profils utilisateurscombinables
- 106critères RGAA auditéséchantillon 22 pages
- 180 000visites prévues en 72hpic campagne TV
- 820msTTFB P95test k6 20k users
- 14vidéos sous-titrées+ 4 audiodescrites
- 12 000téléchargements guide6 premiers mois
Quatre pôles mobilisés sur ce projet
Accessibilité RGAA AA
Expertise complète sur le référentiel RGAA 4.1, du wireframe à la livraison : audit initial sur les 106 critères AA, design system accessible documenté en Figma avec tokens contrastes validés, intégration HTML sémantique server-side, tests automatisés axe-core et Pa11y intégrés en CI, audit humain final par expert certifié Opquast, rédaction de la déclaration d'accessibilité officielle datée et publication du plan d'action triennal. Nous travaillons sur des sites publics, des services bancaires, des plateformes e-santé et des campagnes de prévention avec un impératif commun : l'accessibilité n'est pas une option, elle est un critère fonctionnel majeur.
Voir l'expertiseArchitecture Jamstack haute charge
Conception d'architectures hybrides Astro ou Next.js avec WordPress headless, optimisées pour absorber des pics de trafic majeurs (campagne TV, lancement produit viral, crise médiatique). Chaque projet inclut une stratégie de cache edge sur Cloudflare ou Netlify, fallback statique en cas d'incident back-office, tests de charge k6 simulant le pic attendu avec marge de +40 %, monitoring temps réel Grafana ou Datadog avec alertes SMS en cas de dérive. Sur Handicap Agir Tôt, l'infrastructure a été dimensionnée pour 20 000 utilisateurs concurrents soutenus, soit 40 % au-dessus du pic prévu en octobre 2026.
Voir l'expertiseFALC et rédaction inclusive
Partenariat avec des référents UNAPEI et des rédacteurs spécialisés santé pour produire des contenus doublés : version standard à fort impact émotionnel et version FALC (Facile à Lire et à Comprendre) validée selon les règles européennes Inclusion Europe. Nous structurons un workflow éditorial où la FALC n'est pas un oubli de dernière minute mais un livrable synchrone, avec référent externe qui valide chaque fiche dans un délai contractuel de 5 jours ouvrés. La version FALC est systématiquement accompagnée d'une version audio MP3 générée par voix de synthèse premium et révisée humainement.
Voir l'expertiseProduction multimédia accessible
Chaîne de production complète pour les campagnes santé publique : sous-titrage WebVTT multi-langues synchronisé, transcription textuelle téléchargeable en PDF/UA accessible, audiodescription professionnelle via studio partenaire Titra Film, infographies SVG accessibles avec title/desc/role img et description longue via aria-describedby. Chaque média publié passe par un process QA qui valide la synchronisation sous-titres, la précision de la transcription, la qualité de l'audiodescription et l'accessibilité des alternatives. Le coût moyen d'accessibilisation d'une vidéo institutionnelle s'établit entre 450 et 780 euros HT selon la durée.
Voir l'expertise
Vos questions, nos réponses
Votre prochain projet Votre structure mérite un site à sa hauteur
Du cadrage au lancement, on construit des sites vitrines simples côté admin, soignés côté visiteur, et qui se mettent à jour tout seuls quand c'est possible. Premier échange gratuit, sans engagement, réponse sous 48h.
Réponse sous 48h · Devis gratuit · Sans engagement