Pagination

Vue d'ensemble

La pagination est une méthode de navigation, permettant à l'utilisateur de passer d'une page à l'autre via des numéros. Cet élément est généralement affiché et centré en bas de page. Et il est présenté sur une seule ligne.

La pagination est construite avec des éléments de type de liste et englobée par une <nav> pour obtenir un niveau d'accessibilité optimal pour les lecteurs d'écran. Il est conseillé de fournir une étiquette aria-label afin de refléter son objectif.

Il est également recommandé d'ajouter du contenu qui sera masqué visuellement avec la classe .sr-only et d'ajouter l'attribut aria-hidden sur les flèches de pagination et sur les séparateurs .divider ( élément optionnel). L'attribut aria-current quant à lui, servira à désigner le numéro de page en cours.

Facultatif, l'attribut title peut-être ajouter aux flèches de direction et aux liens pour donner une indication visuelle supplémentaire à l'utilisateur. 

<nav class="pagination-nav" aria-label="Liste des articles">
	<ul>
		<li>
			<a href="#" aria-label="Page précédente" title="Page précédente">
				<span aria-hidden="true">&nbsp;&laquo;</span>
				<span class="sr-only">Page précédente</span>
			</a>
		</li>
		<li><a href="#"><span class="sr-only">Page </span>1</a></li>
		<li class="divider"><span aria-hidden="true">...</span></li>
		<li><a href="#"><span class="sr-only">Page </span>13</a></li>
		<li><a href="#"><span class="sr-only">Page </span>14</a></li>
		<li><a href="#"><span class="sr-only">Page </span>15</a></li>
		<li>
			<a href="#" aria-current="page">
				<span class="sr-only">Page courante </span>16
			</a>
		</li>
		<li><a href="#"><span class="sr-only">Page </span>17</a></li>
		<li><a href="#"><span class="sr-only">Page </span>18</a></li>
		<li><a href="#"><span class="sr-only">Page </span>19</a></li>
		<li class="divider"><span aria-hidden="true">...</span></li>
		<li><a href="#"><span class="sr-only">Page </span>30</a></li>
		<li>
			<a href="#" aria-label="Page suivante" title="Page suivante">
				<span aria-hidden="true">&nbsp;&raquo;</span>
				<span class="sr-only">Page suivante</span>
			</a>
		</li>
	</ul>
</nav>

Etat désactivé

Pour désactiver un lien (généralement le lien précédent ou suivant) il suffit d'ajouter l'attribut aria-hidden et surtout l'attribut disabled.

Pour prendre en compte la navigation au clavier. Il faut toujours ajouter tabindex="-1" sur les liens désactivés. Néanmoins, pour désactiver complètement le lien, l'utilisation de JavaScript sera nécessaire. 

<nav class="pagination-nav" aria-label="Liste des articles">
	<ul>
		<li>
			<a href="#" aria-hidden="true" aria-label="Page précédente" title="Page précédente" tabindex="-1" disabled>
				<span aria-hidden="true">&nbsp;&laquo;</span>
				<span class="sr-only">Page précédente</span>
			</a>
		</li>
		<li>
			<a href="#"  aria-current="page">
				<span class="sr-only">Page courante </span>1
			</a>
		</li>
		<li><a href="#"><span class="sr-only">Page </span>2</a></li>
		<li><a href="#"><span class="sr-only">Page </span>3</a></li>
		<li><a href="#"><span class="sr-only">Page </span>4</a></li>
		<li><a href="#"><span class="sr-only">Page </span>5</a></li>
		<li><a href="#"><span class="sr-only">Page </span>6</a></li>
		<li><a href="#"><span class="sr-only">Page </span>7</a></li>
		<li><a href="#"><span class="sr-only">Page </span>8</a></li>
		<li>
			<a href="#" aria-label="Page suivante" title="Page suivante">
				<span aria-hidden="true">&nbsp;&raquo;</span>
				<span class="sr-only">Page suivante</span>
			</a>
		</li>
	</ul>
</nav>
<nav class="pagination-nav" aria-label="Liste des articles">
	<ul>
		<li>
			<a href="#" aria-label="Page précédente" title="Page précédente">
				<span aria-hidden="true">&nbsp;&laquo;</span>
				<span class="sr-only">Page précédente</span>
			</a>
		</li>
		<li><a href="#"><span class="sr-only">Page </span>1</a></li>
		<li><a href="#"><span class="sr-only">Page </span>2</a></li>
		<li><a href="#"><span class="sr-only">Page </span>3</a></li>
		<li><a href="#"><span class="sr-only">Page </span>4</a></li>
		<li><a href="#"><span class="sr-only">Page </span>5</a></li>
		<li><a href="#"><span class="sr-only">Page </span>6</a></li>
		<li><a href="#"><span class="sr-only">Page </span>7</a></li>
		<li>
			<a href="#" aria-current="page">
				<span class="sr-only">Page courante </span>8
			</a>
		</li>
		<li>
			<a href="#" aria-hidden="true" aria-label="Page suivante" title="Page suivante" tabindex="-1" disabled>
				<span aria-hidden="true">&nbsp;&raquo;</span>
				<span class="sr-only">Page suivante</span>
			</a>
		</li>
	</ul>
</nav>