coastdigitalgroup/coastai-skills

Système de Table des Matières (TdM)

Objectif

Le Système de Table des Matières (TdM) fournit une méthodologie pour concevoir des menus de navigation intra-page qui reflètent la structure d'une seule page ou d'un document. Il résout le problème de la « fatigue de défilement » dans les contenus longs en offrant une carte visuelle constante de la hiérarchie de la page, permettant aux utilisateurs de comprendre leur contexte actuel et de sauter instantanément à des sections spécifiques sans perdre le fil.

Cas d'usage

• Documentation et guides techniques : Naviguer dans des hiérarchies profondes d'en-têtes et de sous-en-têtes.
• Articles longs et billets de blog : Fournir un plan pour des contenus éditoriaux de plus de 2000 mots.
• Pages de destination complexes : Aider les utilisateurs à sauter entre les sections Fonctionnalités, Tarifs et FAQ.
• Pages juridiques et politiques : Naviguer dans des clauses denses et des sections numérotées.
• Centres de ressources : Organiser de longues listes de liens ou d'outils sur une seule page.

Quand ne PAS utiliser

• Contenu court (<3 sections) : Si la page entière peut être parcourue en deux défilements, une TdM ajoute un bruit visuel inutile.
• Navigation principale du site : Ne pas utiliser une TdM pour passer d'une page à l'autre ; utilisez plutôt site-navigation-system.
• Assistants linéaires : Pour les processus étape par étape où l'utilisateur doit suivre un ordre fixe, utilisez step-progress-system.
• Marketing minimaliste : Lorsque l'objectif est un flux narratif unique et ininterrompu sans diversion.

Entrées

1. Hiérarchie des en-têtes : La carte des balises <h2> à <h4> de la page.
2. Contexte de mise en page : L'espace horizontal disponible (barre latérale ou en ligne).
3. Conteneur de défilement : Le défilement se produit-il sur le corps ou un conteneur spécifique débordant ?
4. Jetons de marque : Espacement, typographie et couleurs d'état « Actif » du système de design.

Sorties

1. Spécification d'anatomie de la TdM : Définitions visuelles pour les éléments de liste, les niveaux d'indentation et l'indicateur « Actif ».
2. Plan du Scroll-Spy : Logique de mise à jour de l'état « Actif » lorsque l'utilisateur fait défiler.
3. Carte d'adaptation réactive : Comment la TdM passe d'une barre latérale de bureau à un utilitaire mobile (par exemple, en-tête collant ou tiroir inférieur).
4. Spécification de guidage : Définition des comportements de défilement fluide et de la gestion du focus.

Workflow

1. Auditer le plan du document

Extraire la structure des en-têtes. Une TdM propre dépend d'une progression logique h1 -> h2 -> h3.

• Niveau primaire : Généralement dérivé des balises <h2>.
• Niveau secondaire : Dérivé des balises <h3> (indentées).
• Niveau tertiaire : Rarement affiché dans la TdM à moins que le document ne soit exceptionnellement dense ; envisagez de les replier par défaut.

2. Sélectionner le motif de mise en page

Choisir un agencement spatial en fonction de la mise en page de la page :

• Barre latérale persistante (droite/gauche) : Meilleure pour les grands écrans (Bureau). Garde la carte visible en permanence.
• Résumé en ligne : Placé en haut de l'article. Meilleur pour les contenus mobiles ou de longueur moyenne où la « persistance » n'est pas nécessaire.
• En-tête collant/barre flottante : Une version réduite qui n'apparaît qu'après avoir défilé au-delà du héros.

3. Établir la hiérarchie visuelle (niveaux)

Appliquer le visual-hierarchy-system pour indiquer la profondeur :

• Indentation : Utiliser un espacement horizontal cohérent (par exemple, --space-s par niveau) pour montrer les relations parent-enfant.
• Typographie : Utiliser une taille de police plus petite ou une couleur atténuée pour les sous-niveaux (h3) par rapport aux niveaux primaires (h2).
• Indicateurs : Utiliser une « ligne de progression » verticale sur la gauche/droite de la liste pour relier visuellement les éléments.

