Skip to content
Amplify from Studio 24
  • Get started
  • Fundamentals
  • Layout helpers
  • Core components
  • Advanced components
  • Design handover & standards
  • Avatars
  • Breadcrumbs
  • Cards
  • Image component
  • Main
  • Notes
  • Pagination
  • Progress indicator
  • Quote component
  • Shelves
  • Simple search form
  • Sticky footer
  • Tag list
  • Text component
  • Video component

Pagination

  • Previous page
  • page 1
  • 2
  • page 3
  • page 4
  • page 5
  • …
  • page 20
  • Next page

Considerations

Note the use of the cluster layout helper.

Note how the pagination links meet the requirements of WCAG Success Criterion 2.5.5: Target Size (AAA).

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 multiplenav 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.

© Studio 24