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 :