Pagination

Pagination allows users to navigate between pages of content, one page at a time. It can be used when a long list or set of results is divided into discrete pages, especially when users benefit from a clear sense of how much content is available and the ability to jump to specific pages. Infinite scroll or "load more" patterns may be more appropriate when the content is open-ended or browsed casually.

Accessibility Features

  • A <nav> landmark with aria-label="Pagination" identifies the pagination as a specific navigation region.
  • aria-current="page" identifies the currently active page.
  • When no further navigation is possible, previous and next page controls are marked disabled to prevent interaction.
  • When pagination updates content dynamically without a page reload, <button> must be used for the controls. When each page has its own URL, <a> must be used.
  • When pagination updates dynamically without a page reload, role="status" announces the current page to screen readers.
  • <ol> identifies the pagination as a list of pages and communicates the total number of pages to screen readers.

Example

Code Snippet