Code example
Common baseline
Wrap 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.
Design system implementations
Additional checks
Customize aria-label with getItemAriaLabel
Use getItemAriaLabel to provide descriptive labels for all pagination buttons. Include the selected state in page labels (e.g., "Go to page 3, current page").
Add aria-label to the Pagination nav container
MUI Pagination renders a <nav> without an aria-label. Pass an aria-label via slotProps.root so screen readers can distinguish it from other nav landmarks.
Code sample
Implementation notes
- –MUI Pagination renders a <nav> landmark automatically, but you must add aria-label via slotProps.root.
- –aria-current="page" is automatically applied to the active page button.
- –Use showFirstButton and showLastButton to add first/last page navigation for large page counts.