Navigation au sein de la page

Principe directeur : Être uniforme.

À propos de la navigation au sein de la page

Cette composante (également connue sous le nom de table des matières) consiste en une liste de rubriques qui renvoient à différentes sections de la même page.

Elle aide l’utilisateur à comprendre la page et à naviguer directement vers le sujet qui l’intéresse.

Les présentes lignes directrices concernent spécifiquement le contenu des pages web standards des administrations publiques. Elles ne sont pas destinées aux tables des matières de plusieurs pages, telles que celles utilisées pour les lois, les rapports ou les livres, qui renvoient au contenu de plusieurs pages.

Quand utiliser cette composante?

Il n’existe pas de recommandation préétablie concernant la longueur d’une page pour envisager l’utilisation ce type de navigation. Nous vous recommandons d’utiliser cette composante pour aider les utilisateurs à :

• comprendre rapidement le contenu d’une seule page.
• accéder directement à la section qu’ils souhaitent lire.
• partager un lien vers une section spécifique de la page.

Une page comportant plusieurs sections courtes peut ne pas nécessiter de navigation au sein de la page, l’utilisateur pouvant rapidement parcourir les titres de la page. Ce composant peut néanmoins être utile pour fournir un lien direct vers des sections spécifiques.

Testez auprès de vos utilisateurs afin de savoir si cette composante les aide à accéder à l’information dont ils ont besoin.

Comment fonctionne ce type de navigation?

Les utilisateurs sont le plus souvent confus ou incertains quant à savoir si les liens de cette composante les mèneront à une nouvelle page ou au contenu de la page sur laquelle ils se trouvent.

Pour vous assurer que les utilisateurs comprennent que cette navigation reste sur la même page, définissez et répondez à leurs attentes :

• Utilisez le titre « Dans cette page » pour différencier cette composante des autres listes de liens qui renvoient les utilisateurs vers de nouvelles pages.
• Faites correspondre le texte du lien au texte du titre afin que les utilisateurs soient conduits exactement là où ils s’attendent à aller.
• Utilisez un défilement fluide pour accéder à la section plutôt qu’un saut brusque, à moins que votre site web ou votre application ne puisse pas prendre en charge cette fonctionnalité.
• Faites apparaître le texte précédent ou un espace blanc en haut de l’écran pour éviter de donner l’impression d’être sur une nouvelle page.

Combinaison avec le bouton « Retour en haut de la page »

Utilisez la composante de navigation au sein de la page en combinaison avec un bouton Retour en haut de la page.

Le bouton devrait apparaître une fois que la navigation au sein de la page n’est plus dans le champ de vision.

Le bouton doit permettre de revenir en douceur en haut de la page, où l’utilisateur peut retrouver les liens de navigation au sein de la page.

Exemple

---

Action du bouton « Retour »

Après avoir utilisé la navigation au sein de la page, le bouton « Retour » du navigateur devrait ramener l’utilisateur à l’endroit où il se trouvait précédemment sur la même page.

Après avoir utilisé le bouton « Retour en haut de la page », le bouton « Retour » du navigateur devrait permettre aux utilisateurs de revenir à la page précédente de l’historique du navigateur. Les ancres HTML ordinaires des pages web fonctionnent de cette manière par défaut.

Testez-le sur des applications d’une seule page afin de vous assurer que cela fonctionne ainsi.

Meilleures pratiques

À faire

• Organisez le contenu en sections avec des titres concis.
• Placez cette composante au début de la page — après l’introduction et avant le contenu principal de la page.
• Maintenez une distance de 40 px entre la navigation au sein de la page et toutes les composantes situées au-dessus et au-dessous d’elle.
• La zone de texte ne doit pas dépasser 8 colonnes dans la grille à 12 colonnes.
• Utilisez les couleurs standards des liens du système de conception.
• Limitez la liste à une seule colonne. Les colonnes multiples ne sont pas toujours lues dans l’ordre souhaité.

À ne pas faire

• Soulignez les liens. Avec un titre suffisamment explicite, le soulignement peut avoir un impact sur la lisibilité, en particulier sur les listes de liens comportant beaucoup de texte.
• Placez les liens de navigation au sein de la page dans une zone normalement utilisée pour d’autres types de navigation (par exemple, l’entête).
• Utilisez un lien vers un contenu extérieur à la page en cours.
• Masquez certaines parties de la navigation au sein de la page.
• Listez les liens de la page horizontalement.
• Numérotez la liste, à moins que vous n’ayez besoin de signifier un ordre ou un nombre spécifique.

Titres numérotés

Si vous devez numéroter vos titres H2, incluez le numéro dans le titre et utilisez une liste numérotée pour la navigation au sein de la page. Sinon, utilisez une liste à puces pour les liens de navigation au sein de la page. Les listes numérotées peuvent indiquer que quelque chose doit être fait dans un certain ordre (comme les étapes d’un processus) ou être utilisées pour compter. Ne numérotez pas la liste des liens de navigation au sein de la page si :

