Add premium project README and RGAA roadmap
This commit is contained in:
parent
e8184dcd97
commit
043142e00f
2 changed files with 404 additions and 17 deletions
174
README.md
174
README.md
|
|
@ -1,34 +1,174 @@
|
||||||
# Portail Associations CCDS
|
# Portail Associations des Savanes 973
|
||||||
|
|
||||||
Depot central du projet `portail-associations`, avec application, documentation, services locaux et references techniques.
|
Plateforme numerique territoriale dediee aux associations des Savanes de Guyane.
|
||||||
|
|
||||||
## Ce que ce depot contient
|
## Vision
|
||||||
|
|
||||||
|
Le **Portail Associations des Savanes 973** est une plateforme en ligne concue pour simplifier, centraliser et professionnaliser les demarches des associations du territoire.
|
||||||
|
|
||||||
|
Il permet aux structures associatives de :
|
||||||
|
|
||||||
|
- creer leur espace ;
|
||||||
|
- deposer et mettre a jour leurs documents administratifs ;
|
||||||
|
- suivre leurs demandes ;
|
||||||
|
- solliciter des subventions ;
|
||||||
|
- reserver des espaces de la **Maison de la Jeunesse des Savanes (MJS)** ;
|
||||||
|
- interagir plus simplement avec l'administration.
|
||||||
|
|
||||||
|
Le portail vise un objectif concret : proposer un outil plus lisible, plus fiable et plus adapte aux usages de terrain des associations, des agents et des administrateurs.
|
||||||
|
|
||||||
|
## Fonctionnalites
|
||||||
|
|
||||||
|
### Espace association
|
||||||
|
|
||||||
|
- creation et gestion du compte association ;
|
||||||
|
- fiche structure et informations administratives ;
|
||||||
|
- depot documentaire ;
|
||||||
|
- consultation de l'annuaire ;
|
||||||
|
- suivi des demandes et des decisions.
|
||||||
|
|
||||||
|
### Demarches metier
|
||||||
|
|
||||||
|
- demandes de subventions ;
|
||||||
|
- demande de reservation de salle ;
|
||||||
|
- demande de materiel evenementiel ;
|
||||||
|
- transmission de pieces justificatives ;
|
||||||
|
- suivi du cycle de traitement.
|
||||||
|
|
||||||
|
### Reservation d'espaces MJS
|
||||||
|
|
||||||
|
Les associations peuvent reserver differents espaces de la Maison de la Jeunesse des Savanes selon leurs besoins de reunion, de formation ou d'evenement :
|
||||||
|
|
||||||
|
- salles ;
|
||||||
|
- bureau ;
|
||||||
|
- dojo ;
|
||||||
|
- parvis ;
|
||||||
|
- autres espaces selon l'organisation metier retenue.
|
||||||
|
|
||||||
|
### Administration et pilotage
|
||||||
|
|
||||||
|
- gestion des associations ;
|
||||||
|
- suivi des demandes ;
|
||||||
|
- bordereau et referentiel ;
|
||||||
|
- logistique et materiel ;
|
||||||
|
- conformite, audit, apparence et supervision.
|
||||||
|
|
||||||
|
### Cartographie
|
||||||
|
|
||||||
|
- carte publique ;
|
||||||
|
- carte metier admin ;
|
||||||
|
- styles cartographiques auto-heberges ;
|
||||||
|
- logique public / admin dense.
|
||||||
|
|
||||||
|
## Architecture du projet
|
||||||
|
|
||||||
|
Le depot centralise le coeur technique, documentaire et operationnel du portail.
|
||||||
|
|
||||||
|
### Application
|
||||||
|
|
||||||
|
- `client/` : interface web React / Vite
|
||||||
|
- `server/` : API, logique metier, securite et generation documentaire
|
||||||
|
- `shared/` : contrats, schemas et configuration partagee
|
||||||
|
|
||||||
|
### Documentation et gouvernance
|
||||||
|
|
||||||
|
- `docs/` : documentation produit, exploitation, conformite et trajectoires
|
||||||
|
- `docs/compliance/` : RGPD, ISO 27001, sauvegardes, incidents, retention
|
||||||
|
- `docs/ux/` : roadmaps UX, harmonisation et optimisation portail
|
||||||
|
- `docs/forgejo/` : structuration Forgejo et fusion douce CCDS
|
||||||
|
|
||||||
|
### Exploitation et services
|
||||||
|
|
||||||
- `client/` : interface web
|
|
||||||
- `server/` : API et logique serveur
|
|
||||||
- `shared/` : contrats et configuration partages
|
|
||||||
- `docs/` : documentation vivante du portail
|
|
||||||
- `deployments/` : publication preprod / prod
|
- `deployments/` : publication preprod / prod
|
||||||
- `local-services/` : services locaux d'appui, dont Forgejo
|
- `local-services/` : services locaux d'appui, dont Forgejo
|
||||||
|
- `scripts/` : automatisations de maintenance, exploitation et support
|
||||||
|
|
||||||
## Fusion douce CCDS
|
### Convergence CCDS
|
||||||
|
|
||||||
Les anciens depots CCDS sont progressivement integres ici pour garder :
|
Les anciens depots CCDS sont progressivement reintegres ici afin d'avoir une seule porte d'entree projet, sans perdre l'historique :
|
||||||
|
|
||||||
- un seul point d'entree principal
|
|
||||||
- un historique preservé
|
|
||||||
- une lecture plus simple pour l'equipe
|
|
||||||
|
|
||||||
Ils sont reunis sous `convergence/` :
|
|
||||||
|
|
||||||
- `convergence/ccds-docs/`
|
- `convergence/ccds-docs/`
|
||||||
- `convergence/ccds-infra/`
|
- `convergence/ccds-infra/`
|
||||||
- `convergence/ccds-cartographie/`
|
- `convergence/ccds-cartographie/`
|
||||||
|
|
||||||
Le but est de centraliser sans perdre la memoire des travaux deja menes.
|
## Installation locale
|
||||||
|
|
||||||
## References rapides
|
### Pre-requis
|
||||||
|
|
||||||
|
- Node.js
|
||||||
|
- pnpm ou npm selon l'environnement courant
|
||||||
|
- Docker Desktop pour les services annexes si necessaire
|
||||||
|
- acces au depot et aux variables d'environnement locales
|
||||||
|
|
||||||
|
### Demarrage applicatif
|
||||||
|
|
||||||
|
Exemple de demarrage classique :
|
||||||
|
|
||||||
|
```bash
|
||||||
|
pnpm install
|
||||||
|
pnpm dev
|
||||||
|
```
|
||||||
|
|
||||||
|
Selon la configuration locale, l'application est generalement accessible sur :
|
||||||
|
|
||||||
|
- [http://localhost:3001](http://localhost:3001)
|
||||||
|
|
||||||
|
### Services complementaires
|
||||||
|
|
||||||
|
Selon les besoins du chantier, on peut aussi utiliser :
|
||||||
|
|
||||||
|
- Forgejo local pour la gouvernance projet ;
|
||||||
|
- bases Docker locales ;
|
||||||
|
- services cartographiques ou themes Forgejo ;
|
||||||
|
- stacks preprod / prod cote VPS.
|
||||||
|
|
||||||
|
## Forgejo et wiki CCDS
|
||||||
|
|
||||||
|
Le projet est pense pour etre lisible dans Forgejo, avec :
|
||||||
|
|
||||||
|
- un depot central principal : `ccds/portail-associations`
|
||||||
|
- un wiki de reference pour la lecture transverse
|
||||||
|
- une organisation CCDS clarifiee avec depots actifs et depots archives
|
||||||
|
|
||||||
|
References rapides :
|
||||||
|
|
||||||
- [Guide de fusion douce CCDS](./docs/forgejo/fusion-douce-ccds.md)
|
- [Guide de fusion douce CCDS](./docs/forgejo/fusion-douce-ccds.md)
|
||||||
- [Theme Forgejo CCDS](./local-services/forgejo/README.md)
|
- [Theme Forgejo CCDS](./local-services/forgejo/README.md)
|
||||||
|
- [Roadmap RGAA du portail](./docs/compliance/RGAA-001-roadmap-portail.md)
|
||||||
|
|
||||||
|
## Environnements
|
||||||
|
|
||||||
|
Le projet vit sur plusieurs contextes :
|
||||||
|
|
||||||
|
- local ;
|
||||||
|
- preproduction ;
|
||||||
|
- production.
|
||||||
|
|
||||||
|
## Accessibilite, conformite et qualite
|
||||||
|
|
||||||
|
Le portail fait l'objet d'un travail continu sur :
|
||||||
|
|
||||||
|
- l'experience utilisateur ;
|
||||||
|
- la lisibilite mobile et desktop ;
|
||||||
|
- la conformite RGPD ;
|
||||||
|
- la trajectoire ISO 27001 ;
|
||||||
|
- l'accessibilite numerique (RGAA) ;
|
||||||
|
- l'exploitation et la gouvernance.
|
||||||
|
|
||||||
|
## Statut
|
||||||
|
|
||||||
|
Projet en evolution active.
|
||||||
|
|
||||||
|
Le produit est deja exploitable, mais continue d'etre ameliore sur :
|
||||||
|
|
||||||
|
- l'ergonomie ;
|
||||||
|
- la cartographie ;
|
||||||
|
- l'accessibilite ;
|
||||||
|
- l'exploitation ;
|
||||||
|
- la documentation ;
|
||||||
|
- la coherence visuelle et fonctionnelle.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
**Portail Associations des Savanes 973**
|
||||||
|
Plateforme territoriale des demarches associatives
|
||||||
|
|
|
||||||
247
docs/compliance/RGAA-001-roadmap-portail.md
Normal file
247
docs/compliance/RGAA-001-roadmap-portail.md
Normal file
|
|
@ -0,0 +1,247 @@
|
||||||
|
# RGAA - Audit initial et roadmap de mise en conformite
|
||||||
|
|
||||||
|
## Contexte
|
||||||
|
|
||||||
|
Ce document formalise une **premiere passe RGAA** sur le portail `portail-association973.com`, croisee avec le code local et la structure actuelle de l'application.
|
||||||
|
|
||||||
|
Ce n'est **pas** une certification RGAA complete ni un audit legal exhaustif.
|
||||||
|
En revanche, c'est une base serieuse pour prioriser les corrections les plus utiles et structurer la trajectoire d'accessibilite.
|
||||||
|
|
||||||
|
Date de reference : **15 aout 2026**
|
||||||
|
|
||||||
|
## Perimetre observe
|
||||||
|
|
||||||
|
- page d'accueil publique ;
|
||||||
|
- structure applicative React / Vite ;
|
||||||
|
- dashboard association ;
|
||||||
|
- composants de navigation laterale ;
|
||||||
|
- composants de formulaire et de dialogue ;
|
||||||
|
- theme et comportements visuels generaux.
|
||||||
|
|
||||||
|
## Lecture generale
|
||||||
|
|
||||||
|
Le portail dispose deja d'un socle utile :
|
||||||
|
|
||||||
|
- `lang="fr"` defini dans [client/index.html](/Users/selecta/Documents/portail-associations/client/index.html)
|
||||||
|
- composants UI avec nombreuses gestions `focus-visible`
|
||||||
|
- labels caches (`sr-only`) presents sur plusieurs composants
|
||||||
|
- structure de boutons et controles deja assez riche
|
||||||
|
- plusieurs zones admin et dashboard deja pensees en navigation clavier
|
||||||
|
|
||||||
|
Mais il reste plusieurs chantiers importants pour atteindre un niveau RGAA plus solide et plus defendable.
|
||||||
|
|
||||||
|
## Constats principaux
|
||||||
|
|
||||||
|
### 1. Absence apparente de lien d'evitement
|
||||||
|
|
||||||
|
Je n'ai pas trouve de lien de type :
|
||||||
|
|
||||||
|
- `Aller au contenu`
|
||||||
|
- `Aller a la navigation`
|
||||||
|
|
||||||
|
Ce point est prioritaire pour l'accessibilite clavier et lecteur d'ecran.
|
||||||
|
|
||||||
|
Zones concernees :
|
||||||
|
|
||||||
|
- [client/src/App.tsx](/Users/selecta/Documents/portail-associations/client/src/App.tsx)
|
||||||
|
- [client/src/pages/Home.tsx](/Users/selecta/Documents/portail-associations/client/src/pages/Home.tsx)
|
||||||
|
- [client/src/pages/Dashboard.tsx](/Users/selecta/Documents/portail-associations/client/src/pages/Dashboard.tsx)
|
||||||
|
|
||||||
|
### 2. Landmarks et structure semantique encore incomplets
|
||||||
|
|
||||||
|
Le socle React route bien les pages, mais il reste a verifier et renforcer :
|
||||||
|
|
||||||
|
- presence systematique de `<main>`
|
||||||
|
- structure des `<header>`, `<nav>`, `<footer>`
|
||||||
|
- region principale unique par page
|
||||||
|
- titres de page coherents
|
||||||
|
|
||||||
|
Aujourd'hui, plusieurs vues semblent surtout composees de `div` structurelles.
|
||||||
|
|
||||||
|
### 3. Navigation mobile publique a clarifier
|
||||||
|
|
||||||
|
Dans [client/src/pages/Home.tsx](/Users/selecta/Documents/portail-associations/client/src/pages/Home.tsx), le bouton mobile du menu ouvre une `Sheet`, mais le declencheur icone n'expose pas clairement de libelle explicite dans le code visible.
|
||||||
|
|
||||||
|
Il faut consolider :
|
||||||
|
|
||||||
|
- `aria-label`
|
||||||
|
- annonce claire du menu
|
||||||
|
- ordre de tabulation
|
||||||
|
- retour du focus a la fermeture
|
||||||
|
|
||||||
|
### 4. Cohabitation riche visuelle / lisibilite
|
||||||
|
|
||||||
|
Le portail a beaucoup progresse visuellement, mais l'habillage immersif peut exposer plusieurs risques RGAA si non cadres :
|
||||||
|
|
||||||
|
- contrastes insuffisants selon certains fonds
|
||||||
|
- surcharge visuelle sur mobile
|
||||||
|
- decor trop present autour des CTA ou cartes
|
||||||
|
- lisibilite variable selon voile, blur, image et mode de presentation
|
||||||
|
|
||||||
|
Le module Apparence doit donc rester borne par des garde-fous accessibilite.
|
||||||
|
|
||||||
|
### 5. Gestion des erreurs et aides de formulaire a renforcer
|
||||||
|
|
||||||
|
Le code montre deja des `aria-invalid` sur certains champs, ce qui est bon.
|
||||||
|
|
||||||
|
Mais il reste a systematiser :
|
||||||
|
|
||||||
|
- `aria-describedby` pour rattacher aide + erreur
|
||||||
|
- messages d'erreur explicites en texte
|
||||||
|
- regroupement logique des champs
|
||||||
|
- annonce claire des etapes et validations
|
||||||
|
|
||||||
|
### 6. Composants interactifs a auditer par famille
|
||||||
|
|
||||||
|
Le design system interne parait plutot bien parti, mais il faut verifier de facon methodique :
|
||||||
|
|
||||||
|
- boutons icones
|
||||||
|
- toggles
|
||||||
|
- menus deroulants
|
||||||
|
- panneaux lateraux
|
||||||
|
- dialogues
|
||||||
|
- onglets et filtres
|
||||||
|
- cartes cliquables
|
||||||
|
|
||||||
|
En RGAA, les problemes viennent souvent des composants reutilises partout.
|
||||||
|
|
||||||
|
### 7. Motion, scroll et confort utilisateur
|
||||||
|
|
||||||
|
Le portail contient des transitions et micro-interactions utiles.
|
||||||
|
|
||||||
|
Il faut toutefois verifier :
|
||||||
|
|
||||||
|
- respect du `prefers-reduced-motion`
|
||||||
|
- absence de blocage au scroll
|
||||||
|
- absence d'animations perturbantes
|
||||||
|
- confort tactile et clavier equivalent
|
||||||
|
|
||||||
|
## Niveau de priorite recommande
|
||||||
|
|
||||||
|
### P1 - A traiter rapidement
|
||||||
|
|
||||||
|
- lien d'evitement global
|
||||||
|
- vrai `<main id="main-content">` sur toutes les vues
|
||||||
|
- labels explicites pour les boutons icones critiques
|
||||||
|
- focus management des sheets, menus et dialogues
|
||||||
|
- verification contraste CTA / textes / badges sur fonds dynamiques
|
||||||
|
|
||||||
|
### P2 - A traiter dans la passe suivante
|
||||||
|
|
||||||
|
- systematisation des aides et erreurs formulaire
|
||||||
|
- coherences des titres H1/H2/H3
|
||||||
|
- nettoyage des zones tres decoratives sur mobile
|
||||||
|
- controle des composants collapsibles, onglets et cartes cliquables
|
||||||
|
|
||||||
|
### P3 - A industrialiser
|
||||||
|
|
||||||
|
- matrice RGAA par composant
|
||||||
|
- checks visuels recurrents
|
||||||
|
- procedure de recette accessibilite preprod / prod
|
||||||
|
- revue continue du module Apparence avec garde-fous UX + accessibilite
|
||||||
|
|
||||||
|
## Roadmap d'execution
|
||||||
|
|
||||||
|
### Phase 1 - Socle semantique
|
||||||
|
|
||||||
|
- ajouter un lien d'evitement global
|
||||||
|
- ajouter une region principale unique par page
|
||||||
|
- verifier les `aria-label` manquants sur boutons icones critiques
|
||||||
|
- verifier la logique clavier du header public et des sidebars
|
||||||
|
|
||||||
|
### Phase 2 - Navigation et composants
|
||||||
|
|
||||||
|
- auditer `Sheet`, `Dialog`, `DropdownMenu`, `Tabs`, `Sidebar`
|
||||||
|
- renforcer la restitution du focus
|
||||||
|
- homogeneiser les intitules d'action
|
||||||
|
- verifier les zones cliquables et les cartes interactives
|
||||||
|
|
||||||
|
### Phase 3 - Formulaires et retours utilisateur
|
||||||
|
|
||||||
|
- rattacher chaque aide a son champ
|
||||||
|
- rattacher chaque erreur a son champ
|
||||||
|
- annoncer clairement succes, echec et etape
|
||||||
|
- verifier les parcours association les plus utilises
|
||||||
|
|
||||||
|
### Phase 4 - Apparence et confort visuel
|
||||||
|
|
||||||
|
- poser des seuils de contraste minimaux
|
||||||
|
- encadrer les reglages de voile / blur / fonds immersifs
|
||||||
|
- limiter les cas ou l'image parasite la lecture
|
||||||
|
- verifier le rendu mobile reel
|
||||||
|
|
||||||
|
### Phase 5 - Industrialisation
|
||||||
|
|
||||||
|
- checklist RGAA par release
|
||||||
|
- controles manuels desktop/mobile
|
||||||
|
- documentation courte "avant mise en prod"
|
||||||
|
- tableau de suivi par composant critique
|
||||||
|
|
||||||
|
## Checklist CSS / front
|
||||||
|
|
||||||
|
### Structure
|
||||||
|
|
||||||
|
- [ ] ajouter un lien `Aller au contenu`
|
||||||
|
- [ ] ajouter `id="main-content"` sur la region principale
|
||||||
|
- [ ] garantir un seul `<main>` par page
|
||||||
|
- [ ] verifier un H1 clair sur chaque vue majeure
|
||||||
|
|
||||||
|
### Navigation
|
||||||
|
|
||||||
|
- [ ] chaque bouton icone a un nom accessible
|
||||||
|
- [ ] chaque menu mobile restitue le focus proprement
|
||||||
|
- [ ] chaque sidebar est utilisable au clavier
|
||||||
|
- [ ] les liens actifs sont identifies visuellement et semantiquement
|
||||||
|
|
||||||
|
### Formulaires
|
||||||
|
|
||||||
|
- [ ] chaque champ obligatoire est annonce clairement
|
||||||
|
- [ ] chaque message d'erreur est relie au champ
|
||||||
|
- [ ] chaque aide utile est reliee via `aria-describedby`
|
||||||
|
- [ ] les validations sont comprehensibles sans couleur seule
|
||||||
|
|
||||||
|
### Visuel / CSS
|
||||||
|
|
||||||
|
- [ ] contraste texte / fond valide sur CTA principaux
|
||||||
|
- [ ] contraste badges / statuts valide
|
||||||
|
- [ ] focus visible partout
|
||||||
|
- [ ] aucun `outline: none` sans remplacement fort
|
||||||
|
- [ ] habillage immersif borne par des regles de contraste
|
||||||
|
- [ ] transparences limitees sur les zones fonctionnelles
|
||||||
|
- [ ] contenu lisible avec zoom navigateur
|
||||||
|
|
||||||
|
### Motion / confort
|
||||||
|
|
||||||
|
- [ ] prise en charge de `prefers-reduced-motion`
|
||||||
|
- [ ] transitions non bloquantes
|
||||||
|
- [ ] pas de scroll piege
|
||||||
|
- [ ] pas d'information transmise uniquement par animation
|
||||||
|
|
||||||
|
### Mobile
|
||||||
|
|
||||||
|
- [ ] navigation publique lisible sur petit ecran
|
||||||
|
- [ ] boutons CTA empiles sans collision
|
||||||
|
- [ ] sidebar admin mobile avec comportement propre
|
||||||
|
- [ ] calendrier mobile lisible et operable
|
||||||
|
|
||||||
|
## Recommandation produit
|
||||||
|
|
||||||
|
La bonne strategie ici n'est pas de "faire un audit RGAA a la fin".
|
||||||
|
La bonne strategie est de faire du **RGAA par couches** :
|
||||||
|
|
||||||
|
1. socle semantique
|
||||||
|
2. composants partages
|
||||||
|
3. parcours critiques
|
||||||
|
4. garde-fous visuels sur Apparence
|
||||||
|
5. verification continue
|
||||||
|
|
||||||
|
## Definition de fini raisonnable
|
||||||
|
|
||||||
|
On pourra considerer la passe RGAA serieuse lorsque :
|
||||||
|
|
||||||
|
- le portail a un lien d'evitement global ;
|
||||||
|
- les vues principales ont une region `<main>` fiable ;
|
||||||
|
- les composants critiques passent en navigation clavier ;
|
||||||
|
- les formulaires critiques ont erreurs + aides rattachees ;
|
||||||
|
- les reglages immersifs sont encadres par la lisibilite ;
|
||||||
|
- une checklist de recette accessibilite est jouee avant publication.
|
||||||
Loading…
Add table
Add a link
Reference in a new issue