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. |