Index de référence

Tâche#

Utilisez ce motif lorsqu’une personne doit trouver, comparer et parcourir une grande référence structurée sans en perdre le contexte. Il est utilisé pour les références du site principal sur les codes aériens, les régions géographiques, les indicatifs téléphoniques internationaux, l’alphabet phonétique et les cadres de compétences.

Composition#

Le motif combine un Index d’ancrage pour les sections répétées nommées, un Tableau de données pour la comparaison, une Rangée de filtres seulement lorsque les contrôles changent les données affichées, et une Pagination lorsqu’un jeu de données doit être divisé en pages. La mise en page choisit seulement les éléments requis par les données.

Contenu et données#

La source de données doit fournir des identifiants stables, des libellés visibles et une structure suffisante pour générer des rangées de tableau et des sections répétées. Un élément d’index nomme sa destination et peut afficher un décompte; celui-ci ne remplace jamais le libellé. Les sources et la portée de mise à jour restent visibles afin que la référence ne semble pas plus fiable que ses données.

Comportement adaptatif#

La référence reste un seul flux de lecture. Les tableaux larges utilisent leur région de défilement existante plutôt que de réduire les libellés au-delà du lisible. L’index d’ancrage replie ses liens compacts, les filtres restent utilisables avant les données touchées et la pagination conserve ses cibles de liens ou de boutons ordinaires à toute largeur.

Implémentation#

Chaque mise en page de référence façonne ses données en sections propres à la page et transmet une petite tranche items à data-page/anchor-index.html. Les partials de pages de données fournissent l’enveloppe de tableau, les contrôles de filtre et la pagination partagés. Le JavaScript se limite aux interactions qui changent le jeu de données ou l’état de la page; les liens d’ancrage restent une navigation de fragments ordinaire du navigateur.

Manifeste de motif

Nature
Motif
Catégorie
Découverte
Statut
Implémenté
Contenu et données
une source de données structurées avec identifiants stablesdes sections répétées nommées avec libellés significatifs et décomptes facultatifsune attribution des sources et une frontière de mise à jour claire
Accessibilité
un point de repère de navigation par fragments nommé lorsque des sections répétées sont présentesdes libellés visibles sur chaque lien et contrôle; les décomptes sont supplémentairesles états de filtre, de tableau et de pagination restent utilisables au clavier
Implémentation
Partial:layouts/partials/data-page/anchor-index.htmllayouts/partials/data-page/filter-row.htmllayouts/partials/data-page/table-pagination.htmllayouts/partials/data-page/table-wrap.htmlGabarit:layouts/references/airline-codes.htmllayouts/references/geographic-regions.htmllayouts/references/international-country-calling-codes.htmllayouts/references/phonetic-alphabet.htmllayouts/references/workforce-frameworks.htmlCSS:assets/css/site.cssJavaScript:assets/js/site.js

Accessibilité#

  • Un index d’ancrage est un point de repère de navigation nommé composé de liens de fragments ordinaires. Il se déplace vers du contenu déjà présent dans la page; il n’agit jamais comme filtre.
  • Les en-têtes de tableau, filtres et éléments de pagination conservent leur sémantique native ou documentée. Les personnes au clavier peuvent atteindre chaque lien et contrôle dans l’ordre source.
  • Un décompte complète un libellé de section visible et ne doit jamais être le seul texte d’un lien.
  • La région de défilement de tableau adaptative préserve la structure tabulaire et expose son nom accessible plutôt que d’aplatir des données sémantiques en cartes.
  • Utilisez une rangée de filtres seulement lorsqu’elle modifie ce qui est visible. Pour un raccourci vers une section existante, utilisez l’index d’ancrage.