• les titres H2 ne sont pas numérotés.
• l’ordre des titres n’est pas important.
• le décompte final n’est pas pertinent.

Pages longues

Lors de la mise en place de la navigation au sein de la page, tenez compte de la longueur du contenu de votre page.

Une longue page peut impliquer que vous deviez répartir votre contenu sur plusieurs pages au lieu de le conserver sur une seule page.

Conception en deux colonnes

Sur demande, nous pouvons vous fournir une version de la composante de la navigation au sein de la page qui s’affiche en deux colonnes sur les ordinateurs de bureau et s’empile en une seule colonne sur les téléphones mobiles.

Cette option est conçue pour les pages comportant 15 liens ou plus de navigation au sein de la page.

Approche privilégiée

Étant donné que la conception en deux colonnes ne fonctionne pas dans une présentation sur un téléphone mobile, il est préférable d’adopter l’approche suivante :

• Limitez à 15 le nombre de liens de navigation au sein de la page.
• Utilisez le modèle de conception standard à colonne unique.

Cela permet d’offrir une expérience uniforme sur les écrans d’ordinateurs de bureau et de téléphones mobiles.

Spécifications techniques

Barre horizontale noire

La composante par défaut comprend une barre horizontale noire au-dessus du titre « Dans cette page ».

Sur les pages du site ontario.ca, la barre horizontale intégrée n’est pas nécessaire lorsque la navigation au sein de la page apparaît immédiatement en dessous :

• d’une image de premier plan en bannière.
• d’un titre et d’une introduction qui comportent déjà une barre horizontale.

Pour supprimer la barre horizontale, ajoutez une classe ontario-page-navigation--no-top-border au conteneur de navigation au sein de la page :

<div class="ontario-page-navigation ontario-page-navigation--no-top-border"></div>

Faire correspondre le texte du lien aux titres de sections

L’attribut href d’un élément de navigation au sein de la page doit correspondre à l’attribut id de la section associée.

Par exemple :

Élément de navigation au sein de la page

<li class="ontario-page-navigation-list__item">
    <a class="ontario-page-navigation-item__link" href="#section1">  </a>
</li>

Section associée

<div id="section1">
    <h2>Section 1</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore</p>
</div>

Défilement fluide

Un défilement fluide aide les utilisateurs à comprendre où ils se trouvent et ce qu’ils doivent faire pour revenir à l’endroit où ils se trouvaient auparavant.

Exemple de code JavaScript pour un défilement fluide :

(function () {
    const links = document.querySelectorAll('.ontario-page-navigation-item__link');

    for (const link of links) {
        link.addEventListener('click', clickHandler);
    }

    function clickHandler(e) {
        e.preventDefault();

        const href = this.getAttribute('href');
        const element = document.querySelector(href);

        if (element) {
            element.scrollIntoView({ behavior: 'smooth', block: 'center' });
        }
    }
})();

Le script se trouve dans scripts/toc-smooth-scroll.js.

Accessibilité

Utilisation de l’élément <nav>

Placez la navigation au sein de la page à l’intérieur de l’élément <nav> pour indiquer qu’elle fait partie de la navigation de la page.

Ceci est pris en compte par de nombreux lecteurs d’écran et peut aider l’utilisateur à naviguer au sein de la page sans avoir à parcourir les liens un par un dans le contexte de la page.

<main>
    <nav>
        <div class="ontario-row">
            <div class="ontario-columns ontario-small-12" style="padding: 0rem;">
                <div class="ontario-page-navigation--full">
                    <div class="ontario-page-navigation-content--full">
                        <h2 class="ontario-page-navigation-header">On this page</h2>
                        <a class="ontario-show-on-focus" href="#skip-to-main"> Skip this page navigation </a>
                        <ol class="ontario-page-navigation-list" role="navigation">
                            <li class="ontario-page-navigation-list__item">
                                <a class="ontario-page-navigation-item__link" href="#general-guidelines">General guidelines </a>
                            </li>
                            <li class="ontario-page-navigation-list__item">
                                <a class="ontario-page-navigation-item__link" href="#technical-specifications"> Technical specifications </a>
                            </li>
                            <li class="ontario-page-navigation-list__item">
                                <a class="ontario-page-navigation-item__link" href="#accessibility"> Accessibility </a>
                            </li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>
    </nav>
    <div id="skip-to-main"></div>
</main>

Sauter les liens de navigation

Incluez une mention visuellement cachée « Sauter les liens de navigation de cette page » juste après l’entête.

Cela permet aux utilisateurs de lecteurs d’écran et de claviers de choisir d’explorer cette navigation ou de passer à autre chose.

Placez le lien caché « Sauter les liens de navigation de cette page » après l’entête.

<a class="ontario-show-on-focus" href="#skip-to-main">Skip this page navigation</a>

Définissez l’id d’une <div> à la fin de votre section « Dans cette page » à skip-to-main pour faciliter la navigation :

<div id="skip-to-main"></div>