Le pied de page propose des éléments d’information sur le site et une navigation secondaire pour l’utilisateur afin qu’il poursuive son parcours. Il est modulable selon les besoins et les exigences du site.
4 liens de références de l'écosystème institutionnel - obligatoires.
la liste de liens liés aux obligations légales. Cette liste doit être 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. - obligatoire.
une mention de la licence - obligatoire
“Sauf mention contraire, tous les contenus de ce site sont sous licence etalab-2.0”
Pour les développeur L’alternative textuelle du logo (attribut alt) doit impérativement contenir le texte présent dans l’image!
La taille des images / logos est à adapter selon vos cas de figure. Dans le snippet ci-dessus, la taille est mise de manière ‘inline’ dans un attribut style.
1
2
3
4
<!-- footer avec logo opérateur -->
<footer class="fr-footer" role="contentinfo" id="footer">
<div class="fr-container">
(...)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<!-- pied de page avec logo opérateur -->
<footer class="fr-footer" role="contentinfo" id="footer">
<div class="fr-container">
<div class="fr-footer__body">
<div class="fr-footer__brand fr-enlarge-link">
<p class="fr-logo">
République
<br>Française
</p>
<a class="fr-footer__brand-link" href="/" title="Retour à l’accueil du site - [À MODIFIER - texte alternatif de l’image : nom de l'opérateur ou du site serviciel] - République Française">
<img class="fr-footer__logo" style="width:3.5rem;" src="../../../example/img/placeholder.9x16.png" alt="[À MODIFIER - texte alternatif de l’image]" />
<!-- L’alternative de l’image (attribut alt) doit impérativement être renseignée et reprendre le texte visible dans l’image -->
</a>
</div>
<div class="fr-footer__content">
<p class="fr-footer__content-desc">Lorem [...] elit ut.</p>
<ul class="fr-footer__content-list">
<li class="fr-footer__content-item">
<a class="fr-footer__content-link" target="_blank" href="https://legifrance.gouv.fr">legifrance.gouv.fr</a>
</li>
<li class="fr-footer__content-item">
<a class="fr-footer__content-link" target="_blank" href="https://gouvernement.fr">gouvernement.fr</a>
</li>
<li class="fr-footer__content-item">
<a class="fr-footer__content-link" target="_blank" href="https://service-public.fr">service-public.fr</a>
</li>
<li class="fr-footer__content-item">
<a class="fr-footer__content-link" target="_blank" href="https://data.gouv.fr">data.gouv.fr</a>
</li>
</ul>
</div>
</div>
<div class="fr-footer__bottom">
<ul class="fr-footer__bottom-list">
<li class="fr-footer__bottom-item">
<a class="fr-footer__bottom-link" href="#">Plan du site</a>
</li>
<li class="fr-footer__bottom-item">
<a class="fr-footer__bottom-link" href="#">Accessibilité : non/partiellement/totalement conforme</a>
</li>
<li class="fr-footer__bottom-item">
<a class="fr-footer__bottom-link" href="#">Mentions légales</a>
</li>
<li class="fr-footer__bottom-item">
<a class="fr-footer__bottom-link" href="#">Données personnelles</a>
</li>
<li class="fr-footer__bottom-item">
<a class="fr-footer__bottom-link" href="#">Gestion des cookies</a>
</li>
</ul>
<div class="fr-footer__bottom-copy">
<p>Sauf mention contraire, tous les contenus de ce site sont sous <a href="https://github.com/etalab/licence-ouverte/blob/master/LO.md" target="_blank">licence etalab-2.0</a>
</p>
</div>
</div>
</div>
</footer>
Les listes de liens peuvent être classées par catégorie. Il est possible d’aller au maximum jusqu'à 6 colonnes de liens. Nous recommandons de ne pas dépasser des listes de plus de 8 liens.
Cette liste ne doit pas être le miroir des liens présents dans la navigation principale. Un travail de conception particulier doit être mené pour organiser les liens : ceux-ci peuvent pointer vers les contenus populaires/fonctionnalités phares du site ou les pages susceptibles de répondre aux questions restantes d'un visiteur.
Pied de page avec partenaires
Dans ses deux versions le pied de page peut intégrer un bloc partenaires.
Il se compose des éléments suivants:
Le pied de page simple (voir la structure ci-dessus) - obligatoire
du bloc partenaire - obligatoire
Logo du partenaire principal, ferré à gauche - obligatoire
Logos des partenaires additionnels, ferrés à droite - optionnels.
Pour les développeurs La taille des images / logos est à adapter selon vos cas de figure. Dans le snippet ci-dessus, les tailles sont mises de manière ‘inline’ dans un attribut style.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<!-- footer avec partenaires -->
<footer class="fr-footer" role="contentinfo" id="footer">
<div class="fr-container">
<div class="fr-footer__body">
<div class="fr-footer__brand fr-enlarge-link">
<a href="/" title="Retour à l’accueil du site - Nom de l’entité (ministère, secrétariat d‘état, gouvernement)">
<p class="fr-logo">
Intitulé
<br>officiel
</p>
</a>
</div>
<div class="fr-footer__content">
<p class="fr-footer__content-desc">Lorem [...] elit ut.</p>
<ul class="fr-footer__content-list">
<li class="fr-footer__content-item">
<a class="fr-footer__content-link" target="_blank" href="https://legifrance.gouv.fr">legifrance.gouv.fr</a>
</li>
<li class="fr-footer__content-item">
<a class="fr-footer__content-link" target="_blank" href="https://gouvernement.fr">gouvernement.fr</a>
</li>
<li class="fr-footer__content-item">
<a class="fr-footer__content-link" target="_blank" href="https://service-public.fr">service-public.fr</a>
</li>
<li class="fr-footer__content-item">
<a class="fr-footer__content-link" target="_blank" href="https://data.gouv.fr">data.gouv.fr</a>
</li>
</ul>
</div>
</div>
<div class="fr-footer__partners">
<h4 class="fr-footer__partners-title">Nos partenaires</h4>
<div class="fr-footer__partners-logos">
<div class="fr-footer__partners-main">
<a class="fr-footer__partners-link" href="#">
<img class="fr-footer__logo" style="height: 5.625rem" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - texte alternatif de l’image]" />
<!-- L’alternative de l’image (attribut alt) doit impérativement être renseignée et reprendre le texte visible dans l’image -->
</a>
</div>
<div class="fr-footer__partners-sub">
<ul>
<li>
<a class="fr-footer__partners-link" href="#">
<img class="fr-footer__logo" style="height: 5.625rem" src="../../../example/img/placeholder.16x9.png" alt="[À MODIFIER - texte alternatif de l’image]" />
<!-- L’alternative de l’image (attribut alt) doit impérativement être renseignée et reprendre le texte visible dans l’image -->
</a>
</li>
<li>
<a class="fr-footer__partners-link" href="#">
<img class="fr-footer__logo" style="height: 5.625rem" src="../../../example/img/placeholder.1x1.png" alt="[À MODIFIER - texte alternatif de l’image]" />
<!-- L’alternative de l’image (attribut alt) doit impérativement être renseignée et reprendre le texte visible dans l’image -->
</a>
</li>
<li>
<a class="fr-footer__partners-link" href="#">
<img class="fr-footer__logo" style="height: 5.625rem" src="../../../example/img/placeholder.9x16.png" alt="[À MODIFIER - texte alternatif de l’image]" />
<!-- L’alternative de l’image (attribut alt) doit impérativement être renseignée et reprendre le texte visible dans l’image -->
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="fr-footer__bottom">
<ul class="fr-footer__bottom-list">
<li class="fr-footer__bottom-item">
<a class="fr-footer__bottom-link" href="#">Plan du site</a>
</li>
<li class="fr-footer__bottom-item">
<a class="fr-footer__bottom-link" href="#">Accessibilité : non/partiellement/totalement conforme</a>
</li>
<li class="fr-footer__bottom-item">
<a class="fr-footer__bottom-link" href="#">Mentions légales</a>
</li>
<li class="fr-footer__bottom-item">
<a class="fr-footer__bottom-link" href="#">Données personnelles</a>
</li>
<li class="fr-footer__bottom-item">
<a class="fr-footer__bottom-link" href="#">Gestion des cookies</a>
</li>
</ul>
<div class="fr-footer__bottom-copy">
<p>Sauf mention contraire, tous les contenus de ce site sont sous <a href="https://github.com/etalab/licence-ouverte/blob/master/LO.md" target="_blank">licence etalab-2.0</a>
</p>
</div>
</div>
</div>
</footer>
Le partenaire principal est toujours placé à gauche. Les partenaires secondaires sont placés à droite si associés à un partenaires principal, sinon à gauche.
Le pied de page est présent sur l’ensemble des pages du site. Il est situé en fin de page. Le trait bleu marque la séparation entre le corps de la page et le pied de page.
Accessibilité
L'élément footer doit contenir le role aria contentinfo
1
<footer role=”contentinfo”>
La mention de conformité (ou non) au RGAA doit apparaître sur toutes les pages. Le lien vers la déclaration d’accessibilité du site doit être libellé de la façon suivante :
“Accessibilité : non conforme” si le taux de conformité est inférieur à 50% (ou qu’aucun audit n’a été effectué)
“Accessibilité : partiellement conforme” si le taux de conformité est supérieur à 50%.
“Accessibilité : totalement conforme” si le taux de conformité est égal à 100%.
Le texte de présentation optionnel peut être utilisé pour donner des informations sur le service (texte de présentation…) ou l’organisation (contact, adresse…).
Pour les libellés des liens, utiliser des formulations claires et concises. Il faut respecter la distinction des zones :
Les liens liés aux obligations (mentions légales, etc.)
Les liens liés à la sphère gouvernementale
Les liens internes et externes (liste présente en haut de footer, de la version complète du pied de page).
Personnalisation
Le style de ce composant n’est pas personnalisable. Toutefois, certains éléments sont optionnels - voir la structure du composant.
Besoin d’aide ?
L'équipe du DSFR est là pour vous aider. Retrouvez-la sur :
la communauté slackpour poser vos questions, et échanger avec d’autres utilisateurs. Vous êtes agent de l’État et souhaitez accéder au slack ? Rejoignez la communauté dès maintenant !
