Pagination

OverviewStyleGuidelinesCodeAccessibilityDemos
  1. Keyboard interactions
  2. Focus order
  3. Touch targets
  4. Additional guidelines
  5. ARIA Authoring Practices Guide (APG)
  6. Web Content Accessibility Guidelines
  1. Keyboard interactions
  2. Focus order
  3. Touch targets
  4. Additional guidelines
  5. ARIA Authoring Practices Guide (APG)
  6. 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