Accessibility in React Pager component

11 Jan 20231 minute to read

Accessibility is achieved in the Pager component through WAI-ARIA standard and keyboard navigations. The Pager features can be effectively accessed through assistive technologies such as screen readers.

WAI-ARIA

WAI-ARIA (Accessibility Initiative – Accessible Rich Internet Applications) defines a way to increase the accessibility of web pages, dynamic content, and user interface components developed with Ajax, HTML, JavaScript, and related technologies. ARIA provides additional semantics to describe the role, state, and functionality of web components.

The following ARIA attributes are used in the Pager:

  • pager (data-role)
  • aria-selected (attribute)
  • aria-owns (attribute)
  • aria-label (attribute)

Keyboard navigation

Pager functionalities can be interactive with keyboard shortcuts.

The following keyboard shortcuts are supported by the Pager.

Interaction Keys Description
Pager  
Alt + J Focus on the first pager item.
Tab / Shift + Tab Focus on the next/previous pager item.
Enter / Space Select the currently focused page.
Right Arrow / PageDown Navigate to next page.
Left Arrow / PageUp Navigate to previous page.
Home / End Navigate to first and last page.