Sommaire (Table of Contents)

Permet à l'usager de repérer la structure d'un document ou d'une démarche et d'y naviguer directement.

1. Quand utiliser le sommaire ?

Le composant Sommaire est recommandé sur toutes les pages éditoriales longues, articles de blog, guides de procédures administratives et pages de documentation.

Bonne pratique UX : Ne pas confondre le Sommaire (qui utilise des ancres # in-page) et le Menu Latéral (qui pointe vers des URLs de pages distinctes).

2. Structure & Code HTML

    
HTML

<nav class="ml-summary" aria-label="Sommaire de la page">
  <div class="ml-summary__title">SOMMAIRE</div>
  <ol class="ml-summary__list">
    <li class="ml-summary__item">
      <a href="#section-1" class="ml-summary__link">1. Inscription et pièces à fournir</a>
    </li>
    <li class="ml-summary__item">
      <a href="#section-2" class="ml-summary__link">2. Délais d'instruction</a>
    </li>
    <li class="ml-summary__item">
      <a href="#section-3" class="ml-summary__link">3. Contact & Assistance</a>
    </li>
  </ol>
</nav>

3. Utilisation avec le composant Astro

Dans vos projets Astro, vous pouvez directement importer et réutiliser le composant Sommaire.astro :

    
ASTRO

---
import Sommaire from '../components/Sommaire.astro';

const items = [
  { href: "#section1", label: "1. Présentation générale" },
  { href: "#section2", label: "2. Formalités nécessaires" }
];
---

<Sommaire title="SOMMAIRE" items={items} />

4. Rôles & Accessibilité

Le composant englobant utilise l'élément <nav> avec un attribut aria-label="Sommaire de la page".
La liste utilise un élément ordonné <ol> pour exprimer la hiérarchie séquentielle des sections.
Chaque lien pointe explicitement vers l'identifiant (id="...") du titre de section correspondant.