Le handicap dans le Var,
cartographié et trouvable
Site WordPress sur-mesure pour PariH 83, Pôle d'Accueil, de Ressources, d'Information et d'Orientation Handicap du Var, porté par la MDPH 83 et le Conseil départemental. Annuaire filtrable de 78 structures médico-sociales partenaires avec moteur à facettes Meilisearch sub-200ms, cartographie Leaflet accessible, workflow éditorial trois étapes et conformité RGAA AA auditée.
- Site vitrine
- WordPress
- Inclusion
En un coup d'œil
- ClientPariH 83
- LieuVar (83)
- TypeSite vitrine
- Année2024
- SecteurInclusion · Handicap
- Durée3 mois
- TechnologieWordPress
- Équipe4 conseillers + directrice
- URLparih83.fr
- Site vitrine
- WordPress
- Inclusion
Le brief et la problématique
PARIH (Pôle d'Accueil, de Ressources, d'Information et d'Orientation Handicap) est une structure départementale du Var portée par la MDPH 83 et le Conseil départemental, opérationnelle depuis septembre 2023. Sa mission : offrir un guichet unique aux personnes en situation de handicap et à leurs aidants pour identifier, filtrer et contacter les structures médico-sociales adaptées sur les 153 communes du département. L'équipe compte 4 conseillers inclusion salariés, coordonnés par une directrice de pôle, et s'appuie sur un réseau documenté de 78 établissements et services partenaires (ESAT, SAVS, SAMSAH, foyers d'hébergement, IME, CMPP, services d'aide à domicile spécialisés).
Avant refonte, l'information sur ces 78 structures était éparpillée entre un PDF de 84 pages téléchargé sur le site du Conseil départemental, un annuaire partiel de la CPAM Var, et des fiches papier distribuées en accueil MDPH. Aucun outil ne permettait à un aidant de filtrer les établissements selon des critères croisés (type de handicap, âge de l'usager, commune, modalités d'accueil, financement). Le PARIH recevait 420 à 580 appels téléphoniques par mois, dont 65 % portaient sur des demandes d'information qui auraient pu être résolues par un annuaire en ligne fonctionnel. La directrice souhaitait libérer du temps conseiller pour l'accompagnement individualisé complexe.
« L'annuaire filtrable nous a rendu huit heures par semaine d'accompagnement terrain. Les appels qui arrivent sont désormais ceux qui nécessitent réellement notre expertise d'orientation, pas ceux qui demandent juste l'adresse d'un ESAT. » — Marion V., directrice PARIH 83.
La problématique
Orienter une personne en situation de handicap vers une structure adaptée croise au minimum six dimensions : type de handicap (moteur, cognitif, psychique, sensoriel, polyhandicap, TSA), âge, commune de résidence, modalité d'accueil (internat, externat, accueil de jour, semi-externat), type de prise en charge (éducative, médicalisée, professionnelle), financement (MDPH, CAF, Conseil départemental, caisses de retraite). Un annuaire PDF ou un moteur de recherche simple ne permet pas cette combinatoire. Comment concevoir un outil public accessible RGAA AA qui permette à un aidant fatigué de trouver en moins de 2 minutes les trois structures les plus pertinentes, parmi 78 fiches, pour son cas précis ?
Objectifs du projet
- Publier 78 fiches d'établissements avec 6 axes de filtres combinables en moins de 200 ms
- Couvrir les 12 communes principales du Var avec carte interactive géolocalisée accessible
- Atteindre RGAA AA sur 100 % des pages publiques, annuaire inclus, avec déclaration officielle
- Réduire de 60 % le volume d'appels téléphoniques d'information simple au PARIH
- Intégrer un formulaire de contact conseiller qualifié avec pré-sélection de la structure visée
Quatre défis propres à ce projet
Défi 01
Filtres multi-critères accessibles et rapides
Un annuaire filtrable classique repose sur des filtres JavaScript non-accessibles (dropdowns custom sans aria, checkboxes sans label associé, résultats rafraîchis sans annonce aria-live). Pour PARIH, nous avons construit un filtre multi-facettes entièrement accessible : chaque axe est un fieldset avec legend explicite, les checkboxes sont natives avec label, les résultats sont annoncés en aria-live polite à chaque changement, le nombre de résultats est mis à jour dans un H2 dédié. Les 6 axes combinés (jusqu'à 28 valeurs simultanées) retournent leur résultat en moins de 180 ms grâce à un index pré-calculé au build.
Défi 02
Qualifier 78 fiches structures sans erreur
La directrice PARIH et les 4 conseillers ont contacté une à une les 78 structures partenaires pour valider 14 champs par fiche (nom officiel, adresse, téléphone, email, horaires, capacité d'accueil, types de handicap acceptés, âges, modalités, tarifs CPAM et reste à charge, contact référent, mise à jour datée). Le pilotage a été suivi dans un Airtable partagé avec workflow de validation à trois étapes (proposition conseiller, validation directrice, publication site). Chaque fiche dispose d'une date de dernière validation affichée en public, et une alerte automatique relance la vérification tous les 6 mois.
Défi 03
Cartographie géolocalisée accessible
Une carte interactive est difficile à rendre accessible : les marqueurs sont souvent inaccessibles au clavier, les popups ne sont pas annoncés au lecteur d'écran, le zoom est imprécis sans gestes tactiles. Nous avons livré une carte Leaflet avec fallback liste ordonnée systématique. Chaque marqueur est un bouton focussable annoncé par son nom de structure, l'ouverture d'un popup est annoncée en aria-live, la navigation au clavier circule entre les marqueurs via touches flèches. La carte est désactivable via le menu d'accessibilité au profit d'une liste géolocalisée triée par distance.
Défi 04
Réduire les appels sans dégrader le contact humain
L'ambition de réduire de 60 % les appels ne devait pas se traduire par un abandon des usagers en difficulté numérique. Nous avons intégré trois portes d'entrée vers le contact humain : un numéro visible en permanence dans le header (avec identification de la plage horaire en cours), un formulaire de contact qualifié avec pré-sélection de la structure visée pour pré-remplir la demande, et un bouton « Être rappelé » qui crée une tâche dans l'agenda des conseillers avec trois créneaux proposés. Le formulaire a été testé en modéré avec 6 aidants et 4 personnes en situation de handicap cognitif léger.
La solution mise en place
Nous avons livré un site WordPress sur-mesure avec un custom post type structure indexé par 6 taxonomies (type de handicap, tranche d'âge, modalité, commune, type de prise en charge, financement). Le frontend de l'annuaire utilise un moteur de recherche à facettes basé sur Meilisearch en self-hosted, capable de retourner les résultats en moins de 180 ms sur les 78 fiches avec 6 filtres combinés. L'interface d'annuaire est entièrement accessible RGAA AA, testée sur NVDA 2024, JAWS 2024 et VoiceOver macOS 14. Le back-office permet aux 4 conseillers d'éditer une fiche en moins de 4 minutes, avec workflow de validation à trois étapes et historique de modifications horodaté.
Axe 01 · Moteur à facettes Meilisearch
6 filtres combinés en moins de 200 ms
Meilisearch est hébergé en self-hosted sur un VPS Scaleway (2 vCPU, 4 Go RAM) avec indexation automatique déclenchée à chaque publication ou modification de fiche. L'index compte 78 documents avec 22 attributs indexés et 6 facettes. Les requêtes retournent les résultats en moins de 180 ms P95, avec surlignage des termes recherchés et suggestion de correction orthographique. Le frontend appelle Meilisearch via une clé publique restreinte en lecture, sécurisée par une allowlist d'origine. La recherche textuelle libre fonctionne en complément des filtres facettes, utile pour retrouver une structure par nom partiellement mémorisé.
78 fiches indexées, 6 facettes combinées, P95 sous 200 ms.
Axe 02 · Cartographie Leaflet accessible
Fallback liste et navigation clavier
La carte utilise Leaflet avec tuiles OpenStreetMap hébergées en self-hosted pour éviter la dépendance à des tiers non-RGPD. Chaque structure est représentée par un marqueur personnalisé en SVG avec icône thématique (enfance, adulte, travail protégé, hébergement). Les marqueurs sont focussables au clavier dans l'ordre de latitude décroissante, avec popup qui s'ouvre sur Entrée, annoncé en aria-live polite. Un bouton toggle permet de basculer entre carte interactive et liste ordonnée par distance depuis une commune saisie, pour les utilisateurs qui préfèrent une lecture linéaire.
Axe 03 · Back-office workflow trois étapes
Airtable connecté à WordPress
L'édition d'une fiche structure suit un workflow strict : un conseiller modifie une fiche en statut « proposition », ce qui verrouille le contenu public à la version antérieure ; la directrice reçoit une notification email et peut valider via un bouton dans l'admin ; la validation déclenche la publication immédiate avec mise à jour de la date de validation. Chaque modification est historisée avec auteur, timestamp et diff des champs modifiés. Un tableau Airtable bidirectionnel synchronise les fiches avec le back-office MDPH 83, ce qui évite les doubles saisies entre les deux institutions.
Axe 04 · Formulaire contact pré-qualifié
Pré-sélection structure et créneau rappel
Le formulaire de contact présent sur chaque fiche structure est pré-rempli avec le nom de la structure visée et la commune, ce qui permet au conseiller de qualifier immédiatement la demande à l'arrivée dans HubSpot. Trois types de demande sont proposés : renseignement général, prise de rendez-vous, rappel téléphonique sur créneau choisi. Le choix « rappel téléphonique » ouvre un micro-calendrier avec 12 créneaux de 30 minutes sur 5 jours ouvrés, connecté via API à l'agenda Google partagé des 4 conseillers. Le lead est créé simultanément dans HubSpot avec association à la fiche structure concernée.
Une demande qualifiée à l'arrivée, pas un email à requalifier à la main.
78 structures filtrables en 6 axes avec accessibilité RGAA AA
Pour orienter un aidant fatigué en moins de 2 minutes parmi 78 structures médico-sociales, nous avons construit un moteur à facettes sub-200ms entièrement accessible et une cartographie avec fallback liste.
Comment ça marche
Modélisation des 6 axes
Ateliers de co-conception avec les 4 conseillers PARIH pour identifier les 6 axes de filtres réellement utilisés lors d'une orientation : type de handicap, tranche d'âge, commune, modalité d'accueil, type de prise en charge, financement. Chaque axe a été décliné en valeurs exhaustives validées MDPH 83.
Qualification des 78 fiches
Les 78 structures partenaires ont été contactées une à une sur 6 semaines pour valider 14 champs par fiche. Le pilotage a été mené dans Airtable avec workflow de validation à trois étapes (conseiller, directrice, publication) et date de dernière vérification affichée publiquement.
Moteur Meilisearch self-hosted
Meilisearch hébergé sur VPS Scaleway, indexation automatique à chaque publication, 22 attributs indexés dont 6 facettes, requêtes P95 inférieures à 200 ms. Clé publique restreinte pour l'appel frontend, allowlist d'origine côté serveur.
Interface accessible RGAA AA
Filtres en fieldset/legend avec checkboxes natives et label explicite, résultats annoncés en aria-live polite, nombre de résultats dans H2 dédié, navigation clavier complète, focus management à chaque changement de filtre. Audité sur NVDA 2024 et VoiceOver macOS 14.
Cartographie avec fallback liste
Carte Leaflet avec tuiles OSM self-hosted, marqueurs SVG focussables au clavier, popups annoncés en aria-live. Toggle vers liste ordonnée par distance pour les utilisateurs lecteurs d'écran ou cognitivement fatigués.
- 78structures qualifiées14 champs validés
- 6axes de filtrescombinables
- < 200mstemps de requêteP95 Meilisearch
Sous le capot
Index Meilisearch et synonymes
L'index Meilisearch compte 78 documents avec 22 attributs indexés (nom officiel, sigle, description, adresse, commune, types de handicap, âges, modalités, etc.) et 6 facettes configurées en attributes for faceting. Les synonymes métier sont configurés via l'API Meilisearch (ESAT / établissement et service d'aide par le travail, IME / institut médico-éducatif, SAVS / service d'accompagnement à la vie sociale) pour matcher quelle que soit la formulation saisie. La correction orthographique typo tolerance est activée à 2 caractères pour les mots de plus de 9 lettres. Le ranking rules privilégie la pertinence typographique puis la proximité textuelle, avec un score personnalisé qui remonte les structures récemment validées.
Accessibilité des filtres à facettes
Chaque axe de filtre est structuré en fieldset HTML avec legend explicite (« Type de handicap », « Tranche d'âge », etc.), les valeurs sont des checkboxes natives avec label associé visuel et programmatique. La sélection d'une valeur déclenche un fetch asynchrone vers Meilisearch et l'actualisation des résultats sans rechargement de page. Le nombre de résultats est mis à jour dans un H2 focussable qui est annoncé automatiquement par les lecteurs d'écran via aria-live polite. Un bouton « Effacer les filtres » visible en permanence permet de réinitialiser en un clic, avec confirmation pour les utilisateurs dys.
Cartographie Leaflet focussable
Leaflet a été étendu avec un plugin custom qui rend chaque marqueur focussable au clavier via tabindex 0 et rôle button. L'ordre de tabulation suit la latitude décroissante (du nord au sud du Var), choix discuté avec les utilisateurs tests. L'ouverture d'un popup via Entrée ou Espace trappe le focus dans le popup jusqu'à fermeture via Échap. Le contenu du popup est annoncé en aria-live polite avec nom de structure, adresse, téléphone et lien vers la fiche. Les tuiles OpenStreetMap sont servies depuis un serveur self-hosted (OHM-tile), évitant la dépendance à Mapbox ou Google Maps non conformes RGPD sans DPA adapté.
Workflow éditorial trois étapes
Le type custom post structure dispose de 3 statuts métier (proposition, validation directrice, publié) en plus des statuts WordPress natifs. Une modification par un conseiller met automatiquement la fiche en statut proposition et envoie une notification email à la directrice. La directrice dispose dans son dashboard d'une vue « À valider » qui liste les fiches en attente avec diff visuel des champs modifiés (rouge supprimé, vert ajouté). La validation déclenche la publication immédiate, la resynchronisation Meilisearch via webhook, et la mise à jour de la date de dernière vérification. L'historique complet est consultable avec rollback possible sur toute version antérieure.
Cinq étapes, du brief au lancement
Planning piloté par les besoins d'accessibilité et l'intégration de Meilisearch pour un annuaire performant dès la mise en ligne.
Étape 01
Cadrage & Accessibilité
- Rencontre avec l'équipe projet associative
- Cartographie des ressources handicap à indexer
- Définition des critères de recherche et taxonomies
- Cahier des charges validé
Étape 02
Design inclusif
- Wireframes mobile-first accessibles
- Charte graphique inclusive et lisible
- Maquettes annuaire, fiches ressources et recherche
- Validation avec tests d'accessibilité
Étape 03
Développement
- Application sur-mesure avec moteur Meilisearch
- Recherche instantanée multi-filtres
- Indexation et structuration des ressources
- Intégration responsive et accessible
Étape 04
Contenu & Indexation
- Import et catégorisation des ressources handicap
- Fiches structures et dispositifs d'accompagnement
- Pages thématiques par type de handicap
- Optimisation de l'index Meilisearch
Étape 05
Recette & Lancement
- Tests accessibilité, recherche et multi-navigateurs
- Formation de l'équipe éditoriale
- Mise en production
- Maintenance et enrichissement de l'annuaire
Stack technique du projet
Les briques techniques mobilisées pour faire tourner le projet, choisies pour leur fiabilité et leur maintenabilité.
- CMS
- WordPress 6.4
- ACF Pro 6
- Custom post types
- PHP 8.2
- Moteur recherche
- Meilisearch self-hosted
- Scaleway VPS
- Indexation webhook
- API publique restreinte
- Cartographie
- Leaflet 1.9
- OpenStreetMap self-hosted
- Plugin accessibilité custom
- SVG marqueurs
- Accessibilité
- RGAA AA audité
- NVDA / JAWS / VoiceOver
- axe-core CI
- Opquast certifié
- CRM & pipe
- HubSpot CRM
- Airtable sync
- Google Agenda API
- Mailjet transactionnel
Quelques pages du site réalisé
Extrait du design livré
Les chiffres du projet
Données structurelles · parih83.fr
- 78Structures qualifiéesAnnuaire filtrable, 14 champs / fiche
- 6Axes de filtresCombinables sub-200 ms
- 153Communes du Var couvertesCartographie géolocalisée
- AANiveau RGAAAudit Opquast
- -60 %Appels info simplevs baseline pré-refonte
- 4 minÉdition ficheWorkflow trois étapes
Quatre pôles mobilisés sur ce projet
Annuaires filtrables à facettes
Conception et livraison d'annuaires B2B et B2C avec moteurs de recherche à facettes (Meilisearch, Algolia, Typesense) pour des catalogues de 30 à 4 000 entrées. Chaque projet intègre une modélisation métier précise des filtres (co-conçue avec les utilisateurs finaux), une indexation automatique synchronisée au CMS, une interface entièrement accessible RGAA AA ou WCAG AA, et des performances cibles sous 250 ms P95. Nous avons livré 9 annuaires filtrables en 24 mois, pour des secteurs variés : santé, inclusion, emploi, formation, associations culturelles.
Voir l'expertiseCartographies accessibles
Expertise Leaflet et Maplibre GL pour cartographies interactives accessibles au clavier et au lecteur d'écran, avec fallback systématique en liste ordonnée. Nous privilégions les tuiles OpenStreetMap en self-hosted plutôt que Mapbox ou Google Maps pour garantir la conformité RGPD sans DPA complexe. Chaque marqueur est focussable, chaque popup est annoncé en aria-live, la navigation clavier suit un ordre logique (latitude, alphabétique, distance selon cas). Cette approche combine usage grand public (carte visuelle) et accessibilité exigeante (liste liée).
Voir l'expertiseWorkflows éditoriaux médico-sociaux
Construction de workflows éditoriaux pour structures publiques, MDPH, ARS, Conseils départementaux, avec exigences spécifiques : validation hiérarchique, horodatage, historique versionné, intégration avec outils métier existants (logiciels MDPH, bases de la CPAM, plateformes DUI). Nous maîtrisons les contraintes de confidentialité propres au secteur (RGPD renforcé, hébergement HDS certifié pour certains projets connexes, conservation limitée des données personnelles). Sur PARIH, l'intégration Airtable permet aux conseillers de travailler dans leur outil habituel sans double saisie côté WordPress.
Voir l'expertiseConformité RGAA pour services publics
Accompagnement complet à la conformité RGAA 4.1 AA sur des sites publics et parapublics : audit initial, référentiel de design accessible, pipeline CI axe-core, audit humain final par expert Opquast, rédaction de la déclaration d'accessibilité officielle DINUM, plan d'action triennal publié, formation des équipes rédactionnelles à la rédaction accessible (titres, alt texts, contrastes, typographie). Nous sommes signataires de la charte Opquast et nos intégrateurs sont formés aux principes WCAG 2.1 et WAI-ARIA 1.2.
Voir l'expertise
Vos questions, nos réponses
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
