Le bloc Sommaire liste les titres de la page et mène à chacun d’un clic. Il marque celui que le visiteur lit. Cette page décrit le choix des titres, l’affichage de la liste, les dépliants, l’habillage de l’entrée et le suivi de lecture.
Ajouter le bloc
Le sommaire liste les blocs Titre de la page. Commencez par écrire vos titres, puis insérez le bloc Sommaire (Ajouter un bloc), ou tapez table des matières dans la recherche des blocs. L’arborescence de vos titres s’affiche aussitôt et suit chaque changement de texte ou de niveau.
Sur une page sans bloc Titre, l’éditeur affiche un avis. Sur le site, le sommaire ne s’affiche pas.
Les titres qui ont des sous-titres deviennent des dépliants, avec un symbole : le visiteur les ouvre pour voir les sous-titres. Les autres sont de simples liens vers leur section.
Choisir les titres
Sélectionnez le bloc Sommaire, onglet Réglages, panneau Titres. Il range les titres comme le sommaire : chaque sous-titre est décalé vers la droite sous son titre.
- Pour retirer un titre du sommaire, désactivez sa bascule. Réactivez-la pour le remettre. L’aperçu suit.
- Pour un autre libellé dans le sommaire, écrivez-le dans le champ sous la bascule, où le texte du titre s’affiche en grisé. Le titre de la page ne change pas.
- Un titre rendu invisible reste dans le sommaire, sauf si vous le retirez.
- Un titre qui affiche une donnée du contenu, le titre répété dans une carte de liste par exemple, n’entre pas dans le sommaire.
- Les questions d’un Accordéon n’y entrent pas : le sommaire ne liste que les blocs Titre.
Régler l’affichage de la liste
Le panneau Affichage de la liste règle la profondeur et l’allure de la liste.
| Réglage | Effet | Valeur par défaut |
|---|---|---|
| Niveau de titre maximum | Les titres plus profonds que ce niveau sont écartés. À H2, le sommaire garde les titres H1 et H2. | H2 |
| Retrait (px) | Le retrait des niveaux imbriqués, en pixels, 0 compris. Vide, celui du navigateur, 40 px. | Vide |
| Style de liste par niveau | La puce ou la numérotation de chaque niveau : aucune, un disque, un cercle, un carré, des chiffres, des lettres ou des chiffres romains. Pour les lettres et les chiffres romains, Casse choisit les minuscules ou les majuscules. | Par défaut |
| Numérotation imbriquée | Numérote chaque élément par rapport à son parent : 1, 1.1, 1.1.1. Proposé quand tous les niveaux sont numérotés. | Désactivé |
Sans réglage, le sommaire se lit comme une liste de liens, sans puce ni numéro et sans retrait au premier niveau. Une puce choisie pour un niveau s’affiche et redonne son retrait au premier niveau.
Régler les dépliants
Le panneau Réglages de l’accordéon règle les titres qui ont des sous-titres.
| Réglage | Effet | Valeur par défaut |
|---|---|---|
| Ne peut pas être fermé | Toutes les sections restent dépliées et le visiteur ne peut pas les replier. Les autres réglages du panneau disparaissent. | Désactivé |
| Mode d’ouverture | Un à la fois : ouvrir une section replie ses voisines du même niveau. La section qui la contient reste ouverte. Multiple : plusieurs sections restent ouvertes. Un à la fois est grisé avec Tous ouverts par défaut. | Un à la fois |
| Tous ouverts par défaut | Toutes les sections sont ouvertes au chargement. Demande le mode Multiple. | Désactivé |
| Style du symbole | Le + qui pivote pour former un ×, le + qui devient −, le chevron qui bascule de ↓ à ↑ ou le chevron qui pivote de → à ↓. | Le + qui pivote |
| Cercle autour du symbole | Entoure le symbole d’un cercle. | Désactivé |
| Position du symbole | Gauche ou Droite du texte. | Droite |
Le symbole reste affiché sur les titres qui ont des sous-titres : il est le seul repère d’une entrée dépliable. Avec Ne peut pas être fermé, rien ne se replie et le symbole disparaît, comme sur l’Accordéon. Une section repliée ne s’ouvre pas pendant le défilement : le visiteur la déplie lui-même.
Habiller l’entrée
Le sommaire contient un seul bloc Entrée du sommaire, qui habille chaque titre, à chaque niveau. Un titre et ses sous-titres prennent le même habillage et se distinguent par le retrait, le symbole et la puce de leur niveau.
- Dans l’aperçu, cliquez sur n’importe quel titre du sommaire. L’entrée du sommaire se sélectionne.
- Réglez-la dans l’onglet Styles. Les autres titres de l’aperçu reprennent son habillage à mesure.
- Pour revenir aux réglages du sommaire, sélectionnez le bloc Sommaire, par son pourtour ou dans la vue d’ensemble du document.
| État | Habille |
|---|---|
| Par défaut | Une entrée du sommaire. |
| Survol | L’entrée sous le pointeur. |
| Focus | L’entrée atteinte au clavier. |
| Actif | L’entrée du titre en cours de lecture. L’aperçu montre l’entrée dans cet état. |
L’entrée porte le style enregistré Entrée du sommaire : un soulignement au survol et au focus, un peu d’espace autour du texte. L’entrée en cours de lecture est en couleur principale et en gras. Son panneau Couleurs n’a pas de couleur des liens : l’entrée est elle-même un lien.
La partie Sommaire du catalogue de design donne une allure aux entrées de tous les sommaires du site : Simple, Rail ou Pastille (Adopter un design du catalogue). Le bloc Sommaire lui-même a deux états, Par défaut et Survol. Il n’a pas d’onglet Animations.
Le titre en cours de lecture
Pendant que le visiteur fait défiler la page, le sommaire marque l’entrée du titre qu’il lit :
- le titre le plus haut encore visible à l’écran ;
- au milieu d’une longue section, quand aucun titre n’est à l’écran, le dernier titre dépassé ;
- au-dessus du premier titre, aucune entrée.
Un clic sur une entrée la marque. Elle le reste tant que son titre est à l’écran. Un titre en bas de page, qui ne peut pas remonter en haut de l’écran, garde la marque.
Sur téléphone
Sur un petit écran, un sommaire long se raccourcit avec Niveau de titre maximum, ou en gardant ses sections repliées au chargement.
Accessibilité
- Le sommaire est annoncé comme une zone de navigation nommée Sommaire. Le champ Nom de la région, en haut de l’onglet Réglages, remplace ce nom, « Sur cette page » par exemple. Vide, le sommaire garde le sien, affiché en grisé.
- Chaque entrée est un lien vers l’ancre de son titre : un lien partagé mène à la bonne section.
- Un lecteur d’écran annonce l’entrée marquée comme l’emplacement courant. Sans JavaScript, le sommaire reste une liste de liens, sans entrée marquée.
- Les dépliants sont des éléments natifs du navigateur : ils s’ouvrent sans script, au clavier comme à la souris. Leur état ne se garde pas d’une visite à l’autre.