Skip to main content Home
About About the Design SystemRoadmap
Get started OverviewDesignersDevelopers
Foundations OverviewColorGridIconographySpacingTypography
Tokens Overview Global colorbox shadowTypographyborderopacityspacelengthIconBreakpointsMedia Queries
Elements All elements Accordion Alert Announcement Audio player Avatar Back to top Badge Blockquote Breadcrumb Button Card Chip Code block Call to action Dialog Disclosure Footer Health index Icon Jump links Navigation (primary) Navigation (secondary) Pagination PopoverPlanned Progress stepsPlanned Site status Skip link Spinner Statistic Subnavigation Surface Switch Table Tabs Tag Tile Timestamp Tooltip Video embed
Theming OverviewColor PalettesCustomizingDevelopers
Patterns All PatternsCardTabsFilterFormLinkLink with iconLogo wallSearch barSkip navigationSticky bannerSticky cardTileVideo thumbnail
Personalization All Personalization PatternsAnnouncement
Accessibility FundamentalsAccessibility toolsAssistive technologiesCI/CDContentContributorsDesignDevelopmentManual testingResourcesScreen readers
Design/code status Release notes Get support

Pagination

OverviewStyleGuidelinesCodeAccessibilityDemos
Keyboard interactionsFocus orderTouch targetsAdditional guidelinesARIA Authoring Practices Guide (APG)Web Content Accessibility GuidelinesKeyboard interactionsFocus orderTouch targetsAdditional guidelinesARIA Authoring Practices Guide (APG)Web Content Accessibility Guidelines

Keyboard interactions

The buttons, page input field, and last page link all have keyboard interactions when the Enter key is pressed.

Paginations with diagrams of what happens when Tab or Enter keys are pressed
Key Result
Tab Moves focus to the right (not including truncation)
Shift+Tab Moves focus to the left (not including truncation)
Enter (when a button has focus) Selects a control or changes an inactive page to active
Enter (when a new page number is typed) Navigates users to the page number that is typed
Enter (when last page link has focus) Navigates users to the last page

Focus order

A logical focus order helps keyboard users operate our websites. Elements need to receive focus in an order that preserves meaning, therefore the focus order should make sense and not jump around randomly.

Paginations showing the focus order from left to right and top to bottom

Touch targets

Buttons, page field input, and the last page link are adequately spaced for optimal touch targets. The default size meets the WCAG Level AAA success criteria for target size which requires at least a 44px by 44px touch target.

Paginations with elements showing WCAG AAA compliant touch target spacing

The small size exceeds the WCAG Level AA success criteria for target size which calls for touch targets to be at least 24px by 24px, but its buttons do not meet the Level AAA requirement.

Size SM Paginations with elements showing WCAG AA compliant touch target spacing

Additional guidelines

  • The active page must be conveyed to assistive technologies
  • Icon only buttons must have accessible names for assistive technologies

ARIA Authoring Practices Guide (APG)

Learn to use the accessibility semantics defined by the Accessible Rich Internet Application (ARIA) specification to create accessible web experiences.

View APG resources

Web Content Accessibility Guidelines

Understanding documents provide detailed explanations for Web Content Accessibility Guidelines (WCAG) guidelines and success criteria.

Edit this page on GitHub
© 2021-2025 Red Hat, Inc. Deploys by Netlify