Pagination

Used on various listing pages.

Open this Pagination in a new tab

HTML:

<nav class="l-cluster pagination" aria-labelledby="pagination">
    <h2 id="pagination" class="visuallyhidden">Pagination</h2>
	<ul class="pagination__list">
		<li><a href="path/to/page">Previous</a></li>
		<li><a class="pagination__list__first" href="path/to/page"> 1</a></li>
		<li><a class="ellipsis">&#8230;</a></li>
		<li><a href="path/to/page">6</a></li>
		<li><a href="path/to/page">7</a></li>
		<li><a href="#" aria-current="page">8</a></li>
		<li><a href="path/to/page">9</a></li>
		<li><a href="path/to/page">10</a></li>
		<li><a class="ellipsis">&#8230;</a></li>
		<li><a class="pagination__list__last" href="path/to/page">20</a></li>
		<li><a href="path/to/page">Next</a></li>
	</ul>
</nav>

Considerations

Note the use of the cluster layout.

The aria-labelledby attribute has been added to the <nav> element, which references the ID of the visually-hidden <h2> inside the <nav>. This is because the main website navigation also uses the <nav> element. Where there are multiple <nav> elements on a single page, they should all have a unique accessible name.

The current page is indicated by aria-current="page". As per the breadcrumbs component, it is fully linked so that users of Assistive Technology can find which is the currently active link.