Skip to main content Red Hat Design System logo Contribute on Github

Pagination

Overview Style Guidelines Code Demos Accessibility

Keyboard interactions

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

Image of 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. Interactive elements within expanded sections are automatically added to the focus order.

Image of paginations showing the focus order from left to right and top to bottom

Touch targets

Buttons, page field input, and last page link are adequately spaced for optimal touch targets.

Image of paginations with elements showing adequate 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.

© 2021-2024 Red Hat, Inc. Deploys by Netlify