4. Concevoir l'état Scroll-Spy (Actif)

La TdM doit rester synchronisée avec la zone d'affichage de l'utilisateur :

• Le lien actif : Mettre en évidence le lien correspondant à la section actuellement en haut de la zone d'affichage.
• L'effet « Ligne active » : Si une ligne verticale est utilisée, animer un marqueur pour qu'il glisse jusqu'à la position de l'élément actif.
• Délai de rétroaction : Assurer une mise à jour rapide de l'état actif (<100 ms) mais inclure un petit tampon pour éviter le scintillement lors du défilement entre les en-têtes.

5. Planifier le guidage réactif

Les barres latérales disparaissent généralement sur mobile ; prévoir une alternative :

• Le déclencheur mobile de la TdM : Un bouton collant (par exemple, « Dans cette section ») en haut ou en bas de l'écran qui ouvre un tiroir.
• Le dévoilement progressif : Afficher uniquement le <h2> courant dans une barre collante, avec un chevron pour développer la liste complète.

Règles de décision

• La limite « Trois niveaux » : Ne jamais afficher plus de 3 niveaux de profondeur dans une TdM. Si le contenu est plus profond, simplifier la TdM pour se concentrer uniquement sur h2 et h3.
• Indentation plutôt qu'icônes : Utiliser l'indentation pour montrer la hiérarchie plutôt que des puces ou des icônes, qui peuvent encombrer la liste de texte dense.
• Unicité de l'état actif : Un seul élément de la TdM doit être « Actif » à la fois.
• Seuil de collage : La TdM ne doit devenir collante (fixe) que lorsqu'elle atteint le haut de la zone d'affichage, pas immédiatement au chargement de la page.
• Clic pour sauter : Cliquer sur un lien de la TdM doit utiliser un « défilement fluide » pour éviter la désorientation, et DOIT mettre à jour le hash de l'URL (#section-id) pour la possibilité de partage.

Contraintes

• Accessibilité : La TdM doit être encapsulée dans une balise <nav> avec aria-label="Table des matières". Le lien actif doit utiliser aria-current="true" (ou aria-current="location"). Assurer que l'anneau de focus est visible lors de la navigation par tabulation à travers les liens.
• Contraste : Les états actif et inactif doivent respecter les exigences WCAG AA (4,5:1).
• Réactivité : Sur mobile, la TdM ne doit pas chevaucher le contenu textuel principal ; utiliser un tiroir ou une section basculable.
• Synchronisation du contenu : Le texte du lien dans la TdM doit correspondre exactement au texte de l'en-tête (ou être une version raccourcie clairement reconnaissable).

Schémas d'échec courants

• L'état « obsolète » : La TdM met en évidence la mauvaise section parce que le point de déclenchement du scroll-spy est défini trop haut ou trop bas.
• L'obscurcisseur de contenu : Une TdM collante qui chevauche le texte qu'elle est censée aider à lire.
• Surcharge de profondeur : Afficher chaque h4 et h5, rendant la TdM plus longue que la zone d'affichage et nécessitant sa propre barre de défilement (éviter les barres de défilement imbriquées).
• Identifiants manquants : Des liens qui ne fonctionnent pas parce que les en-têtes n'ont pas d'attributs id correspondants.
• Bouton Retour cassé : Sauter à une section sans mettre à jour le hash de l'URL, empêchant les utilisateurs d'utiliser le bouton « Retour » du navigateur pour revenir à la TdM.

Critères de validation

• Une hiérarchie visuelle claire (indentation) existe entre les niveaux h2 et h3.
• Le scroll-spy met correctement en évidence la section active lorsque l'utilisateur fait défiler.
• Cliquer sur un lien déclenche un défilement fluide vers la section correcte.
• Le hash de l'URL est mis à jour lors du clic sur un lien de la TdM.
• La TdM est encapsulée dans un point de repère <nav aria-label="Table des matières">.
• L'état actif est accessible via aria-current.
• Un motif de guidage spécifique au mobile (par exemple, tiroir ou barre collante) est défini.
• Pas plus de 3 niveaux de hiérarchie ne sont affichés.