Skip to content
Design System
  • Home
  • Settings
  • Styles
  • Layouts
  • Components
  • Third party plugins
  • Templates
  • Activity
  • Archived content
  • Breadcrumbs
  • Cards
  • Collapsible containers
  • Columns
  • Content slider (carousel)
  • Crosslinks (You may also like)
  • Evangelists
  • Fifty-fifty
  • Footer
  • Group list
  • Header
  • Hero
  • Image component
  • Members
  • Navigation
  • Notes
  • Pagination
  • Pre-footer
  • Quote component
  • RSS
  • Table of contents
  • Tag list
  • Text component
  • Translations
  • Video component

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 class="pagination__list__first" href="path/to/page"><span aria-hidden="true">&lt;&lt;</span><span class="visuallyhidden">First page</span></a></li>
		<li><a href="path/to/page">Previous <span class="visuallyhidden">page</span></a></li>
		<li><a href="path/to/page"><span class="visuallyhidden">page</span> 1</a></li>
		<li><a href="#" aria-label="page 2" aria-current="page">2</a></li>
		<li><a href="path/to/page"><span class="visuallyhidden">page</span> 3</a></li>
		<li><a href="path/to/page"><span class="visuallyhidden">page</span> 4</a></li>
		<li><a href="path/to/page"><span class="visuallyhidden">page</span> 5</a></li>
		<li><a class="ellipsis">&#8230;</a></li>
		<li><a href="path/to/page"><span class="visuallyhidden">page</span> 20</a></li>
		<li><a href="path/to/page">Next <span class="visuallyhidden">page</span></a></li>
		<li><a class="pagination__list__last" href="path/to/page"><span aria-hidden="true">&gt;&gt;</span><span class="visuallyhidden">Last 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-labelon the current page link provides the same additional context as the visually-hidden span on other pagination links.

The angle bracket characters used within the links for the very first and very last pages are hidden from Assistive Technology users with inside <span aria-hidden="true">. Accessible text labels are added using <span class="visuallyhidden">.

Copyright © 2021 W3C - generated 04 Mar 2022, 13:56:22 UTC

Feedback is welcome and can be submitted as a GitHub issue.