Pagination
A page number component for navigating multi-page content
Related WCAG criteria — click to view details
Code example
Common baseline
Applies to all design systemsWrap in a <nav> landmark
The pagination must be wrapped in <nav aria-label="Pagination"> or similar.
Accessible labels on buttons
Previous/Next and page number buttons must have descriptive aria-labels (e.g., "Go to page 3").
aria-current="page" on active page
The current page button must have aria-current="page".
Mark disabled navigation buttons
Disabled Previous/Next buttons (e.g., on first/last page) must have aria-disabled="true".
Indicate total page count
Include the total number of pages in button labels (e.g., "Page 3 of 10").
Announce page change
Use an aria-live region to announce the new page number after navigation.
Do not use numbers alone as button labels
Numeric buttons alone (e.g., "3") lack context; include "Page 3" or similar.
Do not remove focus from disabled buttons entirely
Disabled navigation buttons should remain in the tab order with aria-disabled rather than being removed.
Additional checks
Customize aria-label with getItemAriaLabel
Use getItemAriaLabel to provide descriptive labels for all pagination buttons (e.g., "Go to page 3").
Code sample
Implementation notes
- –MUI Pagination automatically uses a <nav role="navigation"> landmark.
- –aria-current is automatically applied to the current page.
- –Use getItemAriaLabel to customize all button aria-labels at once.