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
|
||||
- `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 :
|
||||
|
||||
- un seul point d'entree principal
|
||||
- un historique preservé
|
||||
- une lecture plus simple pour l'equipe
|
||||
|
||||
Ils sont reunis sous `convergence/` :
|
||||
Les anciens depots CCDS sont progressivement reintegres ici afin d'avoir une seule porte d'entree projet, sans perdre l'historique :
|
||||
|
||||
- `convergence/ccds-docs/`
|
||||
- `convergence/ccds-infra/`
|
||||
- `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)
|
||||
- [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