RGAA et expérience utilisateur : Refonte formulaire

[colinux]

Feuille de route :

• [x] Mise en œuvre des critères "simples" / facilement actionnables (alt sur <image />…) (pas nécessairement sur les pages qui font l'objet d'une refonte prévue) @colinux in #7700
• [x] Identification des critères pour lesquels on a besoin d'assistance par un spécialiste RGAA (à partir de l'audit 2021) @colinux @Olivier-Marcellin
• [ ] Validation des maquettes par un spécialiste : @Olivier-Marcellin
  • [ ] Liste des dossiers
  • [ ] Formulaire
  • [x] Optionnel: refonte page contact
• [ ] Intégration HTML/CSS des nouvelles maquettes (par un presta? ; refonte totale CSS sur ces nouvelles pages ?)
• [ ] Mise en place des nouvelles maquettes intégrées
  • [ ] Validation & feedback indépendant de chaque champ
• [ ] Validation de l'intégration du nouveau formulaire par spécialiste ?
• [x] Mise en œuvre des autres recommandations les plus impactantes pour DS (en particulier thématique "Formulaires")
• [x] Audit (décembre 2022)
• [ ] Qualité coordonnées de contact pour l'usager
• [ ] UX - Meilleur emplacement du contact
• [ ] Refonte formulaire - nouvelles maquettes DSFR - Mise à jour démarche type

Ressources :

• https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/
• Audit 2021 https://doc.demarches-simplifiees.fr/declaration-daccessibilite
• Maquettes https://www.figma.com/file/YKcafywdYhT6ABFlmy5d56/Lisibilité-des-champs-textes?node-id=3%3A9573

Autres issues concernées :

• 7387

• 6544

• 7400

• 6781

• 6772

• …

[julieSalha]

Refonte des champs de formulaires afin d'améliorer l'expérience utilisateur y compris pour les personnes en situations de handicap : https://www.demarches-simplifiees.fr/commencer/demarche-type-bonnes-pratiques-de-conception-acces

Maquette UI : UI - Tous types de champs

[julieSalha]

Liste types de champ :

1. Structure des champs :

• Bloc répétable : Structure HTML ok.

• [ ] Mise à jour styles

• [ ] Mise à jour wording (boutons...).

• Date :

• [ ] Mise à jour des styles grâce au DSFR

• [ ] Ajouter par défaut (sans modification possible de l'administrateur) le format attendu en description du champ : "Format attendu : JJ/MM/AAAA. Exemple : 01/12/2010"

• Date et heure :

• [ ] Mise à jour de la structure et des styles grâce aux maquettes et au DSFR

• [ ] Ajouter par défaut les formats attendus en description pour les trois types de champs.

• Lien vers un autre dossier :

• [ ] Mise à jour des styles grâce au DSFR

• [ ] Ajouter une description par défaut (sans modification possible de l'administrateur) sur le format attendu : "Renseignez un numéro de dossier valide"

2. État civil :

• Civilité :

• [ ] Mise à jour des styles grâce au DSFR

• [ ] Structure HTML : Se baser sur le DSFR - Bouton radio - Radio button et intégrer la légende du groupe de champs dans la balise <legend>

• Adresse électronique :

• [ ] Mise à jour des styles grâce au DSFR

• [ ] Ajouter une description par défaut précisant le format attendu : "L'adresse électronique doit être valide. Format attendu : nom@domaine.fr"

• Téléphone :

• [ ] Mise à jour des styles grâce au DSFR

• [ ] Ajouter une description par défaut précisant le format attendu : "Le numéro de téléphone doit être valide."

• [ ] Ajouter l'option "Je vis à l'étranger"

3. Localisation :
   • Adresse :
   • [ ] Mise à jour des styles grâce au DSFR
   • [ ] Ajouter une description par défaut précisant le format attendu : "Saisissez une adresse, une voie, un lieu-dit ou une commune. Ex : 11 rue Réaumur Paris"
   • [ ] Ajouter les options "Je vis à l'étranger" et "L'adresse n'est dans la liste"

• Commune :

• [ ] Mise à jour styles

• [ ] Ajouter l'option' "Je vis à l'étranger"

• Département :

• [ ] Mise à jour des styles grâce au DSFR

• Région :

• [ ] Mise à jour des styles grâce au DSFR

• Pays :

• [ ] Mise à jour des styles grâce au DSFR

• EPCI :

• [ ] Mise à jour de la structure en 3 champs et des styles grâce au DSFR

• [ ] Ajouter des descriptions avec les formats attendus par défaut pour les trois champs.

• Paiement et identification :

• Numéro IBAN :

• [ ] Mise à jour des styles grâce au DSFR

• [ ] Ajouter une description par défaut précisant le format attendu : "Saisissez une adresse, une voie, un lieu-dit ou une commune. Ex : 11 rue Réaumur Paris"

• Numéro SIRET :

• [ ] Mise à jour des styles grâce au DSFR

• [ ] Ajouter une description par défaut précisant le format attendu : "Saisissez 14 chiffres sans espace."

4. Champ standard :
   • Texte court :
   • [ ] Mise à jour des styles grâce au DSFR

• Texte long :

• [ ] Mise à jour des styles grâce au DSFR

• Nombre décimal :

• [ ] Mise à jour des styles grâce au DSFR

• [ ] Ajouter une description par défaut précisant le format attendu : "Vous pouvez saisir jusqu'à 3 décimales après la virgule."

• Nombre entier :

• [ ] Mise à jour des styles grâce au DSFR

• [ ] Ajouter une description par défaut précisant le format attendu : "Saisissez un nombre entier sans décimale ni fraction."

5. Pièces jointes :

   • [ ] Pièces justificative Ticket lié : Pièce justificative - Modèle à télécharger - a11y#8683
   • [ ] Titre identité

6. Choix :

   • Case à cocher seule :
   • [ ] Mise à jour des styles grâce au DSFR

• Choix simple :

• [ ] Mise à jour de la structure et des styles grâce au DSFR

• Choix multiple :

• [ ] Mise à jour des styles grâce au DSFR

• Deux menus déroulants liés : Ticket lié : Deux menus déroulants liés (a11y)#8671

• Oui/Non :

• [ ] Mise à jour de la structure et des styles grâce au DSFR

7. Référentiel externe :
   • Annuaire de l'éducation :
   • [ ] Mise à jour des styles grâce au DSFR

• RNA :

• [ ] Mise à jour des styles grâce au DSFR

• [ ] Ajouter une description par défaut précisant le format attendu comme sur la maquette.

• [ ] Carte Ticket lié : Champ Carte - a11y#8691

[Olivier-Marcellin]

Déplacé sur le bon ticket :)

[Olivier-Marcellin]

Déplacé sur le bon ticket :)