💡  Contexte / origine de l’idée

Les produits issus de Beta, doivent respecter le DSFR pour leurs interfaces accessibles au grand public.

🤷‍♂️  Description de l’idée

Pour respecter la charte de l’Etat et améliorer l’accessibilité de notre service, il faudrait dans un premier temps passer le header et le footer du site rdv-i au DSFR.

Header rdv-i actuel :

Header DSFR à mettre en place : "En-tête avec accès rapides"

Footer rdv-i actuel :

Footer DSFR à mettre en place : Pied de page complet, avec partenaires

👩‍🎨  Conception

NOUVEAU HEADER rdv-i conforme au DSFR :
L’en-tête se compose :

• du bloc Marque Etat (dont [les règles de composition sont disponibles ici](https://www.gouvernement.fr/marque-Etat)) - obligatoire.
• du nom de site → logo rdv-insertion
• d’une partie fonctionnelle - proposant des accès rapides adaptés aux besoins particuliers de chaque site. Pour rdv-insertion, c’est pour l’instant que le CTA “Connexion Agent”. Ces liens sont au bleu DSFR "blue-france-sun-113 000091"

Maquette nouveau header rdv-i :
https://www.figma.com/design/ImrCdy0RLn7k2YzefjSAcw/Site-vitrine?node-id=193-5090&t=3GOIsPDznlHKUhJr-4

En responsive, le logo passerai sous le bloc marque et les accès rapides connexion agent serait dans un menu burger (cf.https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/en-tete)

Accessibilité, règles du DSFR pour l'en-tête :
-> Les liens d'évitement (masqués ou non) sont placés juste avant le header.
-> Gestion du lien “retour à l’accueil”
Le lien vers l’accueil du site est placé sur le nom du site (qu’il soit dans le bloc-marque, le nom du site et sa baseline ou le logo).
Le lien est étendu à l’ensemble du bloc-marque en css par le bias de la classe fr-enlarge-link.
Le title du lien doit contenir le terme Accueil, suivi du nom du site. title="Accueil - [À MODIFIER | Nom du site / service]”.

NOUVEAU FOOTER rdv-i conforme au DSFR :

Il se compose des éléments suivants:

• Une section présentant des listes de liens du site : “Guide d’utilisation”, “Statistiques”
• un bloc marque : L’Etat + La Plateforme de l’inclusion
• un texte de présentation : reprendre celui que l’on a actuellement sur le site, dans l’encart bleu au-dessus de “ça vous intéresse”.
• 4 liens de références de l'écosystème institutionnel : “inclusion.gouv.fr”,”service-public.fr”,”travail-emploi.gouv.fr” et “data.gouv.fr”
• Un bloc “partenaires” : Dinum, RDVSP, Les emplois de l’inclusion, FranceTravail et FranceTravail.io
• la liste de liens liés aux obligations légales. Cette liste est définie en fonction du site, toutefois les liens & contenus suivants sont obligatoires : “accessibilité : non/partiellement/totalement conforme”, mentions légales, données personnelles et gestion des cookies qui sont dans la politique de confidentialité.
• une mention de la licence - obligatoire“Sauf mention contraire, tous les contenus de ce site sont sous licence etalab-2.0”
  Pour en savoir plus sur le footer DSFR : https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/pied-de-page

Maquette Footer
https://www.figma.com/design/ImrCdy0RLn7k2YzefjSAcw/Site-vitrine?node-id=153-3853&t=3GOIsPDznlHKUhJr-4

NTB :
La phrase étant reprise dans le nouveau footer, le bloc "Ce service est proposé par le Groupement ... ceux qui les accompagnent.", peut être supprimé du site vitrine. Le bloc "ca vous intéresse" peut passer sur fond blanc pour se distinguer du bloc vidéo.

Responsive : Pas de règles pour le footer DSFR mentionner dans leur site.
Accessibilité : L'élément footer doit contenir le role aria contentinfo. La mention sur la conformité au RGAA doit apparaître sur toutes les pages de l'outil rdv-i.