Sommaire - Summary
Le sommaire permet aux utilisateurs d’avoir un aperçu du contenu et de naviguer entre les différentes sections d’une page.
Sommaire
Le sommaire reprend les titres de section de la page sous forme d'ancre vers chaque titre de section. Au clic sur un des liens, l’utilisateur est redirigé dans la page, au niveau de la section cherchée.
Le sommaire est placé en haut de page juste avant le corps de texte de la page. Il ne s’agit pas d’un élément fixé.
Structure
Il se compose des éléments suivants :
- Un titre - obligatoire.
- Une liste d’ancre - obligatoire.
<nav class="fr-summary" role="navigation" aria-labelledby="fr-summary-title">
<p class="fr-summary__title" id="fr-summary-title">Sommaire</p>
<ol class="fr-summary__list">
<li>
<a class="fr-summary__link" href="#titre-ancre-1">Titre de l’ancre</a>
</li>
<li>
<a class="fr-summary__link" href="#titre-ancre-2">Titre de l’ancre</a>
</li>
<li>
<a class="fr-summary__link" href="#titre-ancre-3">Titre de l’ancre</a>
</li>
<li>
<a class="fr-summary__link" href="#titre-ancre-4">Titre de l’ancre</a>
</li>
<li>
<a class="fr-summary__link" href="#titre-ancre-5">Titre de l’ancre</a>
</li>
</ol>
</nav>
Le titre “Sommaire” doit toujours être placé au début de la liste de lien.
Pour les développeurs
Le titre, matérialisé par la classe fr-summary__title peut être : - une balise <p> : <p class="fr-summary__title"> ou - une balise de titre : <h2 class="fr-summary__title"> à <h6>. Vous pouvez ainsi adapter le titre du bloc à la structure et l’architecture de votre contenu.
Règles d’utilisation
Usages
Le sommaire est à utiliser dans une page de contenu longue ou à forte densité. Il n’est pas recommandé de l’utiliser sur des pages courtes.
Le sommaire précède la zone texte d'une page, le fond de couleur est destinée à le séparer visuellement du contenu .
Si un chapô est présent en début de page, le sommaire s’affiche entre le chapô et le contenu éditorial.
Accessibilité
Les ancres sont placées sur les titres <hx> du contenu.
Note : Pour repositionner le focus sur un élément qui n’est pas un lien ou un bouton, vous devez implémentez un attribut tabindex=”-1” sur l'élément.
Exemple : <h2 id="titre-ancre-1" tabindex="-1">Titre de l’ancre</h2>
Contenus
Le contenu des liens du sommaire doit reprendre le texte exact de chaque titre de section.
Personnalisation
Ce composant n’est pas personnalisable.
Besoin d'aide ?
L'équipe du DSFR est là pour vous aider.
Retrouvez-la sur :
- la communauté slack pour 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 ! - le centre de support pour envoyer vos demandes de correctifs et d'évolution.