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