Index d’ancrage

Un index d’ancrage est une rangée de liens compacts avec libellé qui mène aux sections répétées de la page courante. C’est courant sur les pages de référence pilotées par des données où chaque section a un nombre : lettres, catégories, régions, zones ou groupes similaires.

Exemple#

Variantes#

Le partial offre un seul motif visuel. L’appelant peut omettre le nombre, omettre le libellé visible d’introduction ou ajouter un labelClass au libellé d’un élément. Ce sont des variations de contenu, pas des composants distincts. Utilisez une rangée de filtres lorsque les contrôles modifient le jeu de données.

Quand l’utiliser#

• La page contient des sections répétées et les lecteurs doivent pouvoir accéder directement à l’une d’elles.
  • C’est courant sur les pages de référence pilotées par des données où chaque section porte un nombre : lettres, catégories, régions, zones.
• Jamais pour des filtres actifs.
  • Un filtre change ce qui est visible; un index d’ancrage déplace seulement le lecteur vers une section existante. Ce rôle revient à la rangée de filtres.
• Le libellé visible nomme à la fois la destination et la signification du nombre, par exemple « Aller à la région (nombre de pays ou zones) : »

Implémentation#

{{ partial "data-page/anchor-index.html" (dict "items" $anchorItems "ariaLabelKey" "m49Regions" "labelKey" "geographicRegionsAnchorIndexLabel") }}

dict "label" "Europe" "href" "#m49-region-150" "count" 52

<div class="not-prose flow-section">
  <p class="meta mb-[var(--space-2xs)]">Aller à la région (nombre de pays ou zones) :</p>
  <nav class="anchor-index-list" aria-label="Régions M49">
    <a class="anchor-index-link" href="#m49-region-150"><span>Europe</span> <span class="anchor-index-count">52</span></a>
  </nav>
</div>

1. La page ou le layout construit une liste items avec label, href et un count optionnel.
2. Le partial ne rend rien quand items est vide.
3. Le partial résout le libellé visible et le aria-label depuis les fichiers i18n quand les options *Key sont utilisées.
4. Le partial émet de simples liens de fragment. Il n’y a pas de JavaScript.
5. Le CSS du composant compose les jetons Style Dictionary de couleur, d’espacement et de typographie pour la disposition et les états des liens.

Options#

Les appelants publiés doivent fournir labelKey lorsqu’ils ont besoin d’un libellé visible d’introduction et doivent fournir ariaLabelKey pour le nom du point de repère. Utilisez une clé propre à la page, basée sur le nom de fichier de la page ou des données, par exemple airlineCodesAnchorIndexLabel, workforceFrameworksAnchorIndexLabel, geographicRegionsAnchorIndexLabel ou internationalCountryCallingCodesAnchorIndexLabel, pour que le texte soit explicite sans obliger le partial à deviner le contexte.

Accessibilité#

• La rangée est un point de repère <nav> fait de simples liens de fragment.
  • Le libellé visible est un <p> distinct placé avant le nav, pas le nom du point de repère.
• Le nom accessible vient de ariaLabel ou de ariaLabelKey, rendu comme aria-label sur le <nav>.
  • Fournissez-en toujours un pour que la rangée se distingue des autres points de repère de navigation de la page. Le partial émet un avertissement pendant la génération Hugo s’il est absent.
• Chaque lien garde le nom de la section comme texte visible, avec le nombre optionnel dans son propre span anchor-index-count comme texte d’appoint
• Clavier : Tab atteint chaque lien et Entrée suit le fragment jusqu’à sa section
• Évitez un lien réduit au nombre. Le nombre complète le libellé et ne doit jamais être le seul texte d’un lien.