Pagination
Used on various listing pages.
Open this Pagination in a new tab
HTML:
<nav aria-label="pagination" class="l-cluster pagination">
<ul class="pagination__list">
<li><a href="path/to/page">Previous <span class="visuallyhidden">page</span></a></li>
<li><a class="pagination__list__first" href="path/to/page"><span class="visuallyhidden">page</span> 1<span
class="visuallyhidden"> (first page)</span></a></li>
<li><a class="ellipsis">…</a></li>
<li><a href="path/to/page"><span class="visuallyhidden">page</span> 6</a></li>
<li><a href="path/to/page"><span class="visuallyhidden">page</span> 7</a></li>
<li><a href="#" aria-label="page 8" aria-current="page">8</a></li>
<li><a href="path/to/page"><span class="visuallyhidden">page</span> 9</a></li>
<li><a href="path/to/page"><span class="visuallyhidden">page</span> 10</a></li>
<li><a class="ellipsis">…</a></li>
<li><a class="pagination__list__last" href="path/to/page"><span class="visuallyhidden">page</span> 20<span
class="visuallyhidden"> (last page)</span></a></li>
<li><a href="path/to/page">Next <span class="visuallyhidden">page</span></a></li>
</ul>
</nav>
Considerations
Note the use of the cluster layout.
The aria-label
attribute has been added to the <nav>
element. This is because the main website navigation also uses the <nav>
element. Where there are multiple<nav>
elements on a single page, all must be given a unique accessible name via aria-label
.
For all pagination links excluding the current page, <span class="visuallyhidden">page</span>
is added to provide additional context to the link wording for users of Assistive Technology.
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. The aria-label
on the current page link provides the same additional context as the visually-hidden span on other pagination links.