Pagination

La pagination est un système de navigation où l'utilisateur peut passer d'une page à une autre pour un ensemble donné via les numéros de ces pages (généralement affichés en bas de page).

Règles d’implémentation pour l’accessibilité

Titre du document HTML

Le titre de la page HTML (élément title du document HTML) sera mis à jour avec le numéro de page.
Exemple : <title> Page 8 sur 20 - ...</title>

Système de pagination

La pagination est contenu dans un élément HTML nav possédant le rôle role="navigation et l’attribut aria-label annonçant qu’il s’agit d’un système de pagination.
L’ensemble des liens est structuré à l’aide d’une liste non ordonnée. L’utilisation d’une liste ordonnée créerait de la confusion pour l’utilisateur d’une synthèse vocale qui aurait accès au nombre d’items de la liste et au numéro de page ; ces deux éléments étant contradictoires (dans l’exemple ci-après, l’item numéro 6 est celui de la page 8.).
Pour empêcher l’annonce par le lecteur d’écran des flèches de direction, celles-ci sont cachées via l’attribut aria-hidden="true"
Pour donner de l’information supplémentaire au lecteur d’écran, le texte précisant la page sera posé avec la classe sr-only.
L’élément représentant la page en cours possède l’attribut aria-current="page".

Visuel

Extraits de code

Code HTML

Le texte informatif pour les logiciels de synthèse vocale est ajouté avec la classe sr-only.
Les éléments ne devant pas être vocalisés sont implémentés avec l’attribut aria-hidden="true".

<nav role="navigation" aria-label="Pagination" class="pagination">
	<ul>
          <li><a href="path/to/page1"><span class="sr-only">Première page</span><span aria-hidden="true">«</span></a></li>
		<li><a href="path/to/page"><span class="sr-only">Page Précédente</span><span aria-hidden="true"><</span></a></li>
		<li><span class="ellipsis">&#8230;</span></li>
		<li><a href="path/to/page"><span class="sr-only">Page </span>6</a></li>
		<li><a href="path/to/page"><span class="sr-only">Page </span>7</a></li>
		<li><a href="#" aria-label="Page en cours 8" aria-current="page">8</a></li>
		<li><a href="path/to/page"><span class="sr-only">Page </span>9</a></li>
		<li><a href="path/to/page"><span class="sr-only">Page </span>10</a></li>
		<li><span class="ellipsis" >&#8230;</span></li>
		<li><a href="path/to/page"><span class="sr-only">Page suivante</span><span aria-hidden="true">></span></a></li>
          <li><a class="pagination_derniere" href="path/to/pagefin"><span class="sr-only">Dernière page</span><span aria-hidden="true">»</span></a></li>
	</ul>
</nav>

Code CSS

.sr-only {
  border: 0 !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  -webkit-clip-path: inset(50%) !important;
  clip-path: inset(50%) !important;
  height: 1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
  white-space: nowrap !important;
}
.pagination {
     display: flex;
     justify-content: center;
     border-top: 1px solid #eee;
     margin: 1em 0;
     padding-top: 0.5em;
}
.pagination ul {
     list-style: none;
     margin: 0;
     padding: 0;
     display: flex;
}
.pagination li {
margin: 0 1px;
}
.pagination a,
.pagination .ellipsis {
display: block;
padding: 0.5em 1em;
border: 1px solid #999;
border-radius: 0.2em;
text-decoration: none;
}
.pagination a[aria-current="page"] {
background-color: #333;
color: #fff;
}
.pagination a:hover,
.pagination a:focus {
display: block;
padding: 0.5em 1em;
border: 1px solid #999;
background-color: #999;
border-radius: 0.2em;
text-decoration: none;
}