Liens séquentiels
Les liens séquentiels sont des liens permettant de naviguer vers une page de contenu suivante ou précédente.
Cette composante de navigation permet de segmenter des contenus longs et complexes afin de mettre l’accent sur un seul élément à la fois.
Exemple
Quand l'utiliser
Les liens séquentiels peuvent être utilisés au sein d’un parcours comportant plusieurs étapes ou informations consécutives. Ils sont réservés aux pages de contenu informationnel.
Les liens séquentiels sont notamment utilisés pour naviguer entre :
- les pages d’une publication HTML;
- des articles de blogue;
- une suite de pages qui présente un processus ou des étapes à suivre.
Comment l'utiliser
Les liens séquentiels sont toujours situés en bas de page, à gauche sous le contenu courant, l’un en dessous de l’autre. Il est recommandé d’utiliser les titres de navigation (titre court) de la page. En aucun cas, le libellé ne doit être distinct du titre de la page visée.
Si les pages de contenu sont présentées dans un contexte d’étape, il est possible d’ajouter une numérotation dans le titre de navigation (titre court) de la page et du lien séquentiel.
Les liens précédents/suivants sont toujours présentés dans le même ordre, c’est-à-dire que le lien précédent se trouve en haut du lien suivant. Il ne faut pas ajouter de lien précédent dans la première page ni de lien suivant dans la dernière page.
Les liens séquentiels sont utilisés seulement au sein de pages regroupées (appartenant à une même section) ou dont les sujets sont liés.
Les liens séquentiels ne doivent pas être utilisés pour remplacer l’indicateur d’étapes, ou la pagination.
Si vous devez séquencer les pages dans un formulaire, utilisez les boutons de navigation.
Informations techniques
Dimensions
La hauteur de la composante est variable selon le nombre de liens (1 lien ou 2 liens) et du nombre de caractères de son contenu.
La composante prend toute la largeur de la zone de contenu.
La hauteur d’un lien séquentiel est au minimum 88 px en incluant les 2 lignes horizontales.
L’icône de flèche fait 16 px de large par 12 px de haut.
Espacements
L’espace entre le contenu et les filets est de 16 px.
L’espace entre le libellé «Précédent» ou «Suivant» et le titre du lien séquentiel est de 8 px.
L’espace à gauche, entre le contenu et le début du filet, est de 32 px. L’espace de droite est de 16 px.
Alignement
Le texte du lien est toujours aligné à gauche.
L’icône de flèche est toujours alignée verticalement avec le libellé «Suivant» ou «Précédent».
À ne pas faire
À faire
États
État par défaut
<div class="liens-sequentiels">
<ul>
<li>
<a href="#">
<div class="conteneur-lien precedent">
<p>Précédent</p>
<div class="lien">Préparer votre demande d’EIMT pour le gouvernement du Québec</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="conteneur-lien suivant">
<p>Suivant</p>
<div class="lien">Après avoir présenté votre demande</div>
</div>
</a>
</li>
</ul>
</div>
.liens-sequentiels ul {
margin: 0;
padding: 0;
list-style-type: none;
max-width: 832.5px /*9 colonnes*/;
}
.liens-sequentiels li {
margin: 0;
border-bottom: 1px solid #c5cad2;
}
.liens-sequentiels ul {
border-top: 1px solid #c5cad2;
}
.liens-sequentiels a {
font-size: 16px;
line-height: 24px;
display: flex;
padding: 16px 8px 15px 8px;
text-decoration: none;
color: #095797;
justify-content: space-between;
align-items: center;
}
.liens-sequentiels li:first-child a {
padding: 15px 40px 15px 8px;
}
.liens-sequentiels a p {
font-size: 16px;
font-family: "Open Sans";
font-weight: 700;
display: block;
width: 100%;
padding-left: 24px;
}
.liens-sequentiels p {
background-repeat: no-repeat;
background-position: left center;
}
.liens-sequentiels .precedent p {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='12' viewBox='0 0 16 12'%3E%3Cpath id='fleche-precedent' d='M.331,7.267c.01-.011.014-.026.025-.037L5.293,2.293A1,1,0,0,1,6.707,3.707L3.414,7H15a1,1,0,1,1,0,2H3.414l3.293,3.293a1,1,0,0,1-1.414,1.414L.356,8.77C.345,8.759.341,8.744.331,8.733a.977.977,0,0,1,0-1.466Z' transform='translate(0 -2)' fill='%23223654'/%3E%3C/svg%3E%0A");
}
.liens-sequentiels .suivant p {
background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='12' viewBox='0 0 16 12'%3E%3Cpath id='fleche-suivant' d='M15.669,7.267c-.01-.011-.014-.026-.025-.037L10.707,2.293A1,1,0,1,0,9.293,3.707L12.586,7H1A1,1,0,1,0,1,9H12.586L9.293,12.293a1,1,0,1,0,1.414,1.414L15.644,8.77c.011-.011.015-.026.025-.037a.977.977,0,0,0,0-1.466Z' transform='translate(0 -2)' fill='%23223654'/%3E%3C/svg%3E");
}
.liens-sequentiels a .lien {
font-size: 16px;
font-family: "Open Sans";
font-weight: 400;
display: block;
width: 100%;
padding-left: 24px;
}
État au survol
.liens-sequentiels a:hover {
background-color: #f9f8f8;
}
.liens-sequentiels a:hover p {
text-decoration: none;
}
.liens-sequentiels a:hover .lien {
text-decoration: underline;
}
État au focus
.liens-sequentiels a:focus {
outline: solid 2px #4a98d9;
outline-offset: 0;
}
Dernière mise à jour : 3 mars 2023